Когда вы впервые запускаете новый веб-сайт или блог, вы, вероятно, сразу захотите поделиться им со своими друзьями и семьей. Но если вы не настроили его должным образом, все, что они увидят, - это скучная ссылка.
Даже если при предварительном просмотре загружается изображение, оно может оказаться не тем, которое вы хотите видеть. Но это можно исправить.
Мета-теги - это HTML-теги, которые не отображают какой-либо контент на вашей веб-странице. Они живут внутри теги в вашем HTML. Когда поисковые системы и другие сервисы, такие как Facebook, читают вашу страницу, они получают целевую информацию из метатегов.
Для многих Google - это Интернет. Возможно, это самое важное изобретение со времен Интернета. И хотя с тех пор поисковые системы сильно изменились, основные принципы остались прежними.
Мета-теги - это то, что вам нужно, чтобы получать сообщения из социальных сетей и текстовые сообщения для правильной обработки ваших ссылок. Например, когда вы делитесь ссылкой через Facebook, Facebook переходит по ссылке на страницу. Затем он читает страницу и пытается выяснить, что там на самом деле.
Самое главное, он пытается найти заголовок, описание и изображение. Если он не может их найти, он просто покажет простую ссылку без излишеств. Чтобы Facebook показывал определенное название, описание и изображение, вам нужно добавить определенные метатеги, чтобы сообщить ему, что искать.
Если сайты социальных сетей, такие как Facebook и Twitter, получат необходимую информацию с вашего веб-сайта, они создадут карточку. Если все пойдет по плану, все должно выглядеть так, как вы ожидаете.
СВЯЗАННЫЕ С: Как создать ботов для Twitter, Instagram и Reddit с помощью Python
Если вы создали свой веб-сайт с использованием простого HTML или интерфейсной среды, добавление метатегов должно быть простым. Они находятся в той же области, что и теги title, style и script, как в следующем примере:
Ли Натан - писатель по личному развитию
...
Вы можете видеть, что уже есть несколько метатегов. Это не те, которые вам понадобятся, чтобы ваш сайт правильно отображался в ссылках. Это просто некоторые низкоуровневые настройки по умолчанию.
Изменение мета-тегов в WordPress более сложное. Для полных инструкций потребуется целое руководство. Поэтому вот несколько советов, которые помогут вам начать работу:
- Если вам удобно редактировать свою тему, метатеги должны быть расположены в header.php файл вашей текущей темы.
- Если вы не можете получить доступ к своей теме или не хотите иметь с ней дело, вы можете изменить свои метатеги с помощью плагина, например Расширенное управление метатегами.
Взгляни на лучшие хостинг-провайдеры WordPress если вы заинтересованы в запуске сайта на платформе.
Как создать карточку Facebook
Теперь, когда вы выяснили, как получить доступ к своим метатегам, вы можете приступить к их редактированию. Это минимальные теги, которые хочет видеть Facebook:
Свойства заголовка и описания сообщают Facebook, какой текст отображать. Свойство URL может ссылаться на подстраницу для специальных рекламных акций или A / B-тестирования.
Свойство изображения должно быть полным адресом, а не относительно вашей индексной страницы, например /image.jpg. Наилучший размер изображения - 1200x628, так как этот размер будет наиболее совместимым для сайтов социальных сетей и устройств.
Как создать карту Twitter
Карточка Twitter почти такая же, как карточка Facebook, но с другими метатегами. Вот как выглядят мета-теги Twitter:
Свойства заголовка и описания такие же, как у Facebook; свойство изображения также подчиняется тем же правилам. И 1200x628 - хороший размер для начала.
Основное отличие - свойство карты. В этом примере используется «summary_large_image» для создания карточки, которая выглядит примерно так же, как карточка Facebook. Однако у Twitter есть и другие варианты.
Как убедиться, что ваш превью выглядит правильно
Вы можете опубликовать твит и быстро удалить его полдюжины раз, пока не получите правильную карточку. Вы также можете отправить себе сообщение в Facebook. Но эти методы довольно неуклюжие. К счастью, обе службы предоставляют удобный инструмент, который упрощает проверку ваших карт.
В Facebook есть отладчик общего доступа. И В Твиттере есть валидатор карт. Оба инструмента выполняют одну и ту же задачу, позволяя вам увидеть, как работают ссылки; они просто используют разные имена.
Другие аспекты, которые вам следует проверить
Теперь у вас есть ссылка на ваш сайт, чтобы отлично выглядеть в двух больших социальных сетях. Скорее всего, он везде будет хорошо смотреться, но вам стоит еще раз проверить, что это так. Например, если у вас есть информация внизу или вверху изображения, на мобильном устройстве она может быть обрезана.
Мобильный
Прежде чем идти дальше, рекомендуется убедиться, что ваша ссылка по-прежнему хорошо выглядит на мобильных устройствах. Как уже упоминалось, ваше изображение может быть обрезано на меньшем экране. В примере, показанном ранее, изображение было слишком низким, поэтому вы могли видеть только верхнюю половину головы.
SMS и мессенджеры
Это простой способ отправить себе текст (или сообщение через службу, например WhatsApp) со ссылкой. Вам не нужно беспокоиться об инструменте проверки. Скорее всего, если он будет хорошо выглядеть в приложениях для социальных сетей, он будет хорошо смотреться и здесь.
Если вы работаете над своим личным веб-сайтом, вы определенно хотите, чтобы он хорошо смотрелся в LinkedIn. К счастью, LinkedIn также предоставляет инструмент проверки называется почтовый инспектор. Кроме того, вам не нужно беспокоиться о большем количестве метатегов, потому что LinkedIn использует теги Facebook.
Над чем работать дальше
Информации, которую мы рассмотрели, должно быть достаточно, чтобы вы начали. Но если вы хотите узнать больше, посмотрите Руководство Facebook по тегам или же Страница Твиттера по тегам.
Интернет наводнен инструментами, которые помогут каждому создавать свои собственные профессионально выглядящие изображения, которыми можно поделиться. Вот наши фавориты.
- Программирование
- HTML
- Домашняя страница
- Инструменты для веб-мастеров
Ли - постоянный кочевник и эрудит со многими увлечениями и интересами. Некоторые из этих страстей вращаются вокруг продуктивности, личного развития и письма.
Подписывайтесь на нашу новостную рассылку
Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!
Еще один шаг…!
Пожалуйста, подтвердите свой адрес электронной почты в электронном письме, которое мы вам только что отправили.
