Open Graph — это специальная микроразметка, созданная в 2010 году для удобной интеграции сайтов с социальной сетью Facebook. Сейчас этот формат используется в Twitter, Google+, Вконтакте, Одноклассниках, Pinterest и других площадках. С помощью протокола Open Graph можно управлять тем, как контент отображается в социальных сетях: задавать название, описание, изображение, тип материала и другие параметры.
Что происходит, если на сайте используется протокол Open Graph:
- в превью ссылок пользователи видят релевантные изображения или видео;
- публикации можно сопровождать подходящими описаниями, слоганами и текстовыми пояснениями;
- посты выглядят как полноценные самостоятельные объекты, а не как обычные текстовые ссылки.
Проще говоря, микроразметка Open Graph делает ссылку в социальных сетях более заметной и привлекательной. Пользователи охотнее переходят по таким ссылкам, потому что сразу видят, какой контент их ожидает на странице сайта.
Особенности настройки микроразметки OpenGraph
Чтобы Open Graph работал корректно, в блоках кода <html> и <head> необходимо прописать дополнительные мета-теги. Именно они передают социальным сетям информацию о странице и определяют, как будет выглядеть её превью.
Основные теги Open Graph:
- og:title — название страницы. В Facebook действует ограничение по длине около 95 символов;
- og:type — тип контента, размещённого на сайте: статья, фильм, песня, профиль человека и т.д.;
- og:image — адрес изображения, которое будет использоваться для превью. В Facebook есть ограничения по минимальному размеру 50х50 пикселей и максимальному весу 5 МБ;
- og:url — электронный адрес страницы.
Кроме четырёх обязательных мета-тегов, разметка OpenGraph может использовать дополнительные параметры:
- og:site_name — название сайта, на котором размещена страница;
- og:description — краткое описание страницы. В Facebook есть ограничение по длине до 297 символов;
- og:locale — язык сайта и его региональная принадлежность;
- og:locale:alternate — список дополнительных языков, на которых может отображаться страница. Для мультиязычных ресурсов можно указывать несколько второстепенных языков.
При настройке сайта на базе готового сайта на 1С-Битрикс микроразметку Open Graph лучше проверять сразу после наполнения основных страниц, чтобы ссылки корректно выглядели при публикации в социальных сетях.
Пример использования Open Graph Schema
Рассмотрим пример использования протокола OpenGraph Schema. Сначала в исходный код страницы необходимо добавить следующий фрагмент:
1 <head>
2 указываем название видеоролика
3 <meta property="og:title" content="Для чего нужна разметка OpenGraph?" />
4 вставляем полный URL-адрес видеоролика
5 <meta property="og:url" content="http://my-video-site.org/view/404/" />
6 указываем полный путь к видеоплееру либо файлу
7 <meta property="og:video" content="http://my-video-site.org/video/?clid=1234567&filmId=987654321" />
8 <meta property="og:description" content="Подробное описание микроразметки OpenGraph Product” />
Далее нужно подробнее описать видеоролик для поискового робота и социальных платформ:
1 пишем длительность видеоролика в секундах, при этом округлять нужно до бо́льшего целого числа
2 <meta property="video:duration" content="193" />
3 указываем полный URL-адрес заставки видеоролика
4 <meta property="og:image" content="https://pp.vk.me/c157634/v657321559/3e5b/iFP7JOsCnjL.jpg" />
5 указываем дату загрузки видеофайла (формат ISO 8601)
6 <meta property="ya:ovs:upload_date" content="2020-07-31" />
7 указываем возрастное ограничение check 18+
8 <meta property="ya:ovs:adult" content="false"/>
9 указываем тип видеофрагмента
10 <meta property="og:type" content="video.other"/>
11 в этой части кода следует указать, какие кодеки доступны для конкретного формата видео
12 <meta property >
Это не полный список доступных мета-тегов. Более подробную информацию можно найти на официальном сайте OpenGraph.
Как проверить разметку Open Graph
После настройки микроразметки нужно убедиться, что она работает корректно, а ссылка на страницу выглядит именно так, как планировалось. Для проверки можно использовать специальные инструменты, созданные разработчиками Facebook. Они позволяют заранее увидеть, как будет отображаться превью страницы сайта.
Когда вы увидите внешний вид публикации, станет понятно, правильно ли выполнены настройки и какие элементы нужно скорректировать.
Также есть инструмент от Яндекса, который анализирует микроразметку онлайн и помогает находить ошибки в настройках.
Правила быстрого внедрения OpenGraph на разных движках CMS
Для быстрой настройки OpenGraph на популярных CMS можно использовать готовые решения: модули, плагины и расширения. В WordPress разметка OpenGraph подключается через соответствующий плагин. Похожий функционал есть у модуля Yoast SEO. При необходимости протокол можно добавить и без плагина — напрямую через HTML-код.
Для Joomla существуют плагины вроде OpenGraph ProtocolSolution. Если нужно внедрить разметку без плагина, мета-теги добавляют в блок <head> через генератор кода JDocument. Типы и значения тегов выбирают в зависимости от содержания страницы и данных, которые нужно передать в разметку.
В Opencart подключение выполняется через плагин OpenGraph Meta. При ручной настройке мета-теги добавляются в блок <head> сайта.
Установка микроразметки в Bitrix имеет свои особенности. Если на сайте Битрикс используется компонент с новостями или каталог, а нужно добавить микроразметку на детальные страницы, в шаблон news.detail или catalog.element добавляют код result_modifier.php:
<?php
$this->__component->SetResultCacheKeys(array(
"NAME",
"PREVIEW_TEXT",
"PREVIEW_PICTURE"
));?>
?>
OpenGraph — полезный протокол, который позволяет формировать привлекательный анонс статьи, аудио, видео или другого объекта при публикации в социальных сетях. Вы сами задаёте параметры сниппета, который будут видеть пользователи в ленте.
Чтобы настроить протокол, нужно добавить основные и дополнительные мета-теги в HTML-код страниц. А проверка через специализированные сервисы и плагины помогает убедиться, что превью отображается корректно. Грамотная техническая настройка сайта помогает избежать ошибок в отображении ссылок и улучшает представление контента на внешних площадках.
