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

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

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

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

Разметка Open Graph

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

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

Пример материала, отформатированного с использованием тегов 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-коде есть ошибки, их можно устранить прямо в отладчике. Подробнее см. в разделе Обновление объектов.

Проверка корректности обработки пользовательского агента Facebook

Откройте браузер.
Измените пользовательский агент так, чтобы он соответствовал пользовательскому агенту Facebook. Дополнительную информацию об изменении пользовательского агента читайте в этой статье: http://osxdaily.com/2013/01/16/change-user-agent-chrome-safari-firefox/.
- Меню Разработка > Пользовательский агент > Другой.
- Установите пользовательский агент facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)
Загрузите проблемный URL.
Установите пользовательский агент мобильного браузера, например Safari — iPhone:
меню Разработка > Пользовательский агент > Safari — iOS 10 — iPhone.
Загрузите проблемный URL.
Если дело в пользовательском агенте, на шаге 5 страница загрузится корректно, а на шаге 3 — нет.

Типы мультимедийного контента

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

Видео

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

3D-объекты

См. статью о публикации с помощью Open Graph.