Узнайте, как сделать так, чтобы материалы вашего сайта или приложения, которыми люди делятся на Facebook, всегда выглядели отлично на нашей платформе.
В этом документе рассматриваются следующие темы:
Основная часть материалов, которыми делятся люди, представлена на 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" />
В этих свойствах содержатся описательные метаданные о статье. Нам важно, чтобы эти данные обязательно присутствовали в публикации, когда человек делится статьей.
В таблице ниже представлены основные метатеги, которые должны присутствовать в материалах любого типа.
| Тег | Описание |
|---|---|
| Канонический URL вашей страницы. Это должен быть простой URL без переменных сеанса, параметров для идентификации пользователей и счетчиков. Отметки "Нравится" и действия "Поделиться" для этого URL будут агрегироваться именно по этому URL. Например, URL в домене для мобильных устройств должны указывать на версию URL для ПК, которая выступает в качестве канонического URL для агрегирования отметок "Нравится" и перепостов в различных версиях этой страницы. |
| Заголовок статьи без какого-либо упоминания бренда, например названия сайта. |
| Краткое описание материалов (обычно 2–4 предложения). Отображается под заголовком публикации на Facebook. |
| URL изображения, которое отображается на Facebook, когда человек делится материалами. Подробнее см. ниже. Также рекомендуем ознакомиться с нашим руководством по созданию изображения для предварительного просмотра. |
| Чтобы воспользоваться статистикой Facebook, добавьте на страницу ID приложения. С помощью статистики можно просматривать информацию о переходах на ваш сайт из Facebook. ID приложения указан в панели приложений. |
Чтобы привлечь внимание к вашим материалам и повысить вовлеченность, добавьте два дополнительных тега:
| Тег | Описание |
|---|---|
| Тип мультимедиа, к которому относятся материалы. Он отвечает за отображение материалов в Ленте новостей. Если тип не указан, по умолчанию используется значение |
| Язык ресурса. Значение по умолчанию — |
Полный список стандартных свойств объектов см. в нашем справочнике.
Чтобы узнать, как ваша разметка отображается для краулера Facebook, введите URL в отладчик публикаций. Вы увидите метатеги, скрапинг которых выполняет краулер, а также ошибки и предупреждения.
При обращении к отладчику запускается скрапинг вашей страницы, поэтому если в HTML-коде есть ошибки, их можно устранить прямо в отладчике. Подробнее см. в разделе Обновление объектов.
facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)
Если материалы включают аудио, видео или геоданные, можно добавить дополнительную разметку. Полный список стандартных свойств объектов см. в нашем справочнике.
Метатег og:video можно использовать для материалов любого типа. Ниже описано, как с помощью дополнительных тегов улучшить внешний вид видео в Facebook. На Facebook можно публиковать видео в форматах MP4 и Flash.
Чтобы видео автоматически воспроизводилось в Ленте новостей, для тегов og:video:url и og:video:secure_url следует указать защищенный URL. Помните, что автоматическое воспроизведение видео зависит от ряда факторов.
| Метатег | Описание |
|---|---|
| URL видео. Если вы хотите, чтобы видео воспроизводилось в Ленте новостей, используйте https:// URL, если это возможно. |
| Эквивалент тега |
| Защищенный URL видео. Добавьте этот тег, даже если в теге |
| Видео типа MIME. Укажите значение |
| Ширина видео в пикселях. Это обязательное свойство для видео. |
| Высота видео в пикселях. Это обязательное свойство для видео. |
| Выберите изображение высокого качества для предварительного просмотра в Ленте новостей |
Этот набор свойств используется для материалов, содержащих несколько изображений. Информацию об использовании метатега og:image см. в рекомендациях по публикации.
| Метатег | Описание |
|---|---|
| URL изображения. Если после публикации изображения его понадобится обновить, используйте для нового изображения новый URL. Изображения кэшируются по URL, поэтому, если вы не измените его, изображение не обновится. |
| Эквивалент тега |
| URL https:// изображения |
| Изображение типа MIME. Возможные значения: |
| Ширина изображения в пикселях. Укажите высоту и ширину изображения, чтобы при первой публикации оно загрузилось должным образом. |
| Высота изображения в пикселях. Укажите высоту и ширину изображения, чтобы при первой публикации оно загрузилось должным образом. |