Все посты
Обновлено 9999+ 3 Знания

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

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

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

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

Протокол Open Graph от Facebook*

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

Зачем нужен Open Graph

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

отображение превью в соцсетях пример
Неправильное отображение сниппета

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

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

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

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

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

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

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

Ключевые мета-теги 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>
репост с разметкой Open Graph
Пример рецепта с разметкой Open Graph

Есть и дополнительные теги для разметки музыки и видео, они перечислены на странице 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

Пример практического использования протокола 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://s3-eu-central-1.amazonaws.com/news.pr-cy.ru/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="https://pr-cy.ru/news/p/10116-rasshirennyy-snippet-v-google--chto-eto-i-kak-sdelat"> — 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

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

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

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

Генератор разметки Open Graph для сайта
Пример работы сервиса

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

Создание микроразметки
Редактор в сервисе

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

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

Создание микроразметки для превью в социальных сетях
Готовый код

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

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

Создание микроразметки для соцсетей
Картинка в превью ссылки

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

Создание микроразметки

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

Создание превью для URL
Результат работы сервиса

Можно автоматизировать процесс. Инструмент работает через 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

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

проверка микроразметки на странице статьи
Фрагмент работы инструмента

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

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

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

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

проверка микроразметки на странице
Пример работы парсера

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

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

Возьмите под контроль продвижение своего сайта
Исправьте ошибки, которые мешают сайту выйти в топ, и вы увидите рост трафика и дохода.
🔍 Подпишись на @prcynews в телеграм — оставайся в курсе последних SEO новостей и свежих материалов.

Теги поста или какие разделы почитать еще:

Комментарии (3)
hackoff   28.02.2016 19:28
Что-то верстальщик PR-CY совсем положил :) страница данной новости разъехалась!
А материальчик действительно полезный! спасибо будем внедрять и эту разметку
Taras_Cherkassky   02.03.2016 00:11
Спасибо за оценку - стараемся.))
Facebook и ВК далеко не всегда адекватно воспринимат этот OpenGraph.
Основная проблема - картинки.
К данной записи нельзя добавлять комментарии, т.к. она очень старая.
🔥 Внутренняя оптимизация сайта — большой гайд по самостоятельной проверке
Как анализировать топ выдачи, чтобы пробиться в лидеры
Что такое Google Discover и как туда попасть