Микроразметка ​Open Graph: что это и как настроить

Краткое саммари

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

В материале разобраны основные теги Open Graph — og:title, og:description, og:image, og:type, og:url, а также отдельно затронуты особенности работы с изображениями для разных соцсетей и использование Open Graph для видео. Статья дополняется практическим примером кода, рекомендациями по проверке разметки и подборкой инструментов: генераторов кода, генераторов изображений, валидаторов, парсеров и CMS-плагинов.

Кому будет полезно прочитать статью:

• SEO-специалистам — чтобы корректно оформлять страницы для репостов и улучшать кликабельность ссылок в соцсетях.
• Контент-маркетологам — чтобы статьи, кейсы и лендинги выглядели привлекательно при публикации в соцсетях и мессенджерах.
• SMM-специалистам — чтобы понимать, почему у ссылок появляются кривые превью и как это исправить.
• Владельцам сайтов — чтобы самостоятельно настроить Open Graph без глубоких технических знаний.
• Редакторам и контент-менеджерам — чтобы контролировать заголовки, описания и изображения, которые видит аудитория при шеринге.
• Веб-разработчикам — чтобы быстро внедрить базовые OG-теги в код страницы или CMS.
• Администраторам блогов и медиа — чтобы каждая публикация автоматически получала корректное превью при репосте.
• Интернет-маркетологам — чтобы использовать Open Graph как простой способ повысить заметность контента в каналах распространения.

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

О видах микроразметки и ее настройке для Яндекс и Google читайте в статье.

Протокол Open Graph и зачем он нужен

Open Graph — это стандарт микроразметки для формирования текстово-графического анонса, который отображается при добавлении ссылки на сайт в социальную сеть. С его помощью можно настроить изображение, которое должно появляться в превью, заголовок, описание и ссылку. Open Graph разработала компания Facebook*, но теперь он работает во многих популярных соцсетях и мессенджерах: ВКонтакте, Twitter, Pinterest, Одноклассниках, Telegram, Viber и других.

Если микроразметка не настроена, в превью может попасть что-то, чего там быть не должно — рекламный баннер, который был на странице, или какой-то фрагмент текста, не описывающий основной контент.

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

Что еще дает микроразметка:

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

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

• Сниппет будет выглядеть как самостоятельный пост, а не как ссылка, к которой нужны дополнительное описание и картинка.

• Оформленное превью улучшает поведенческие факторы и приносит больше кликов.

В дополнение к микроразметке для соцсетей есть смысл добавить так называемые социальные кнопки — «Поделиться», «Like» и другие. Обычно их делают в блогах, чтобы пользователям было удобно делиться статьями. Это избавляет от необходимости копировать и вставлять ссылки и ускоряет распространение контента.

FAQ по разделу

Что будет, если Open Graph не настроен?

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

Как Open Graph влияет на клики?

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

Нужны ли кнопки Поделиться, если Open Graph уже настроен?

Да, социальные кнопки упрощают распространение контента и делают репосты удобнее.

Ключевые мета-теги Open Graph

Протокол Open Graph состоит из og: мета-тегов, их интегрируют в html-код страницы в < head >.

Разберем основные теги:

• og:title — название материала;
• og:description — описание материала, заполнять не обязательно;
• og:image — ссылка на картинку, которая должна сопровождать материал;
• og:type — тип добавляемого материала, например, «article» – статья, «movie» — кино и так далее;
• og:url — ссылка на саму веб-страницу, которая добавляется в социальную сеть.

Вот пример кода:

<html>
<head>
  <title>Заголовок страницы</title>

  
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://mysite.com/page123">
  <meta property="og:title" content="Заголовок">
  <meta property="og:description" content="Описание">
  <meta property="og:image" content="https://mysite.com/image.jpg">
</head>
<body>
  
</body>
</html>

Есть и дополнительные теги для разметки музыки и видео, они перечислены на странице ogp.me. Но такого разнообразия, как в Schema.org, которую используют для формирования сниппетов в выдаче, нет. Если нужно передать информацию, например, о человеке, придется использовать те же теги: og:title, og:description и og:image. Пример:

