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

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

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

• Разметка Open Graph
• Тестирование разметки
• Проверка корректности обработки пользовательского агента Facebook
• Типы мультимедийного контента

Разметка Open Graph

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

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

Пример контента, отформатированного с использованием тегов Open Graph для оптимального отображения на Facebook:

Пример разметки

Ниже представлен пример разметки статьи, новости или записи в блоге со свойством 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" />

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

Основные теги

В таблице ниже представлены основные метатеги, которые должны присутствовать в материалах любого типа.

Чтобы привлечь внимание к вашим материалам и повысить вовлеченность, добавьте два дополнительных тега:

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

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

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

3D-объекты

См. статью о публикации 3D-объектов с помощью Open Graph.

Дополнительные ресурсы

• Краулер Facebook
• Оптимизация метаданных
• Справочник по типам объектов
• Рекомендации по публикации
• Обновление объектов