Поисковики

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

14.05.2019

0 9

Кнопки «Поделиться в соцсетях» на сайте

Проблема с добавлением ссылки в социальную сеть

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

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

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

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

Социальные кнопки вроде «Поделиться», «Лайкнуть», «Share», «Like» полезны, они есть почти на всех сайтах. Пользователям удобно отправлять крутые материалы себе в социальные сети, не копируя и вставляя ссылку, а веб-мастеры получают дополнительное распространение контента и увеличение трафика.

Кнопки «Поделиться в соцсетях»

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

Поделиться пином с рецептом

Подробнее о том, как настроить кнопку «Pint it» и зачем вам Pinterest, в статье
«Как бизнес-аккаунт в Pinterest влияет на ранжирование сайта»

Веб-мастеру недостаточно просто установить кнопку «Поделиться в соцсети» для того, чтобы пользователь делился контентом с красивым превью. Картинка или заголовок можгут отображаться не так, как задумано.

Проблема с добавлением ссылки в социальную сеть

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

Неправильное отображение сниппета

Проблема устраняется довольно просто — с помощью дополнительного стандарта микроразметки страницы Open Graph.

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

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

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

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

Разметку Open Graph поддерживают соцсети и мессенджеры ВКонтакте, Facebook, Twitter, Pinterest, Одноклассники, Telegram, Skype и другие.

Разберемся, как настроить микроразметку для страницы.

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

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

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

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

Пример рецепта с разметкой Open Graph

Есть и дополнительные теги для контактов, адреса, языка и других элементов, они перечислены на страницеogp.me. Иногда их использование тоже может быть оправдано: к примеру, если добавляемая страница содержит информацию о конкретном человеке, то можно дополнительно указать характеристики с помощью специального тега.

Настройка через json-ld:

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

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

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

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

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

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

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

Пример работы сервиса

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

Пример работы парсера

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

«Open Graph» или «Yoast SEO» для WordPress;
«Phoca Open Graph» для Joomla;
«Open Graph Meta» для Opencart.

Сервис проверки Open Graph

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

Фрагмент работы инструмента

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