Введение

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

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


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

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

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

<html prefix="og: http://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="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>

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

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

Например (line-break исключительно в демонстрационных целях):

<meta property="og:audio" content="http://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="http://example.com/bond/trailer.swf" />

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


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

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

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

Пример структурированных свойств для изображения:

<meta property="og:image" content="http://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" />

Свойство тега og:video имеет идентичные теги с og:image. Вот пример:

<meta property="og:video" content="http://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="http://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="http://example.com/rock.jpg" />
<meta property="og:image" content="http://example.com/rock2.jpg" />

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

Пример:

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

На приведенном примере 3 изображения, отображаться они будут так: первое изображение имеет размер 300x300px, второе изображением не имеет указанных размеров и третье изображением имеет размеры 1000px в высоту.


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

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

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

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

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

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

Музыка

og:type значение:

music.song

music.album

music.playlist

music.radio_station

Видео

og:type значение:

video.movie

video.episode

video.tv_show

Если это сериал или ТВ-шоу, метаданные идентичны video.movie.

video.other

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

Не Вертикальные объекты

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

og:type значение:

article - Статья, пространство имён определяется URI: http://ogp.me/ns/article#

book - Книга, пространство имён определяется URI: http://ogp.me/ns/book#

profile - Профайл, пространство имён определяется URI: http://ogp.me/ns/profile#

website - Web-сайт, пространство имён определяется URI: http://ogp.me/ns/website#

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


Типы

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

Тип Описание Литерал
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 без каких-либо символов Escape-Последовательности
URL Последовательность Unicode символов, которые идентифицируют Интернет-ресурс. Все допустимые URL-адреса, которые используют протокол http:// или https://

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

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


Реализованные проекты

Сообщество с открытым исходным кодом(Open Source) разработало ряд парсеров и издательских инструментов. Сообщите в Facebook, если вы создали что-то подобное!