Хаки и Скрипты Next Generation CMS : Разное : Протокол Open Graph

irbees2008 Опубликовано - 15 - сентября Разное

Адаптировал: irbees2008
Уровень сложности исполнения: Справочник

Протокол 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: 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>

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

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

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="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 имеет несколько дополнительных структурированных свойств:

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="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 значение имени всегда с префиксом пространства имен, а затем период.
Это для уменьшения путаницы типов в пространствах имен, в которых всегда есть двоеточие.

Музыка

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

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

music.song

music:duration - integer >=1 - Длина песни в секундах.
music:album - music.album array - Название альбома.
music:album:disc - integer >=1 -Номер альбома на диске.
music:album:track - integer >=1 -Номер трека в альбоме.
music:musician - profile array -Исполнитель песни.

music.album

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.playlist

music:song - Идентично одному из music.album
music:song:disc
music:song:track
music:creator - profile - Создатель плейлиста.

music.radio_station

music:creator - profile - Создатель Радио-станции.

Видео

URI пространства имен: http://ogp.me/ns/video#

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

video.movie

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.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: http://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: http://ogp.me/ns/book#

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

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

profile:first_name - string - Имя пользователя профайла.
profile:last_name - string - Фамилия пользователя профайла.
profile:username - string - Ник.
profile:gender - enum - Пол (мужской, женский).

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

Можешь почитать и вот эту статейку "палитра цветов 1"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.