Протокол Open Graph или разметка OG

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

Основные метаданные

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

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

В качестве примера приведем разметку протокола Open Graph для The Rock на IMDB :

<html prefix="og: https://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<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 - Описание вашего объекта от одного до двух предложений.
og:determiner- Слово, которое появляется перед названием этого объекта в предложении. Перечисление (а, Ан, «», авто). Если autoвыбрано, потребитель ваших данных должен выбрать между «a» или «an». По умолчанию "" (пусто).
og:locale- Регион, в котором размечены эти теги. Формат language_TERRITORY. По умолчанию 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="Sean Connery found fame and fortune as the
           suave, sophisticated British agent, James Bond." />
<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" />

Схему RDF (в Turtle ) можно найти по адресу ogp.me/ns .

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

К некоторым свойствам могут быть прикреплены дополнительные метаданные. Они указываются так же, как и другие метаданные с помощью propertyи content, но propertyбудут иметь дополнительные :.

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:, его следует указать 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="A shiny red apple with a bite taken out" />

og:videoТег имеет одинаковые тег как og:image. Вот пример:

<meta property="og:video" content="https://example.com/movie.swf" />
<meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="300" />

og:audioТег имеет только первые 3 свойства , которые доступны (так как размер не имеет смысла для звука):

<meta property="og:audio" content="https://example.com/sound.mp3" />
<meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" />
<meta property="og:audio:type" content="audio/mpeg" />

Массивы

Если у тега может быть несколько значений, просто поместите <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" />

Когда сообщество соглашается со схемой для типа, он добавляется в список глобальных типов. Все остальные объекты в системе типов являются CURIE формы

<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- integer > = 1 - Продолжительность песни в секундах.
music:album- массив music.album - Альбом, из которого эта песня.
music:album:disc- integer > = 1 - На каком диске альбома находится эта песня.
music:album:track- integer > = 1 - Какой трек эта песня.
music:musician- массив профилей - музыкант, создавший эту песню.

music.album

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

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- integer > = 1 - Продолжительность фильма в секундах.
video:release_date- datetime - дата выхода фильма.
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- datetime - когда статья была впервые опубликована.
article:modified_time- datetime - Когда в последний раз статья была изменена.
article:expiration_time- datetime - когда статья устарела после.
article:author- массив профилей - Авторы статьи.
article:section- строка - Имя раздела высокого уровня. Например, технология
article:tag- строковый массив - слова тегов, связанные с этой статьей.

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

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

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

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

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

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

Типы

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

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

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

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

Реализации

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

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

Протокол Open Graph был первоначально создан в Facebook и вдохновлен Dublin Core , канонической связью , микроформатами и RDFa . Спецификация, описанная на этой странице, доступна в соответствии с соглашением Open Web Foundation, версия 0.9 . Этот веб-сайт имеет открытый исходный код .