<meta property="og:type" content="profile">
<meta property="og:title" content="Имя">
<meta property="og:description" content="Короткое описание или биография">
<meta property="og:image" content="URL профильного изображения">
<meta property="og:url" content="URL страницы профиля">

Open Graph в Twitter

Страница, размеченная тегами Open Graph, будет корректно отображаться в Twitter, но там есть собственный набор мета-тегов — Twitter Cards. Они очень похожи на теги Open Graph, но начинаются с twitter: вместо og:. Их можно использовать вместе с тегами Open Graph или отдельно. Если на странице есть оба типа тегов, Twitter отдаст предпочтение «своим». Если нет, прочитает Open Graph.

В обратную сторону это не работает — другие социальные сети Twitter Cards читать не умеют.

Пример микроразметки для Twitter:

<html>
<head>
  <title>Заголовок страницы</title>

  
  <meta property="twitter:card" content="summary_large_image">
  <meta property="twitter:url" content="https://mysite.com/page123">
  <meta property="twitter:title" content="Заголовок">
  <meta property="twitter:description" content="Описание">
  <meta property="twitter:image" content="https://mysite.com/image.jpg">
</head>
<body>
  
</body>
</html>

Разбираемся с размерами изображений

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

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

vk:image
fb:image
twitter:image

При репосте во ВКонтакте будет учтен только тег vk:image, остальные будут проигнорированы. Аналогично поступят и другие социальные сети.

Есть и другой подход — установить единый размер для всех соцсетей. Для этого используются теги og:image:width и og:image:height.

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

Open Graph для видео

Видеохостинги и другие площадки, публикующие видео, могут использовать Open Graph для лучшего ранжирования в Яндекс.Видео.

Специальные метатеги Open Graph позволяют передать Яндексу подробную информацию о видео:

• og:title — название видео (до 1000 символов);
• og:url — адрес страницы с видео;
• og:video — путь к плееру или файлу;
• og:image — ссылка на превью;
• og:description — описание ролика (от 150 до 1000 символов);
• ya:ovs:upload_date — дата и время загрузки;
• ya:ovs:adult — указывает, является ли контент "для взрослых" (true/false);
• video:duration — длительность видео в секундах;
• og:type — категория видео;
• og:video:type — доступные кодеки.

FAQ по разделу

Где размещаются теги Open Graph?

Их добавляют в HTML-код страницы внутри блока head.

Чем Twitter Cards отличаются от Open Graph?

Twitter Cards — это собственный набор мета-тегов Twitter, похожий на Open Graph. Если на странице есть оба варианта, Twitter использует свои теги.

Нужно ли делать разные изображения для разных соцсетей?

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

Что делать, если нужно использовать одно изображение для всех соцсетей?

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

Пример микроразметки страницы с помощью Open Graph

Пример практического использования протокола Open Graph — фрагмент html-кода, в котором использованы необходимые теги данной разметки. Подопытная страница — статья про расширенный сниппет в блоге PR-CY. Вот часть кода с разметкой:

<link rel="canonical" href="https://pr-cy.ru/news/p/10116-rasshirennyy-snippet-v-google--chto-eto-i-kak-sdelat" />
  <meta property="og:title" content="Расширенный сниппет в Google — что это и как сделать">
  <meta property="og:image" content="https://cover.pr-cy.io/api/og?title=Расширенный сниппет в Google — что это и как сделать&bgImage=https://cdn.pr-cy.ru/news/284604/10116.png&category=Знания">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://pr-cy.ru/news/p/10116-rasshirennyy-snippet-v-google--chto-eto-i-kak-sdelat">
      <meta property="og:description" content="Все самое важное о расширенных сниппетах. Исследования и советы, которые помогут привлечь больше пользователей из выдачи Google. " />
    <meta name="description" content="Все самое важное о расширенных сниппетах. Исследования и советы, которые помогут привлечь больше пользователей из выдачи Google. " />

Разберем подробнее:

