Open Graph — метатеги, которые помогают вывести нужную информацию при публикации ссылки на сайт в социальных сетях

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

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

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

В стандарте 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 изображения: первое имеет размер 300×300, для второго изображения размер не указан, третье — 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 для пространства имен всегда состоит из названия типа объекта и уточнения (<тип объекта:уточнение>). Это позволяет избежать путаницы с типами, которые задаются пользователем и содержат знак : (двоеточие).

Больше информации об Open Graph в источнике — https://yandex.ru/support/webmaster/open-graph/intro-open-graph.xml .

P.S. Для изображений лучше делать размер 968×504 пискеля это меньше минимально рекомендованных Фейсбуком 1200×630. Зато при таком размере и ратио картинку нигде не кропят, и выглядит она отлично.

Кстати, соцсети кэширует вашу страницу, и это сводит с ума во время отладки, пока вы не научитесь сбрасывать кэш: VK pages.clearCache — http://vk.com/dev/pages.clearCache и Facebook Open Graph Object Debugger — https://developers.facebook.com/tools/debug/og/object/ .