Узнайте, как сделать так, чтобы материалы вашего сайта или приложения, которыми люди делятся на Facebook, всегда выглядели отлично на нашей платформе.
В этом документе рассматриваются следующие темы:
Основная часть материалов, которыми делятся люди, представлена на 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" />
В свойствах содержатся описательные метаданные о статье. Нам важно, чтобы эти данные обязательно присутствовали в публикации, когда человек делится статьей с другими людьми.
В таблице ниже представлены основные метатеги, которые должны присутствовать в материалах любого типа.
| Метка | Описание |
|---|---|
| Канонический URL вашей страницы. Это должен быть простой URL без переменных сеанса, параметров для идентификации пользователей и счетчиков. Отметки "Нравится" и действия "Поделиться" для этого URL будут агрегироваться именно по этому URL. Например, URL, размещенные в домене для мобильных устройств, должны указывать на версию URL для ПК, которая выступает в качестве канонического URL для агрегирования отметок "Нравится" и действий публикации в различных версиях этой страницы. |
| Заголовок статьи без какого-либо упоминания бренда, например названия сайта. |
| Краткое описание материалов (обычно 2–4 предложения). Отображается под заголовком публикации на Facebook. |
| URL изображения, которое отображается, когда человек делится материалами на Facebook. Подробнее см. ниже. Также рекомендуем ознакомиться с нашим руководством по созданию изображения для предварительного просмотра. |
| Чтобы воспользоваться Статистикой Facebook, добавьте ID приложения в код страницы. С помощью Статистики можно просматривать информацию о переходах на ваш сайт из Facebook. ID приложения указан в Панели приложений. |
Чтобы привлечь внимание к вашим материалам и повысить вовлеченность, добавьте два дополнительных тега:
| Тег | Описание |
|---|---|
| Тип мультимедиа, к которому относятся материалы. Он отвечает за отображение материалов в Ленте новостей. Если тип не указан, по умолчанию используется значение |
| Язык ресурса. По умолчанию используется |
Полный список стандартных свойств объектов см. в нашем справочнике.
Чтобы узнать, как ваша разметка отображается для краулера Facebook, введите URL в отладчик публикаций. Вы увидите метатеги, скрапинг которых выполняет краулер, а также ошибки и предупреждения.
При обращении к отладчику запускается скрапинг вашей страницы, поэтому если в HTML-коде есть ошибки, их можно устранить прямо в отладчике. Подробнее см. в разделе Обновление объектов.
Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_3 like Mac OS X) AppleWebKit/603.3.8 (KHTML, like Gecko) Mobile/14G60 [FBAN/FBIOS;FBAV/138.0.0.10.91;FBBV/68347313;FBDV/iPhone8,2;FBMD/iPhone;FBSN/iOS;FBSV/10.3.3;FBSS/3;FBCR/AT&T;FBID/phone;FBLC/en_US;FBOP/5;FBRV/0].
Если материалы включают аудио, видео или информацию о местонахождении, можно добавить дополнительную разметку. Полный список стандартных свойств объектов см. в нашем справочнике.
Метатег 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:// URL изображения |
| Изображения типа MIME. Может иметь одно из следующих значений: |
| Ширина изображения в пикселях. Укажите высоту и ширину изображения, чтобы при первой публикации оно загрузилось должным образом. |
| Высота изображения в пикселях. Укажите высоту и ширину изображения, чтобы при первой публикации оно загрузилось должным образом. |