Введение
Протокол Open Graph позволяет любой веб-странице стать полноценным объектом в социальных сетях. Например, протокол используется на Facebook, чтобы разрешить любой веб-странице иметь такую же функциональность, как и любой другой объект на Facebook.
Хотя многие различные технологии и схемы существуют и могут быть объединены вместе, нет ни одной технологии, которая предоставляет достаточно информации, чтобы красочно представлять какие-либо веб-страницы внутри социальных сетей. Протокол Open Graph строится на этих существующих технологиях и предоставляет разработчикам возможность реализовать все это в одном протоколе. Простота разработки является ключевой задачей протокола Open Graph, сообщили многие, на основе технических проектных решений.
Основные Метаданные
Что бы превратить вашу web-страницу в графические объекты, вам нужно добавить базовые метаданные к вашей странице. Мы основываемся на первоначальной версии протокола
RDFa это означает что вы будите размещать дополнительные <meta>
теги в <head>
вашей web-странице. Четыре основных свойства для каждой страницы:
og:title
- Название вашего объекта, как он должен отображаться в графе, например фильм, "The Rock".og:type
- Типы объектов , например, "video.movie". В зависимости от типа, можно задать другие свойства которые могут быть необходимы.og:image
- URL-адрес изображения, который должен определить Ваш объект в графе для изображения.og:url
- Канонический URL-адрес объекта, который будет использоваться в качестве его постоянного ID в графе, например, "http://www.imdb.com/title/tt0117500/".
В качестве примера ниже приводится разметка протокола Open Graph для фильма "The Rock" на IMDB:
<html prefix="og: //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="//www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="//ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>
Дополнительные Метаданные
Следующие свойства являются необязательными для любого объекта и, как правило, рекомендуется:
og:audio
- URL-адрес звукового файла, который сопутствует этому объекту.og:description
- Одно-два предложения описания вашего объекта.og:determiner
- Слово, которое появляется перед названием этого объекта в предложении. Тип enum (a, an, the, "", auto). Если выбраноauto
, потребитель данных должен выбирать между "a" или "an". По умолчанию - " " (пусто).og:locale
- Тег локации. Форматlanguage_TERRITORY
. По умолчаниюen_US
.og:locale:alternate
- Тип array других локалей на этой странице.og:site_name
- Если ваш объект является частью большого web-сайта, название, должно отображаться на всех страницах сайта. Например, "IMDb".og:video
- URL-адрес видео-файла, который сопутствует этому объекту.
Например (line-break исключительно в демонстрационных целях):
<meta property="og:audio" content="//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="//example.com/bond/trailer.swf" />
Схему RDF (в Turtle) можно найти на ogp.me/ns.
Структурированные Свойства
Некоторые свойства могут иметь дополнительные метаданные, прикрепленные к ним.
Они определены таким же образом как метаданные свойство
и
содержание
, но свойства
будут иметь дополнительные :
.
Свойство тега og:image
имеет несколько дополнительных структурированных свойств:
og:image:url
- Идентичныйog:image
.og:image:secure_url
- Альтернативный url-адрес для использования в случае, если web-страница требует HTTPS.og:image:type
- Типы MIME для изображения.og:image:width
- Число пикселей в ширину.og:image:height
- Число пикселей в высоту.
Пример структурированных свойств для изображения:
<meta property="og:image" content="//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="//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="//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="//example.com/rock.jpg" />
<meta property="og:image" content="//example.com/rock2.jpg" />
Пишите структурированные свойства тегов после того, как вы объявите родительский тег. Когда один из родительских элементов обрабатывается, его структурированные свойства выполняются последовательно.
Пример:
<meta property="og:image" content="//example.com/rock.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:image" content="//example.com/rock2.jpg" />
<meta property="og:image" content="//example.com/rock3.jpg" />
<meta property="og:image:height" content="1000" />
На приведенном примере 3 изображения, отображаться они будут так: первое изображение имеет размер 300x300
px, второе изображением не имеет указанных размеров и третье изображением имеет размеры 1000
px в высоту.
Типы Объектов
Для того что бы корректно отобразить объект в графе, необходимо задать ему тип. Это делается с помощью свойств: og:type
<meta property="og:type" content="website" />
Когда мы соглашаемся со схемой типов, они добавляются в список глобальных типов. Все остальные типы объектов определяются как форма CURIEs
<head prefix="my_namespace: //example.com/ns#">
<meta property="og:type" content="my_namespace:my_type" />
Глобальные типы сгруппированы по вертикали. Каждый вертикальный тип имеет собственное пространство имен. Тип og:type
значение имени всегда с префиксом пространства имен, а затем период.
Это для уменьшения путаницы типов в пространствах имен, в которых всегда есть двоеточие.
Музыка
- Пространство имён определяется URI:
http://ogp.me/ns/music#
og:type
значение:
music:duration
- integer >=1 - Длина песни в секундах.music:album
- music.album array - Название альбома.music:album:disc
- integer >=1 - Номер альбома на диске.music:album:track
- integer >=1 - Номер трека в альбоме.music:musician
- profile array - Исполнитель песни.
music:song
- music.song - Название песни в альбоме.music:song:disc
- integer >=1 - Тоже самое чтоmusic:album:disc
но в обратном значении.music:song:track
- integer >=1 - Тоже самое чтоmusic:album:track
но в обратном значении.music:musician
- profile - Профайл музыканта, который создал эту песню.music:release_date
- datetime - Дату выпуска альбома.
music:song
- Идентично одному из music.albummusic:song:disc
music:song:track
music:creator
- profile - Создатель плейлиста.
music:creator
- profile - Создатель Радио-станции.
Видео
- URI пространства имен:
https://ogp.me/ns/video#
og:type
значение:
video:actor
- profile array - Актеры в этом фильме.video:actor:role
- string - Роли актеровvideo:director
- profile array - Режиссеры фильма.video:writer
- profile array - Авторы фильма.video:duration
- integer >=1 - Длина фильма в секундах.video:release_date
- datetime - Дата выхода фильма в прокат.video:tag
- string array - Теги, связанные с этим фильмом.
video:actor
- Идентично video.movievideo:actor:role
video:director
video:writer
video:duration
video:release_date
video:tag
video:series
- video.tv_show - К какой серии этот эпизод принадлежит.
Если это сериал или ТВ-шоу, метаданные идентичны video.movie.
Видео, которое не относится ни к одной из категорий. Метаданные идентичны 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
- profile array - Авторы статьи.article:section
- string - Название категории.article:tag
- string array - Теги, связанные с этой статьей.
book
- Книга, пространство имён определяется URI: https://ogp.me/ns/book#
book:author
- profile array - Кто написал эту книгу.book:isbn
- string - Международный стандартный книжный номер ISBNbook:release_date
- datetime - Дата выпуска книги.book:tag
- string array - Теги, связанные с этой книгой.
profile
- Профайл, пространство имён определяется URI: https://ogp.me/ns/profile#
profile:first_name
- string - Имя пользователя профайла.profile:last_name
- string - Фамилия пользователя профайла.profile:username
- string - Ник.profile:gender
- enum - Пол (мужской, женский).
website
- Web-сайт, пространство имён определяется URI: https://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, если вы создали что-то подобное!
- Facebook Object Debugger - Официальный парсер и отладчик от Facebook
- Google Rich Snippets Testing Tool - Поддержка протокола Open Graph в поисковых системах, а так же в вертикальных поисковых системах
- PHP Validator и 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 для Java - небольшой Java-класс, используемый для представления протокола Open Graph
- RDF::RDFa::Парсер - Perl RDFa парсер, который понимает протокол Open Graph
- WordPress plugin - Официальный плагин для WordPress от Facebook, который добавляет метаданные Open Graph для сайтов на базе WordPress
- Alternate WordPress OGP plugin - Альтернативный плагин для WordPress, который добавляет метаданные Open Graph для сайтов на базе WordPress