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

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

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

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


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

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

Чтобы узнать, как ваша разметка отображается для краулера 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

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