Разметка Open Graph

OpenGraph и Schema.org отличаются основным предназначением и способом использования: OpenGraph разработан Facebook^* для описания контента в социальных сетях через мета-теги, помогая контролировать превью ссылок при их публикации. Schema.org, созданный Google, Microsoft, Yahoo и Yandex, предоставляет более широкий набор семантических данных для улучшения понимания контента поисковыми системами через структурированные данные в HTML или JSON-LD.

Ключевые различия:

Цель использования: OpenGraph ориентирован на социальные платформы, а Schema.org — на поисковые системы.
Формат данных: OpenGraph использует только мета-теги в `<head>`, тогда как Schema.org поддерживает различные форматы, включая JSON-LD, микроразметку и RDFa.

В данной статье мы расскажем про разметку OpenGraph.

Введение

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

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

Базовые метаданные

Чтобы ваши веб-страницы стали объектами графа, вам нужно добавить базовые метаданные на вашу страницу. Мы основываем начальную версию протокола на RDFa, что означает, что вам понадобятся дополнительные <meta> теги в <head> вашей веб-страницы. Четыре обязательных свойства для каждой страницы следующие:

og:title - Заголовок вашего объекта, как он должен отображаться в графе, например, "Скала".
og:type - Тип вашего объекта, например, "video.movie". В зависимости от указанного типа могут потребоваться и другие свойства.
og:image - URL изображения, которое должно представлять ваш объект внутри графа.
og:url - Канонический URL вашего объекта, который будет использоваться как его уникальный идентификатор в графе. Например, https://www.imdb.com/title/tt0117500/.

Вот пример разметки Open Graph для "Скала" на IMDB:


<html prefix="og: https://ogp.me/ns#">
<head>
<title>Скала (1996)</title>
<meta property="og:title" content="Скала" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>

Дополнительные метаданные

Следующие свойства являются необязательными для любого объекта, но их обычно рекомендуется добавлять:

og:audio - URL к аудиофайлу, который сопутствует этому объекту.
og:description - Краткое описание вашего объекта (1-2 предложения).
og:determiner - Слово, которое появляется перед заголовком объекта в предложении. Это может быть (a, an, the, "", auto). Если выбрано авто, то пользователь должен выбрать между "a" или "an". По умолчанию - пусто.
og:locale - Локализация, в которой эти теги отмечены. Формат: язык_ТЕРРИТОРИЯ. По умолчанию - en_US.
og:locale:alternate - Массив других локалей, на которых доступна эта страница.
og:site_name - Если ваш объект является частью более крупного веб-сайта, укажите название сайта, например, "IMDb".
og:video - URL видеофайла, который дополняет этот объект.

Пример метаданных:


<meta property="og:audio" content="https://example.com/bond/theme.mp3" />
<meta property="og:description"
content="Шон Коннери стал известен как
изящный и утончённый британский агент Джеймс Бонд." />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="IMDb" />
<meta property="og:video" content="https://example.com/bond/trailer.swf" />

Структурированные свойства

Некоторые свойства могут иметь дополнительные метаданные. Эти свойства указываются так же, как и другие метаданные, но с использованием дополнительного двоеточия (:).

Например, у свойства og:image есть несколько дополнительных структурированных свойств:

og:image:url - То же самое, что и og:image.
og:image:secure_url - Альтернативный URL для использования, если веб-страница требует HTTPS.
og:image:type - MIME-тип этого изображения.
og:image:width - Ширина изображения в пикселях.
og:image:height - Высота изображения в пикселях.
og:image:alt - Описание того, что изображено на картинке (не подпись). Если страница указывает на og:image, она должна указать и og:image:alt.

Пример полного изображения:


<meta property="og:image" content="https://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
<meta property="og:image:alt" content="Яркое красное яблоко с укусом" />

Массивы

Если тег может иметь несколько значений, просто добавьте несколько версий одного и того же тега <meta> на вашу страницу. Первый тег (сверху вниз) имеет приоритет в случае конфликтов.


<meta property="og:image" content="https://example.com/rock.jpg" />
<meta property="og:image" content="https://example.com/rock2.jpg" />

