Микроразметка Open Graph: зачем она контент-маркетингу и как её настроить

Микроразметка Open Graph: зачем она контент-маркетингу и как её настроить

29 ноября 2018 10 0 10 661
Open Graph — это протокол, который определяет внешний вид ссылки в соцсетях и мессенджерах. Благодаря ему к посту со ссылкой прикрепляются изображение и текстовый сниппет, которые привлекают внимание к публикации. 

Так выглядит пост со ссылкой на страницу, где Open Graph прописан:
Микроразметка Open Graph помогает продвигать бизнес через соцсети
В некоторых системах управления сайтом блок с этой микроразметкой встроен по умолчанию. Но есть те, кто его не заполняет, или не проверяет на ошибки в отображении перед публикацией. В итоге получается так: 
Если изображение не подходит под требования площадки, соцсеть растянет или обрежет их

Или вот так:
Ошибки в опен граф снижают заметность публикации в ленте
Изображением стала одна из иллюстраций в статье, которая ни о чем не говорит в отрыве от контекста

Иначе говоря, Open Graph помогает сайтам быть заметнее в социальных сетях. Для контент-маркетинга привлекательность поста особенно важна. А еще есть кнопки «Поделиться», которыми люди активно пользуются. Поэтому случайная картинка со страницы хуже, чем никакой. И за формированием этой OG-разметки стоит следить.
 
К выходу Обнулятора — бесплатного сервиса, который сбрасывает кэш ссылок в социальных сетях, мы разобрались, как прописать Open Graph, а затем найти и исправить ошибки. 

Общие теги Open Graph

Прописать теги можно двумя путями: 
  1. Вручную в коде. 
  2. Установить плагин, подходящей к CMS вашего сайта (если у вас не внедрено это по умолчанию), и заполнять теги в админке сайта. 
Для наглядности разберем первый вариант. В случае с плагинами все работает так же, но вы вносите только переменные, не прописывая мета-тег (он вставляется автоматически). 
Для начала нужно указать, что страница использует протокол Open Graph. В открывающем теге <html> прописываем: 

<html xmlns:fb="http://ogp.me/ns/fb#">

Остальные теги ставим между <head> и </head>.

Чтобы Open Graph в соцсетях отображался красиво, нужны минимум пять мета-тегов: 
  • og:title
  • og:description
  • og:url
  • og:image
  • og:type
Пример разметки Open Graph с мета-тегами
Они действуют для всех соцсетей, отдельное отображение нужно прописать только для Twitter, об этом чуть дальше. 

og:title

Название страницы. Если соцсети такой тег не видят, они используют основной title страницы. 

<meta property="og:title" content="Здесь напишите название страницы">

og:description 

Краткое описание страницы, выводится сразу под названием. 

Description выводится не всегда: например, в Facebook это зависит от длины title. По нашим наблюдениям, если title длиннее 50 символов, описание соцсеть выводить не будет. Но если будет, то на описание отводится примерно 60-65 символов. Если больше — в конце description будет стоять троеточие, предложение не будет закончено.

<meta property="og:description" content="Что на этой странице? Будьте краткими">

og:url

Адрес страницы. При клике на Open Graph пользователь будет переходить на страницу, указанную в этом теге. 

<meta property="og:url" content="Адрес страницы">

og:image

Изображение, которое отобразится в социальных сетях. Без него соцсети предложат выбрать любое изображение со страницы, которое подходит под их минимальные требования:
  • ВКонтакте — 160х160 пикселей, 
  • Facebook — не менее 600x315 пикселей. 
Если со страницы подойдет только одно изображение — оно подгрузится автоматически (сожмется, растянется или обрежется до нужных размеров). Если ни одного — вместо изображения будет серый квадрат или изображения не будет совсем.
Проблема в том, что у соцсетей разные требования к размеру изображений для Open Graph: 
  • ВКонтакте — не менее 510x228 пикселей (хотя в редакторе ВКонтакте предлагает загружать изображение размером 537x240 пикселей). В этом случае картинка в сниппете будет большой (как в нашем примере выше). Если изображение меньше или к посту прикреплены другие материалы, изображение отобразится в размере 150x83 пикселя.
  • Facebook — не менее 600x315 пикселей, но компания рекомендует использовать размер 1200x630 пикселей и больше (но меньше 5 мб). В Facebook также хорошо выглядят квадратные изображения — используйте их в размере 600x600 пикселей.
