Open Graph: стандарт разметки для социальных сетей

Что такое Open Graph Protocol
Для чего нужна разметка Open Graph
Как внедрить разметку Open Graph
Как проверить сделанную разметку
Так в чем же плюсы?

Что такое Open Graph Protocol

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

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

Facebook;
Vkontakte (кроме разметки изображений);
Twitter;
Pinterest;
Viber;
Telegram;
WhatsApp;
Яндекс.Видео.

Вот как выглядит репост в Facebook страницы, на которой использовалась разметка:

В Telegram эта же ссылка будет выглядеть так:

А вот примеры постов без разметки:

В мессенджере выглядит тоже не очень привлекательно:

Для чего нужна разметка Open Graph

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

Так же Open Graph поддерживается Google AdSense при создании блоков рекомендуемого контента.

Если разметка не сделана, то не страшная проблема. Любой сервис создаст ее самостоятельно, используя мета-теги страницы. Для превью будет использована первая картинка на странице (чаще всего это логотип), для заголовка содержимое тега Title, а для описания тег Description.

Как видите, не всегда автоматически получается создать красивый репост, поэтому советуем внедрить разметку Open Graph для всех страниц своего сайта, а в первую очередь для тех, которыми часто делятся в социальных сетях и мессенджерах.

Если разметка сделана, то для заголовка, текста анонса и картинки превью будут использоваться указанные вами значения. Как именно их указать, поговорим ниже.

Как внедрить разметку Open Graph

Для разметки страницы по стандарту Open Graph понадобится добавить несколько специальных тегов в секцию <head></head> каждой страницы. Они и будут использоваться при создании превью поста.

Таким образом каждая страница будет представлять собой объект с определенными свойствами.

Обязательные свойства

Тег	Назначение
og:type	Тип объекта. Самые часто используемые для обычных сайтов это website (сайт) и article (статья). Все возможные типы объектов в документации.
og:url	Канонический URL-адрес объекта, который будет использоваться в качестве его постоянного ID.
og:title	Название объекта в том виде, в котором оно будет отображаться.
og:image	URL-адрес изображения, которое будет описывать ваш объект.

Что касается тега изображения, то тут есть нюанс.

У разных соцсетей разные форматы превью и, соответственно, разные размеры картинок. В идеале желательно подготовить собственный ресайз картинки под каждую социальную сеть, где вы будете размещать пост.

Например, у вашей компании 3 социальных сети: Вконтакте, Facebook и Twitter. Чтобы при размещении ссылки на новую статью в каждой из них картинка «не пострадала», в разметке Open Graph надо указать отдельные теги для каждого сайта. В нашем случае это vk:image, fb:image, twitter:image.

Каждая соцсеть будет использовать свой тег, а ненужные проигнорирует.

Если же вы зададите размеры картинки с помощью тегов og:image:width и og:image:height, подобранные под размеры для какой-то одной сети, то в других картинка будет жестко обрезаться под их параметры. Это надо учесть, если на картинке присутствуют текст, цифры или логотипы, и не размещать их с краю изображения.

Размеры картинок в популярных сетях:

Facebook. Размер картинки поста — 1200х628 пикселей (В ленте прямоугольная картинка будет уменьшена до 500 рх по ширине с сохранением пропорций).
VK. Минимальный размер — 510х228 пикселей.
Twitter. Размер для поста допустим любой, но вес не более 5 Мб.
Одноклассники. Максимальный размер изображения для поста 1680х1680 рх, если загрузить картинку больше по какой-либо из сторон, то будет потеря качества. В ленте картинки уменьшаются до 548х411 рх.

Дополнительные свойства

Тег	Назначение
* og:description	Краткое описание объекта (1-2 коротких предложения).
* og:site_name	Название сайта (не URL).
og:video	URL видео файла, который относится к описываемому объекту.
og:audio	URL звукового файла, который относится к описываемому объекту.
og:locale	Язык и локация объекта, имеет формат язык_СТРАНА. По умолчанию en_US.
og:locale:alternate	Массив дополнительных локалей, которые доступны для описания данного объекта.
og:determiner	Слово (артикль), которое должно быть перед названием объекта в предложении. Может быть указано как: a, an, the, "", auto. Если в значении будет указано auto, сервис, распознающий разметку, будет выбирать между значениями a и an. Если значение не указано, перед названием объекта артикль будет отсутствовать.

