SEO

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

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

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

Протокол 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 – ссылка на саму веб-страницу, которая добавляется в социальную сеть.

<meta property=»og:title» content=»Заголовок»>
<meta property=»og:image» content=»<img class=» redactor-autoparser-object»=»» src=»https://site.ru…png»>»>
<meta property=»og:type» content=»article»>
<meta property=»og:url» content=»https://site.ru»>
<meta property=»og:description» content=»Описание «>

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

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

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

<script type=»application/ld+json»>
{
«@context» : «http://schema.org»,
«@type» : «Organization»,
«name» : «Имя организации»»,
«url» : «ссылка на сайт»,
«sameAs» : [
«https://vk.com/адрес»,
«https://www.pinterest.com/адрес»,
«https://www.facebook.com/адрес»,
«https://twitter.com/адрес»
]
}
</script>

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

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

<meta property=»og:title» content=»Как настроить редирект самостоятельно»>
<meta property=»og:image» content=»<img class=» redactor-autoparser-object»=»» src=»https://pr-cy.ru/news/upload/535312/7463.png»>»>
<meta property=»og:type» content=»article»>
<meta property=»og:url» content=»https://pr-cy.ru/news/p/7463-kak-nastroit-redirekt-samostoyatelno»>
<meta property=»og:description» content=»Самостоятельная быстрая настройка редиректа для Nginx и Apache, а также с помощью PHP, HTML, JavaScript и cPanel. Разбираем на примере переадресации с www-домена на домен без www и наоборот. «>

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

<meta property=»twitter:card» content=»summary_large_image»>
<meta property=»twitter:url» content=»https://pr-cy.ru/news/p/7463-kak-nastroit-redirekt-samostoyatelno»>
<meta property=»twitter:title» content=»Как настроить редирект самостоятельно»>
<meta property=»twitter:description» content=»Самостоятельная быстрая настройка редиректа для Nginx и Apache, а также с помощью PHP, HTML, JavaScript и cPanel. Разбираем на примере переадресации с www-домена на домен без www и наоборот. «>
<meta property=»twitter:image» content=»<img class=» redactor-autoparser-object»=»» src=»https://pr-cy.ru/news/upload/535312/7463.png»>»>
<meta property=»twitter:image:width» content=»800″>
<meta property=»twitter:image:height» content=»400″>
<meta property=»twitter:site» content=»prcyru»>

Сервисы для работы и плагины 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. С его помощью веб-мастер узнает, как социальная сеть будет отображать анонс внешней страницы, и сможет отредактировать мета-тег для лучшего отображения превью в социальных медиа.

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

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

Фрагмент анализа инструментом

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *