Микроразметка 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

Они действуют для всех соцсетей, отдельное отображение нужно прописать только для 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:

Видите, как обрезалось изображение в 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.

Найти ошибки

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

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

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

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

• Facebook
• ВКонтакте
• Telegram
• Twitter

Вы загружаете ссылку, кэш сбрасывается и можно снова отправлять пост в соцсети, с новым опенграфом.

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

Откройте настройки публикации (...) и выберите «Обновить публикацию вложения»

Готово! Картинка снова на месте.

Но если вы все-таки загрузили в соцсети ссылку с ошибками в Open Graph, кэш надо сбросить.

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

Попробовать Обнулятор

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