Поместите структурированные свойства после объявления их корневого тега. Как только парсится другой корневой элемент, это структурированное свойство считается завершенным, и начинается другое.

Например:


<meta property="og:image" content="https://example.com/rock.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:image" content="https://example.com/rock2.jpg" />
<meta property="og:image" content="https://example.com/rock3.jpg" />
<meta property="og:image:height" content="1000" />

означает, что на этой странице есть 3 изображения: первое изображение имеет размеры 300x300, у среднего размеры не указаны, а последнее имеет высоту 1000 пикселей.

Типы Объектов

Чтобы ваш объект был представлен в графе, необходимо указать его тип. Это делается с помощью свойства og:type:

<meta property="og:type" content="website" />

Когда сообщество соглашается на схему для типа, она добавляется в список глобальных типов. Все остальные объекты в системе типов являются CURIEs вида:

<head prefix="my_namespace: https://example.com/ns#">
<meta property="og:type" content="my_namespace:my_type" />

Глобальные типы группируются по вертикалям. У каждой вертикали есть собственное пространство имен. Значения og:type для пространства имен всегда начинаются с имени пространства имен и затем точки. Это сделано для уменьшения путаницы с определяемыми пользователем типами пространств имен, которые всегда содержат двоеточия.

Музыка

URI пространства имен: https://ogp.me/ns/music#

Значения og:type:

music.song

music:duration - целое число >=1 - Длительность песни в секундах.
music:album - music.album массив - Альбом, из которого эта песня.
music:album:disc - целое число >=1 - На каком диске альбома находится эта песня.
music:album:track - целое число >=1 - Каким треком является эта песня.
music:musician - профиль массив - Музыкант, создавший эту песню.

music.album

music:song - music.song - Песня из этого альбома.
music:song:disc - целое число >=1 - То же самое, что и music:album:disc, но в обратном порядке.
music:song:track - целое число >=1 - То же самое, что и music:album:track, но в обратном порядке.
music:musician - профиль - Музыкант, создавший эту песню.
music:release_date - дата и время - Дата выхода альбома.

music.playlist

music:song - Идентично тем, что указаны в music.album
music:song:disc
music:song:track
music:creator - профиль - Создатель этого плейлиста.

music.radio_station

music:creator - профиль - Создатель этой радиостанции.

Видео

URI пространства имен: https://ogp.me/ns/video#

Значения og:type:

video.movie

video:actor - профиль массив - Актеры в фильме.
video:actor:role - строка - Роль, которую они играли.
video:director - профиль массив - Режиссеры фильма.
video:writer - профиль массив - Сценаристы фильма.
video:duration - целое число >=1 - Длина фильма в секундах.
video:release_date - дата и время - Дата выхода фильма.
video:tag - строка массив - Ключевые слова, связанные с этим фильмом.

video.episode

video:actor - Идентично video.movie
video:actor:role
video:director
video:writer
video:duration
video:release_date
video:tag
video:series - video.tv_show - К какому сериалу принадлежит этот эпизод.

video.tv_show

Многосерийный телевизионный шоу. Метаданные идентичны video.movie.

video.other

Видео, которое не относится ни к одной другой категории. Метаданные идентичны video.movie.

Нет Вертикали

Это глобально определенные объекты, которые просто не подходят ни под одну вертикаль, но при этом широко используются и согласованы.

Значения og:type:

article - URI пространства имен: https://ogp.me/ns/article#

article:published_time - дата и время - Когда статья была впервые опубликована.
article:modified_time - дата и время - Когда статья была последний раз изменена.
article:expiration_time - дата и время - Когда статья становится устаревшей.
article:author - профиль массив - Авторы статьи.
article:section - строка - Название раздела высокого уровня. Например, Технологии.
article:tag - строка массив - Ключевые слова, связанные со статьей.

book - URI пространства имен: https://ogp.me/ns/book#

book:author - профиль массив - Кто написал эту книгу.
book:isbn - строка - ISBN
book:release_date - дата и время - Дата выпуска книги.
book:tag - строка массив - Ключевые слова, связанные с этой книгой.

