Руководство по публикации для веб-мастеров

Узнайте, как сделать так, чтобы материалы вашего сайта или приложения, которыми люди делятся на Facebook, всегда выглядели отлично на нашей платформе.

В этом документе рассматриваются следующие темы:

Разметка Open Graph
Тестирование разметки
Типы мультимедийных материалов

Разметка Open Graph

Основная часть материалов, которыми делятся люди, представлена на Facebook в виде URL, поэтому для разметки HTML-кода своего сайта важно использовать теги Open Graph. От них зависит то, как ваши материалы будут выглядеть на Facebook.

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

Пример материала, отформатированного с помощью тегов Open Graph:

Пример разметки

Ниже представлен пример разметки статьи, новости или записи в блоге со свойством og:type="article" и некоторыми дополнительными свойствами:

<meta property="og:url"                content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type"               content="article" />
<meta property="og:title"              content="When Great Minds Don’t Think Alike" />
<meta property="og:description"        content="How much does culture influence creative thinking?" />
<meta property="og:image"              content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

В свойствах содержатся описательные метаданные о статье. Нам важно, чтобы эти данные обязательно присутствовали в публикации, когда человек делится статьей с другими людьми.

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

В таблице ниже представлены основные метатеги, которые должны присутствовать в материалах любого типа.

Метка	Описание
`og:url`	Канонический URL вашей страницы. Это должен быть простой URL без переменных сеанса, параметров для идентификации пользователей и счетчиков. Отметки «Нравится» и действия «Поделиться» для этого URL будут агрегироваться именно по этому URL. Например, URL, размещенные в домене для мобильных устройств, должны указывать на версию URL для ПК, которая выступает в качестве канонического URL для агрегирования отметок «Нравится» и действий публикации в различных версиях этой страницы.
`og:title`	Заголовок статьи без какого-либо упоминания бренда, например названия сайта.
`og:description`	Краткое описание материалов (обычно 2–4 предложения). Отображается под заголовком публикации на Facebook.
`og:image`	URL изображения, которое отображается, когда человек делится материалами на Facebook. Подробнее см. ниже. Также рекомендуем ознакомиться с нашим руководством по созданию изображения для предварительного просмотра.
`fb:app_id`	Чтобы воспользоваться Статистикой Facebook, добавьте ID приложения в код страницы. С помощью Статистики можно просматривать информацию о переходах на ваш сайт из Facebook. ID приложения указан в Панели приложений.

Чтобы привлечь внимание к вашим материалам и повысить вовлеченность, добавьте два дополнительных тега:

Тег Описание

Тег	Описание
`og:type`	Тип мультимедиа, к которому относятся материалы. Он отвечает за отображение материалов в Ленте новостей. Если тип не указан, по умолчанию используется значение `website`. Каждый URL должен представлять собой отдельный объект, поэтому указать несколько значений для тега `og:type` невозможно. Полный список типов объектов см. в нашем справочнике.
`og:locale`	Язык ресурса. По умолчанию используется `en_US`. Если материалы доступны на нескольких языках, можно добавить соответствующие теги `og:locale:alternate`. Подробнее о поддерживаемых языках см. в нашей документации по локализации.

og:type

Тип мультимедиа, к которому относятся материалы. Он отвечает за отображение материалов в Ленте новостей. Если тип не указан, по умолчанию используется значение website. Каждый URL должен представлять собой отдельный объект, поэтому указать несколько значений для тега og:type невозможно. Полный список типов объектов см. в нашем справочнике.

og:locale

Язык ресурса. По умолчанию используется en_US. Если материалы доступны на нескольких языках, можно добавить соответствующие теги og:locale:alternate. Подробнее о поддерживаемых языках см. в нашей документации по локализации.

Полный список стандартных свойств объектов см. в нашем справочнике.

Тестирование разметки

Чтобы узнать, как ваша разметка отображается для краулера Facebook, введите URL в отладчик публикаций. Вы увидите метатеги, скрапинг которых выполняет краулер, а также ошибки и предупреждения.

При обращении к отладчику запускается скрапинг вашей страницы, поэтому если в HTML-коде есть ошибки, их можно устранить прямо в отладчике. Подробнее см. в разделе Обновление объектов.

Типы мультимедийных материалов

Если материалы включают аудио, видео или информацию о местонахождении, можно добавить дополнительную разметку. Полный список стандартных свойств объектов см. в нашем справочнике.

Видео

Метатег og:video можно использовать для материалов любого типа. Ниже описано, как с помощью дополнительных тегов улучшить внешний вид видео в Facebook. На Facebook можно публиковать видео в форматах MP4 и Flash.

Чтобы видео автоматически воспроизводилось в Ленте новостей, для тегов og:video:url и og:video:secure_url следует указать защищенный URL. Помните, что автоматическое воспроизведение видео зависит от ряда факторов.

Метатег	Описание
`og:video`	URL видео. Если вы хотите, чтобы видео воспроизводилось в Ленте новостей, используйте https:// URL, если возможно.
`og:video:url`	Эквивалент тега `og:video`.
`og:video:secure_url`	Защищенный URL видео. Добавьте этот тег, даже если в теге `og:video` уже указан защищенный URL.
`og:video:type`	Видео типа MIME. Может принимать значения `application/x-shockwave-flash` или `video/mp4`.
`og:video:width`	Ширина видео в пикселях. Это обязательное свойство для видео.
`og:video:height`	Высота видео в пикселях. Это обязательное свойство для видео.
`og:image`	Выберите изображение высокого качества для предварительного просмотра в Ленте новостей

Изображения

Этот набор свойств используется для материалов, содержащих более одного изображения. См. Рекомендации по публикации, чтобы узнать, как использовать метатег og:image.

Метатег	Описание
`og:image`	URL изображения. Если после публикации изображения его требуется обновить, используйте новый URL для нового изображения. Изображения кэшируются на основе URL, поэтому если вы не измените URL, изображение не будет обновлено.
`og:image:url`	Эквивалент тега `og:image`.
`og:image:secure_url`	https:// URL изображения
`og:image:type`	Изображения типа MIME. Может иметь одно из следующих значений: `image/jpeg`, `image/gif` или `image/png`
`og:image:width`	Ширина изображения в пикселях. Укажите высоту и ширину изображения, чтобы при первой публикации оно загрузилось должным образом.
`og:image:height`	Высота изображения в пикселях. Укажите высоту и ширину изображения, чтобы при первой публикации оно загрузилось должным образом.