Open Graph
Примечание.
Раздел содержит информацию оригинального руководства.
Стандарт Open Graph разработан социальной сетью Facebook. Он позволяет контролировать превью, которое формируется при публикации ссылки на сайт в социальных сетях, и передавать информацию другим интернет-сервисам.
![](https://yastatic.net/doccenter/images/help-ru/webmaster/freeze/nnIoRnDcC1Ol8XOaRTt6ufXcs_w.png)
Разметку Open Graph используют Facebook, Вконтакте, Google+, Twitter, LinkedIn, Pinterest и другие сервисы. В Яндексе Open Graph используется для передачи данных в сервис Яндекс.Видео и для формирования заголовка сниппета.
Сервис Яндекс.Видео распознает не только основные, но и многие другие метатеги, например, разные типы видео (сериалы, клипы, фильмы и т. д.), ограничения по возрасту или стране просмотра. В зависимости от выбранного типа можно также указывать дополнительные свойства объекта: название фильма, номер эпизода сериала, дату выпуска телешоу и другие. Так как для Яндекс.Видео нужны метатеги, которых нет в документации от Facebook, в сервисе используется свое расширение.
Кроме построения превью и сниппетов, стандарт Open Graph могут использовать разработчики приложений для публикации действий пользователей в Facebook. В таких публикациях можно указывать действующее лицо (пользователя), объект, действие с этим объектом и название приложения, с помощью которого это действие было произведено.
Основные метатеги
В стандарте 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://site.ru/ns">
<meta property="og:type" content="my_namespace:my_type" />
</head>
Глобальные типы объектов группируются в вертикали. Каждая вертикаль имеет свое пространство имен. Значение метатега og:type для пространства имен всегда состоит из названия типа объекта и уточнения (<тип объекта:уточнение>). Это позволяет избежать путаницы с типами, которые задаются пользователем и содержат знак : (двоеточие).
Музыка
Видео
Другие
Типы объектов
Тип | Описание | Примеры значений |
---|---|---|
Boolean |
true, false, 1, 0
| |
DateTime |
Временная величина. Может содержать дату (год, месяц, день) и время (часы, минуты) согласно стандарту ISO 8601
|
2015-07-15, 15:05
|
Enum |
male, female
| |
Float |
1.234, -1.234, 1.2e3, -1.2e3, 7E-10
| |
Integer |
5, 15, 180
| |
String |
Последовательность символов стандарта Unicode
|
webmaster
|
URL |
http://www.site.com
|
Комментариев нет:
Отправить комментарий