Чаще всего используется не все дополнительные свойства, а только те, что отмечены звездочкой. Другие же могут быть задействованы при наличии подходящего объекта.

Рассмотрим пример разметки с сайта Кинопоиск:

<meta property="og:site_name" content="КиноПоиск"/>
<meta property="og:title" content="«Приключения Базза Лайтера из звездной команды» 
(Buzz Lightyear of Star Command, 2000-2001)"/>
<meta property="og:description" content="Базз Лайтер, всеми знаменитый космический герой
в скафандре из известной «Истории Игрушек 1-2», вместе со своими друзьями 
защищает нашу вселенную от злого император Зурга и его приспешника Варпа."/>
<meta property="og:url" content="https://www.kinopoisk.ru/series/327128/"/>
<meta property="og:image" content="https://avatars.mds.yandex.net/get-kinopoisk-image/4774061/c0c94799-c796-4b65-ae68-9cf3f8e0998b/1200x630"/>
<meta property="vk:image" content="https://avatars.mds.yandex.net/get-kinopoisk-image/4774061/c0c94799-c796-4b65-ae68-9cf3f8e0998b/1200x630"/>
<meta name="twitter:image" content="https://avatars.mds.yandex.net/get-kinopoisk-image/4774061/c0c94799-c796-4b65-ae68-9cf3f8e0998b/1200x630"/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>
<meta property="og:type" content="website"/>

Для изображения здесь использовано 3 тега: тег og:image, vk:image и twitter:image, хотя все они указывают на одну и ту же картинку, подогнанную под стандарты Facebook.

Выглядеть в Telegram разметка будет так:

Документация

Полный список свойств и их значение можно посмотреть в официальной документации по разметке, а также в справочных руководствах других сервисов.

ogp.me — англоязычная документация;
ruogp.me — перевод документации⬆️ на русский язык;
Яндекс справка — введение в разметку Open Graph;
Facebook — инструкция по разметке для социальной сети Facebook.

Как проверить сделанную разметку

После того, как вы указали, где брать значения для тегов разметки Open Graph и программисты ее внедрили, надо проверить, все ли получилось корректно. Для этого есть несколько спобов.

1. Вручную. Выберите несколько страниц сайта на разных шаблонах и вручную запостите их в популярных социальных сетях, поделитесь в мессенджерах. Для проверки в Telegram можно использовать специальный бот для просмотра превью страниц.

2. Специальный сервис. Например, Open Graph Check. Введите урл страницы в поле формы и получите полный анализ.

3. Отладчик репостов от Facebook. Специальный инструмент, предназначенный для отладки визуала репостов перед запуском рекламной кампании. Понадобится авторизация в аккаунте этой социальной сети.

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

Отладчик выдаст найденные теги, а если после этого вы внесете изменения в разметку, то нажмите кнопку Повторить скраппинг.

Не обращайте внимания на предупреждение. Тег fb:app_id нужен, чтобы просматривать информацию статистику Facebook о переходах на ваш сайт.

4. Валидатор Яндекса. Инструмент проверки разметки в Вебмастере подходит для многих типов данных, в том числе Open Graph. Потребуется авторизация в аккаунте Яндекс.

После запуска проверки вы получите сообщение об анализе присутствующих на странице тегов.

Так в чем же плюсы?

Многие популярные CMS имеют встроенные плагины для создания Open Graph. Так что проверьте свой сайт, возможно, разметка уже есть😉

Если же ее нет или вы видите, что свойства заполняются некорректно, то обязательно настройте у себя Open Graph, ведь разметка имеет несколько важных преимуществ:

1. Возможность заранее подготовить красивую картинку для репоста нужного формата: у разных социальных сетей размеры превью отличаются. С разметкой ваши записи всегда будут выглядеть привлекательно и заметно.

2. Уже в анонсе пользователь увидит всю нужную информацию по теме, которую вы вынесете в тег описание.

3. Репост выглядит аккуратно и завершенно, что привлекает внимание.

Нужно эффективное SEO?

Обращайтесь, сделаем, как для себя