1. < meta property="og:title" content="Расширенный сниппет в Google — что это и как сделать" > — название страницы, которое будет отображаться в превью при публикации в соцсетях;
2. < meta property="og:image" content=... > — ссылка на изображение;
3. < meta property="og:type" content="article" > — тип контента. В этом примере — статья;
4. < meta property="og:url" content=""=""> — URL страницы;
5. < meta property="og:description" content="Все самое важное о расширенных сниппетах. Исследования и советы, которые помогут привлечь больше пользователей из выдачи Google. " > — описание контента страницы.

Отдельно можно настроить отображение для Twitter. Тогда в код нужно добавить теги:

1. < meta property="twitter:card" content="summary_large_image" / > — тип Тwitter Card, в этом случае — 'summary_large_image'. Это значит, что в превью ссылки будет большая картинка, а под ней — заголовок и описание.
2. < meta="" property="twitter:url" content="..."> — URL страницы.
3. < meta property="twitter:title" content="..." > — заголовок.
4. < meta property="twitter:description" content="..." > — описание контента.
5. < meta property="twitter:image" content="..." > — ссылка на изображение.
6. < meta property="twitter:image:width" content="800" / > и — размер изображения. Эти теги опициональные, но позволяют Twitter быстро определить размеры изображения.
7. < meta property="twitter:site" content="prcyru" / > — учетная запись владельца сайта в Twitter.

Проверка разметки Open Graph

Работа с HTML-кодом требует точного соответствия требованиям микроразметки. Любая ошибка может привести к некорректному отображению превью. Поэтому всегда проверяйте код с помощью специальных сервисов, например, валидатора Яндекса.

Валидатор работает как с кодом, введенным вручную, так и с существующими страницами. Просто укажите URL, и Яндекс сам получит HTML-код.

Сервисы для работы и плагины Open Graph

Для работы с Open Graph есть много сервисов — для автоматического создания кода для конкретной страницы, плагины в CMS и сервисы для проверки правильности заполнения.

1. Составить код разметки Open Graph автоматически

Автоматически сделать код можно через Генератор мета-тегов Open Graph. Заполните поля ссылками и нужным текстом и скопируйте готовый код для вставки на сайт.

Можно добавить дополнительную информацию — название сайта, язык страницы, видео с YouTube, Facebook* ID. И добавить метаданные статьи — автора, время публикации, категорию, теги.

Если нужна микроразметка для Твиттера, можно добавить теги и для него.

В результате вы получите код, который нужно добавить на страницу.

2. Генератор изображений Open Graph

Это еще один бесплатный инструмент PR-CY, который позволяет генерировать изображения с заголовком, описанием и лого прямо на них.

Чтобы сгенерировать картинку, нужно добавить ссылки на фоновое изображение и лого, написать заголовок и описание.

Инструмент сразу покажет, что получилось, и сформирует код для добавления на страницу.

Можно автоматизировать процесс. Инструмент работает через API pr-cy.io. То есть каждая сгенерированная ссылка на изображение — это запрос к API.

Чтобы сделать новое изображение, нужно добавить к базовому URL параметры, которые определяют, как оно будет выглядеть. Каждый параметр нужно записать в URL после знака вопроса и разделить амперсандом (&).

Так будет выглядеть URL с заголовком (title), категорией (category) и цветом текста (color):

https://cover.pr-cy.io/api/og?title=Заголовок&category=Категория&color=000000

Этот URL можно добавить на страницу с помощью любого плагина, который позволяет вставлять произвольные мета-теги.

3. Проверка наличия Open Graph

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

Вам может быть интересно:
Как внедрить микроразметку информации Schema.Org на сайт, и что это дает?

4. Парсер для поиска микроразметки

Посмотреть, как конкуренты составили микроразметку, можно с помощью парсера мета-тегов Open Graph. Он проанализирует страницу на наличие Open Graph тегов:

Для популярных CMS есть плагины — это сильно упрощает работу, потому что владельцу сайта нужно только добавить нужную информацию о страницах:

• «Open Graph» или «Yoast SEO» для Wordpress;

• «Phoca Open Graph» для Joomla;

• «Open Graph Meta» для Opencart.

FAQ по разделу

Как выглядит автоматическая генерация OG-изображения через URL?

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

Когда лучше использовать плагин, а когда ручную настройку?

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

*Компания Meta, которой принадлежит Instagram и Facebook, признана в России экстремистской организацией.