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

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

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

Разметка Open Graph

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

Если этих тегов нет, краулер 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. Подробнее о поддерживаемых языках см. в нашей документации по локализации.


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

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

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

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

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

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