Open Graph

Примечание. Раздел содержит информацию оригинального руководства.

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

Разметку Open Graph используют Facebook, Вконтакте, Google+, Twitter, LinkedIn, Pinterest и другие сервисы. В Яндексе Open Graph используется для передачи данных в сервис Яндекс.Видео и для формирования заголовка сниппета.

Сервис Яндекс.Видео распознает не только основные, но и многие другие метатеги, например, разные типы видео (сериалы, клипы, фильмы и т. д.), ограничения по возрасту или стране просмотра. В зависимости от выбранного типа можно также указывать дополнительные свойства объекта: название фильма, номер эпизода сериала, дату выпуска телешоу и другие. Так как для Яндекс.Видео нужны метатеги, которых нет в документации от Facebook, в сервисе используется свое расширение.

Кроме построения превью и сниппетов, стандарт Open Graph могут использовать разработчики приложений для публикации действий пользователей в Facebook. В таких публикациях можно указывать действующее лицо (пользователя), объект, действие с этим объектом и название приложения, с помощью которого это действие было произведено.

  1. Основные метатеги
  2. Дополнительные метатеги
  3. Структурированные метатеги
  4. Массивы
  5. Объекты

Основные метатеги

В стандарте Open Graph одна страница описывает только один объект — человека, компанию или продукт. Для этого объекта и указываются все данные. Чтобы передать информацию сервисам, необходимо в HTML-код (в элемент head) добавить следующие обязательные метатеги:

  • og:title — название объекта.
  • og:type — тип объекта, например, video.movie (фильм). Если у вас несколько объектов на странице, выберите один из них (главный). В зависимости от типа можно указать дополнительные свойства.
  • og:image — URL изображения, описывающего объект.
  • og:url — канонический URL объекта, который будет использован в качестве постоянного идентификатора.
<meta property="og:title" content="Мэрилин Монро"/>
<meta property="og:description" content="Американская киноактриса и певица"/>
<meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Marilyn_Monroe_-_publicity.JPG/210px-Marilyn_Monroe_-_publicity.JPG">
<meta property="og:type" content="profile"/>
<meta property="og:url" content= "https://ru.wikipedia.org/wiki/Мэрилин_Монро" />

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

  • og:audio — URL звукового файла, который относится к описываемому объекту.
  • og:description — краткое описание объекта.
  • og:determiner — слово (артикль), которое должно быть перед названием объекта в предложении. Может быть указано как: a, an, the, "", auto. Если в значении будет указано auto, сервис, распознающий разметку, будет выбирать между значениями a и an. Если значение не указано, перед названием объекта артикль будет отсутствовать.
  • og:locale — язык описания объекта в формате язык_страна. По умолчанию используется значение en_US.
  • og:locale:alternate — массив дополнительных языков, на которых доступно описание объекта.
  • og:site_name — название сайта, на котором размещена информация об объекте.
  • og:video — URL видео файла, который относится к описываемому объекту.
<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" />

Структурированные метатеги

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

Например, og:image может содержать следующие метаданные:

  • og:image:url — URL изображения, описывающего объект (соответствует og:image).
  • og:image:secure_url — дополнительный URL, если страница открывается по протоколу HTTPS.
  • og:image:type — MIME-тип изображения (формат изображения стандарта MIME).
  • og:image:width — ширина изображения в пикселах.
  • og:image:height — высота изображения в пикселах.
<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 содержит только некоторые метаданные из вышеперечисленных:

<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 (сверху вниз).

<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 изображения: первое имеет размер 300x300, для второго изображения размер не указан, третье — 1000 пикселей в высоту.

Объекты

Чтобы передать данные об объекте, необходимо указать его тип с помощью метатега og:type:

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

В этом примере указан один из глобальных (общепризнанных) типов. Остальные типы указываются согласно синтаксису CURIE:

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

Глобальные типы объектов группируются в вертикали. Каждая вертикаль имеет свое пространство имен. Значение метатега og:type для пространства имен всегда состоит из названия типа объекта и уточнения (<тип объекта:уточнение>). Это позволяет избежать путаницы с типами, которые задаются пользователем и содержат знак : (двоеточие).

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

Тип Описание Примеры значений
Boolean

Может принимать значения true или false, 1 или 0

true, false, 1, 0

DateTime

Временная величина. Может содержать дату (год, месяц, день) и время (часы, минуты) согласно стандарту ISO 8601

2015-07-15, 15:05

Enum

Состоит из ограниченного множества постоянных строковых значений

male, female

Float

64-битное число с плавающей точкой

1.234, -1.234, 1.2e3, -1.2e3, 7E-10

Integer

32-битное целое число. Может содержать все символы, которые соответствуют следующим форматам: 1234, -123

5, 15, 180

String

Последовательность символов стандарта Unicode

webmaster

URL

Все действительные URL, которые доступны по HTTP- или HTTPS-протоколу

http://www.example.com