profile - URI пространства имен: https://ogp.me/ns/profile#

profile:first_name - строка - Имя, обычно данное человеку родителями или выбранным самостоятельно.
profile:last_name - строка - Фамилия, унаследованная от семьи или брака, под которой человек обычно известен.
profile:username - строка - Короткая уникальная строка для их идентификации.
profile:gender - перечисление(male, female) - Их пол.

website - URI пространства имен: https://ogp.me/ns/website#

Никаких дополнительных свойств помимо базовых нет. Любая неразмеченная веб-страница должна рассматриваться как og:type website.

Типы

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

Тип	Описание	Литералы
Boolean	Boolean представляет значение true или false	true, false, 1, 0
DateTime	DateTime представляет временное значение, состоящее из даты (год, месяц, день) и необязательного компонента времени (часы, минуты)	ISO 8601
Enum	Тип, состоящий из ограниченного набора постоянных строковых значений (членов перечисления).	Строковое значение, которое является членом перечисления
Float	64-битное знаковое число с плавающей запятой	Все литералы, соответствующие следующим форматам: 1.234 -1.234 1.2e3 -1.2e3 7E-10
Integer	32-битное знаковое целое число. В большинстве языков целые числа более 32 бит становятся числами с плавающей запятой, поэтому мы ограничиваем протокол Open Graph для удобства использования на разных языках.	Все литералы, соответствующие следующим форматам: 1234 -123
String	Последовательность Unicode символов	Все литералы, состоящие из Unicode символов без экранирующих символов
URL	Последовательность Unicode символов, идентифицирующая интернет-ресурс.	Все допустимые URL, использующие протоколы https:// или https://

Обсуждение и поддержка

Вы можете обсудить протокол Open Graph в группе на Facebook^* или на почтовой рассылке для разработчиков. В настоящее время он используется Facebook^* (см. их документацию), Google (см. их документацию) и mixi. Его внедряют IMDb, Microsoft, NHL, Posterous, Rotten Tomatoes, TIME, Yelp и многие другие.

Реализации

Открытое сообщество разработчиков создало множество парсеров и инструментов для публикации. Сообщите в группу Facebook^*, если вы тоже создали что-то потрясающее!

Facebook^* Object Debugger - Официальный парсер и отладчик
Google Rich Snippets Testing Tool - Поддержка протокола Open Graph в определенных нишах и поисковых системах.
PHP Validator and Markup Generator - Валидатор входных данных OGP 2011 и генератор разметки на PHP5 объектах
PHP Consumer - небольшая библиотека для работы с данными протокола Open Graph на PHP
OpenGraphNode in PHP - простой парсер для PHP
PyOpenGraph - библиотека на Python для парсинга информации протокола Open Graph с веб-сайтов
OpenGraph Ruby - Ruby Gem, который анализирует веб-страницы и извлекает разметку протокола Open Graph
OpenGraph for Java - небольшой класс Java, представляющий протокол Open Graph
RDF::RDFa::Parser - парсер RDFa на Perl, поддерживающий протокол Open Graph
Плагин для WordPress - официальный плагин Facebook для WordPress, который добавляет метаданные Open Graph на сайты, работающие на WordPress.
Альтернативный плагин OGP для WordPress - простой легковесный плагин для WordPress, который добавляет метаданные Open Graph на сайты, работающие на WordPress.

Внедрение разметки через CMS

Если у вас сайт на WordPress или другой CMS, процесс будет ещё проще. Большинство современных платформ уже поддерживают Open Graph и предлагают плагины для автоматизации процесса.

WordPress

Для WordPress существует множество плагинов, таких как Yoast SEO или All in One SEO Pack. Они позволяют легко добавить Open Graph разметку без необходимости редактировать код вручную.

Установите плагин. Перейдите в раздел плагинов и найдите нужный.
Активируйте Open Graph. В настройках плагина найдите раздел, посвященный социальным сетям, и включите Open Graph.
Настройте параметры. Введите заголовки, описания и выберите изображения для ваших страниц.

Другие CMS

На других платформах, таких как Joomla или Drupal, процесс может немного отличаться, но, как правило, тоже сводится к установке и настройке соответствующего расширения или модуля.