Вы можете указывать изображение в разном размере с помощью тегов vk:image, fb:image, twitter:image — мета-теги со своим названием соцсети обрабатывают в первую очередь. Но есть еще два полезных тега: og:image:width и og:image:height — в них указывается, в каком размере изображение должно отобразиться в социальных сетях. При этом, если указанные размеры не подходят под требования площадки, соцсеть обрежет его под себя. Например, так выглядит изображение с указанными размерами 1200х630 пикселей в ВК и FB:
Требования к размеру изображения в Open Graph у площадок разные
Видите, как обрезалось изображение в VK?

А так прописываются теги:
<meta property="og:image" content="Вставьте URL картинки">
<meta property="og:image:width" content="Нужная ширина изображения (число)">
<meta property="og:image:height" content="Нужная высота изображения (число)">

og:type

Тип страницы или ее содержимое: website, article, audio, video. Если вы делитесь аудио или видеозаписью, используйте дополнительные теги og:audio или og:video. В них указывайте URL файла. 

От тега type зависит много дополнительных параметров, подробнее о них читайте в разделе Facebook for Developers. Но если вы размещаете ссылку на статью или просто страницу — достаточно указать website или article.

<meta property="og:type" content="website">

Теги для Twitter

Чтобы Open Graph красиво отображался в Твиттере, для него нужно прописать отдельные мета-теги. 

Основные соответствуют og-тегам:
  • twitter:title (не больше 70 символов),
  • twitter:description (не больше 200 символов),
  • twitter:image (весом не больше 5 мб),
  • twitter:url (на какую страницу будет вести Open Graph),
  • twitter:cart (то же, что og:type, но для Твиттера).
В twitter:cart нужно указать тип карточки: 
  • summary — предпросмотр страницы,
  • summary_large_image — предспросмотр страницы с большим изображением,
  • app — для ссылок на мобильное приложение, в карточку подтягиваются данные о нем,
  • player — для видео, оно подгружается в Твиттер и его можно воспроизвести прямо в соцсети. 
В первых двух случаях достаточно прописать вышеперечисленные мета-теги. С app и player сложнее: примеры и инструкцию смотрите на сайте Twitter для разработчиков.

<meta name="twitter:card" content="Укажите тип карточки">

Заметьте, в теге twitter:card пишется meta name, а не meta property.

В других мета-тегах для этой площадки — meta property.

<meta property="twitter:title" content="Название страницы" />

И вот мы настроили микроразметку Open Graph.
Используйте валидатор микроразметки Open Graph, чтобы проверить ошибки в мета-тегах

Найти ошибки

Если вы прописали необходимые мета-теги, но опенграф все равно кривой, проверьте его на ошибки. В этом поможет Debugger от Facebook или сервис OpenGraphCheck. Просто вставьте ссылку и они покажут прописанные мета-теги и ошибки в разметке. 

Сбросить кэш ссылки

Соцсети кэшируют опенграф ссылки, как только вы загрузили ее на площадку. Иначе говоря, соцсеть обращается к вашему сайту за данными только один раз, а затем подгружает то, что запомнила. 

То есть если вы загрузили в соцсеть ссылку, увидели, например, битую картинку и обновили Open Graph на странице сайта, соцсеть все еще будет показывать некорректное изображение. Чтобы это исправить, нужно обновить кэш страницы. Для этого и нужны отладчики: 
Вы загружаете ссылку, кэш сбрасывается и можно снова отправлять пост в соцсети, с новым опенграфом.

Кстати, в Facebook случается и другая проблема: изображение слетает через пару дней после публикации и превращается в серый квадрат. В этом случае чистить кэш ссылки не нужно, с этим легко справиться в настройках публикации:
Битую картинку в Facebook иногда можно исправить силами самой площадки
Откройте настройки публикации (...) и выберите «Обновить публикацию вложения»

Готово! Картинка снова на месте.
Пользуйтесь дебаггерами и  Обнулятором Callibri, чтобы исправить ошибки в Open Graph
Но если вы все-таки загрузили в соцсети ссылку с ошибками в Open Graph, кэш надо сбросить.

Не тратьте время на несколько сайтов, очистите кэш ссылки в FB, VK и Telegram одновременно с помощью Обнулятора. Просто выберите нужные соцсети и нажмите «Обновить кэш».
Попробовать Обнулятор

Подписывайтесь на нас в социальных сетях, чтобы не пропустить статьи, вебинары и новости из мира интернет-маркетинга. Мы есть в Facebook, ВКонтакте, Instagram и Telegram (@callibri) ⭐

Поделиться:

Комментарии

Советуем прочитать:

70 лучших сервисов для интернет-магазина, чтобы решить любую задачу
60 13.04.2023
Яндекс.Метрика – что за зверь и как его приручить. Пошаговая инструкция по установке
15 14.08.2018
5 причин, по которым люди уходят с вашего сайта без покупки
15 07.11.2018