​Open Graph: что это и почему каждый должен настроить

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

Однако если для миллионов рядовых пользователей Сети по всему миру они (эти самые кнопочки) – обычный инструмент размещения в своём аккаунте Facebook, Twitter или ВКонтакте анонса понравившейся статьи, новости или фотоотчёта, то для владельцев сайтов, откуда эти материалы берутся, такие кнопки вкупе с очевидной пользой могут представлять определённую головную боль.

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

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

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

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

На практике протокол Open Graph представляет собой особый набор мета-тегов, которые интегрируются в html-код страницы (в границах тега <head>) и обеспечивают нужное отображение превью страницы сайта в социальной сети. Кстати, несмотря на то, что Open Graph разработал и внедрил Facebook, сегодня данный стандарт разметки страницы используется другими известными социальными платформами. Помимо упомянутых выше Вконтакте и Twitter, это также Google+, Яндекс.Видео, Pinterest, LinkedIn и др.

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

Для корректного отображения анонса материала в социальной сети html-код страницы сайта должен содержать следующие мета-теги Open Graph:

- – тег, отвечающий за название материала;

- og:description – тег, содержащий описание материала (причём в отличие от традиционного мета-тега description стандарт Open Graph позволяет увеличить размер описания со 160 до 295 знаков);

- og:image – ссылка на картинку, которая должна сопровождать материал;

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

- og:url – ссылка на саму веб-страницу, которая добавляется в социальную сеть.

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

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

<head>
…
<meta property="og:title" content="Приятный баг для новых пользователей Google AdSense"/>
<meta property="og:description" content="Описание новой ошибки в системе Google AdSense "/>
<meta property="og:image" content="http://pr-cy.ru/news/upload/49127/images/1051f4d0d4dee5fe79e56c59aa71c063.jpg ">
<meta property="og:type" content="article"/>
<meta property="og:url" content= "http:// pr-cy.ru/news/p/5396" />
…
<head>

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

Сервис проверки и плагины Open Graph

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

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

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

Подписка