Какие страницы стоит оптимизировать?

Рекомендуется добавлять разметку Open Graph на все страницы, которые вы планируете продвигать в социальных сетях. Это могут быть:

Главная страница
Блог-посты
Страницы продуктов
Любые страницы с важным контентом

Дополнительные советы по внедрению

Хочется немного подробнее остановиться на некоторых аспектах, которые могут значительно улучшить вашу разметку.

1. Настройка для разных соцсетей

Каждая социальная сеть имеет свои предпочтения. Например, для Twitter используют особую "Twitter Card" разметку. Однако, многие элементы можно перекрыть с помощью Open Graph. Просто убедитесь, что у вас есть соответствующие теги для каждой платформы, если вы планируете активно делиться своим контентом на них.

2. Актуализация изображений

Каждый раз, когда вы обновляете контент на странице или меняете изображения, не забудьте обновить и разметку. Таким образом, пользователи всегда будут видеть свежую и актуальную информацию. Также учтите, что социальные сети могут кэшировать старый контент, поэтому через те же инструменты проверки вы можете "освежить" данные.

3. Наличие 404 ошибок

Убедитесь, что вы проверили все ссылки на ошибки 404. Неправильные URL в разметке вызовут недовольство и могут отпугнуть пользователей.

4. Учитывайте скорость загрузки

Изображения, которые вы используете в разметке Open Graph, должны быть оптимизированы. Чем быстрее ваша страница загружается, тем лучше будут результаты её отображения.

Полезные ссылки

1. Официальный сайт Open Graph

Open Graph протокол — это ваше первое остановочное место. Здесь вы найдете официальную документацию на английском языке. Почему это важно? Потому что этот ресурс предоставляет вам полное руководство по всем тегам и их значению. Вы можете узнать, какие теги нужно использовать для того, чтобы ваши страницы респектировались в социальных сетях, включая очень важные поля, такие как og:title, og:description, и og:image.

2. Плагины для WordPress

Если вы используете плагины для WordPress, вы на правильном пути! Многое из того, что нужно для создания разметки Open Graph, можно сделать автоматически. Многие популярные SEO-плагины, такие как Yoast SEO и All in One SEO Pack, уже включают эту функцию. Не забывайте проверять настройки этих плагинов, чтобы удостовериться, что они правильно выставляют теги.

3. Документация Facebook^*

Хотите понять, как Facebook^* обрабатывает ваши ссылки? Тогда вам стоит посетить документацию от Facebook^*. У них есть отличный раздел, где объясняется, как работает разметка и какие лучшие практики вам стоит использовать. И не забывайте, Facebook^* — это гигант социальных сетей, и сделать так, чтобы ваши ссылки выглядели круто, — это настоящая необходимость.

4. Документация от Яндекса

Для русскоязычных пользователей полезно знать, что Яндекс также предлагает свою документацию, в которой описаны особенности работы с Open Graph. Если вы ориентируетесь на аудиторию из СНГ, стоит обратить внимание на рекомендации Яндекса, чтобы ваши ссылки выглядели привлекательно и у них была высокая кликабельность.

5. Валидатор разметки Open Graph

После того как вы настроили разметку, не забудьте протестировать её. Для этого идеально подойдет валидатор. Этот инструмент поможет вам проверить, правильно ли настроены теги Open Graph. Если что-то не так, валидатор подскажет, какие изменения нужно внести.

6. Валидатор на русском языке

Если вы предпочитаете русскоязычные ресурсы, то валидатор на PR-CY станет отличным вариантом. Здесь можно быстро проверить вашу разметку, и все пояснения будут на русском. Удобно, правда?

Используйте эти полезные ссылки для того, чтобы погрузиться в мир Open Graph. По сути, правильная разметка — это шаг к тому, чтобы ваши страницы выглядели профессионально и привлекали больше внимания. Не пренебрегайте этой частью вашей стратегии SEO, ведь именно она может стать «вишенкой на торте» вашего контента!

^* Соцсеть Facebook запрещена в РФ; она принадлежат корпорации Meta, которая признана в РФ экстремистской.