Узнайте, как сделать так, чтобы материалы вашего сайта или приложения, которыми люди делятся на 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. Может иметь одно из следующих значений: |
| Ширина изображения в пикселях. Укажите высоту и ширину изображения, чтобы при первой публикации оно загрузилось должным образом. |
| Высота изображения в пикселях. Укажите высоту и ширину изображения, чтобы при первой публикации оно загрузилось должным образом. |