Вы убедились, что ваши страницы хорошо выглядят и привлекают клиентов. Но как ваши страницы выглядят «вне сайта»?
В частности, как выглядят ваши страницы, когда ими делятся в социальных сетях, таких как Facebook, LinkedIn, Twitter и Pinterest?
Вот как выглядит Alertdesk.com:
Как мы этого добились? Ответ — социальные теги.
Социальные теги относятся к Open Graph и Twitter Cards, которые являются метатегами, которые вы размещаете в разделе ‹head› на своих страницах.
Настройка социальных тегов может сделать ваши страницы более привлекательными при публикации в социальных сетях. Правильно настроенные теги также могут помочь таким сайтам, как Facebook, лучше понять, о чем ваш контент.
Типы социальных тегов
По сути, есть два типа социальных метатегов — те, которые работают в Твиттере, и те, которые работают на любом другом сайте, грубо говоря.
Эти два типа называются Twitter Card и Open Graph.
Twitter Card, разработанная Twitter (кто бы мог подумать?), в основном работает в Twitter. Добавив его на свои страницы, пользователи, которые делятся вашими страницами в Твиттере, получат карточку в свой твит. Подробнее о твиттер-картах можно прочитать здесь.
Open Graph, разработанный Facebook, работает еще на нескольких сайтах, помимо Facebook. LinkedIn и Pinterest, например, также поддерживают формат Open Graph. Подробнее о протоколе Open Graph можно прочитать здесь.
Какие теги следует использовать?
Существует много видов тегов и атрибутов Open Graph и Twitter Card. Мы не собираемся описывать их все в этой статье.
Приведенные ниже теги помогут таким сайтам, как Facebook и Twitter, лучше понять ваш контент.
Теги Open Graph
- og:title — Название вашей страницы (не обязательно должно совпадать с названием вашей страницы).
- og:url — канонический URL-адрес вашей страницы (все акции будут идти по этому URL-адресу).
- og:image — URL-адрес изображения, которое вы хотите отобразить в своем социальном сниппете (рекомендуемое разрешение 1200×627 пикселей).
- og:description — описание вашей страницы (не обязательно должно совпадать с мета-описанием вашей страницы).
Также неплохо было бы добавить:
- og:type — тип контента (статья, веб-сайт, видео и т. д.).
- og:locale — язык вашей страницы (Facebook будет считать, что это «en_US», если не указано другое).
Теги карты Твиттера
- twitter:card — Тип карты, которую вы хотите — выберите один из 4 типов.
- twitter:title — Название вашей страницы (не обязательно должно совпадать с названием вашей страницы).
- twitter:description — описание вашей страницы (не обязательно должно совпадать с мета-описанием вашей страницы.
- twitter:image — URL-адрес изображения, которое вы хотите отображать в своем социальном сниппете (соотношение сторон 1:1 — минимум 144 × 144 пикселей и максимум 4096 × 4096 пикселей).
Примечание. Для Pinterest доступно еще несколько тегов Open Graph. Вы можете просмотреть документацию Pinterest здесь.
Как настроить теги
Если вы используете WordPress, несколько плагинов могут выполнить эту работу. SEO-плагины, такие как Yoast SEO и RankMath, имеют социальную функцию, где вы можете настроить данные Open Graph и Twitter Card.
Почти все CMS либо изначально имеют эту функциональность, как Squarespace, либо имеют какой-то плагин или надстройку для нее, как Magento.
Как просматривать и отлаживать свои теги
Иногда вам может понадобиться протестировать и отладить ваши теги. Для этого вы можете использовать эти инструменты для выполнения работы:
🤳 Используйте Alertdesk для проверки своих социальных тегов
В наших отчетах по социальным сетям и контенту вы можете увидеть, как ваша страница будет выглядеть на Facebook и Twitter, когда ею поделятся.
Мы также проверяем, отсутствуют ли у вас какие-либо рекомендуемые социальные теги (упомянутые выше).
