Метатеги для соцсетей. Красивые репосты и сниппеты ссылок. Пользователи обмениваются ссылками в социальных сетях и мессенджерах. Сайты и приложения создают красивый сниппет о странице, на которую эти ссылки указывают. Вы можете улучшить внешний вид этого блока и увеличить его кликабельность. Это позволит получить вам больше трафика и повысить узнаваемость вашего сайта.
Open Graph
Помимо личной переписки, ссылку на ваш сайт могут разместить в группе или на стене. Поэтому важно заранее позаботиться о внешнем виде сниппета.
Компоненты, из которых будет составлен сниппет, указываются с помощью метатегов в формате open graph. Они должны быть размещены в секции <head>.
<meta property="og:type" content="website" />
<meta property="og:title" content="Page title" />
<meta property="og:description" content="Page og:description" />
<meta property="og:image" content="https://website.com/image1200х630.png" />
<meta property="og:url" content="http://www.site.com" />
<meta property="og:site_name" content="Site name" />
Тег og:type — тип контента страницы. По умолчанию website.
Тег og:title — заголовок сниппета. Должен содержать заголовок длиной не более 95 символов.
Тег og:description — описание сниппета. Должен содержать заголовок описание не более 297 символов.
Тег og:image должен указывать на квадратное изображение размером не меньше чем 1200х630 пикселей.
Тег og:url каноническая ссылка на страницу. Пользователь может запостить ссылку с UTM метками и хеш строкой. В этом параметре вы можете указать каноничный URL.
Тег og:site_name название вашего сайта.
Протестировать страницу вы можете с помощью официального инструмента от Facebook* https://developers.facebook.com/tools/debug. Официальная документация https://developers.facebook.com/docs/sharing/webmasters/
Сайт Pinterest.com также использует формат Open Graph. Протестировать страницу вы можете с помощью официального инструмента от Pinterest https://developers.pinterest.com/tools/url-debugger/. Официальная документация https://developers.pinterest.com/docs/rich-pins/articles/
Чтобы задать контент для отображения сниппета в Twitter, разместите следующие теги в секции ~
~:<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@site_account" />
<meta name="twitter:title" content="Page title" />
<meta name="twitter:description" content="Page description" />
<meta name="twitter:creator" content="@author_account" />
<meta name="twitter:image:src" content="https://website.com/image1024x512.png" />
Тег twitter:card по умолчанию имеет значение summary.
Тег twitter:site — необязательный параметр, который ссылается на twitter аккаунт сайта.
Тег twitter:title — заголовок сниппета. Должен содержать текст не более 70 символов.
Тег twitter:description — описание сниппета. Должен содержать текст не более 200 символов.
Тег twitter:creator — необязательный параметр, который ссылается на twitter автора контента страницы.
Тег twitter:image:src должен указывать на изображение размером не более 5Mb.
Протестировать страницу вы можете с помощью официального инструмента от Twitter https://cards-dev.twitter.com/validator. Официальная документация https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup
Маленький трюк: вы можете обновить картинку превью. Для этого выполните следующие шаги: воспользуйтесь инструментом тестирования страницы для той ссылки на которой требуется обновить картинку, затем откройте окно добавления нового твита и вставьте ссылку туда, дождитесь прогрузки превью (если вы увидите старую версию, то это нормально.). Публиковать твит необязательно. Через некоторое время твиттер обновит превью ссылки для всех уже опубликованных твитов.
Мессенджеры, Закладки, RSS-агрегаторы и т. д.
Также существует набор базовых метатегов, которые использует не только различные программы, но и поисковые системы. Разместите следующие метатеги в секции ~
~:<meta itemprop="name" content="Page title" />
<meta itemprop="description" content="Page description" />
<meta itemprop="image" content="https://website.com/image800x600.png" />
Тег itemprop=”name” должен содержать текст длинной менее 140 символов. Тег itemprop=”name” должен содержать текст длинной менее 185 символов. Тег itemprop=”name” должен указывать на изображение размером не менее 800x600 пикселей.
Используя эти метатеги, ваш сайт будет выглядеть привлекательно не только в социальных сетях, но также в мессенджерах и различных программах.
*Соцсеть запрещена на территории Российской Федерации