Введение
Протокол Open Graph позволяет любой веб-странице стать насыщенным объектом в социальном графе. То есть, его можно использовать на Facebook*, чтобы ваша страница имела те же возможности, что и любой другой объект на платформе.
Хотя существует много различных технологий и схем, которые можно комбинировать, нет единой технологии, которая смогла бы предоставить достаточно информации для богатого представления веб-страницы в социальном графе. Протокол Open Graph основан на этих технологиях и предлагает разработчикам единую реализацию. Простота для разработчиков — ключевая цель данного протокола, что отразилось на многих технических решениях.
Базовые метаданные
Чтобы ваши веб-страницы стали объектами графа, вам нужно добавить базовые метаданные на вашу страницу. Мы основываем начальную версию протокола на RDFa, что означает, что вам понадобятся дополнительные <meta> теги в <head> вашей веб-страницы. Четыре обязательных свойства для каждой страницы следующие:
- og:title - Заголовок вашего объекта, как он должен отображаться в графе, например, "Скала".
- og:type - Тип вашего объекта, например, "video.movie". В зависимости от указанного типа могут потребоваться и другие свойства.
- og:image - URL изображения, которое должно представлять ваш объект внутри графа.
- og:url - Канонический URL вашего объекта, который будет использоваться как его уникальный идентификатор в графе. Например,
https://www.imdb.com/title/tt0117500/.
Вот пример разметки Open Graph для "Скала" на IMDB:
<html prefix="og: https://ogp.me/ns#">
<head>
<title>Скала (1996)</title>
<meta property="og:title" content="Скала" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>
Дополнительные метаданные
Следующие свойства являются необязательными для любого объекта, но их обычно рекомендуется добавлять:
- og:audio - URL к аудиофайлу, который сопутствует этому объекту.
- og:description - Краткое описание вашего объекта (1-2 предложения).
- og:determiner - Слово, которое появляется перед заголовком объекта в предложении. Это может быть (a, an, the, "", auto). Если выбрано авто, то пользователь должен выбрать между "a" или "an". По умолчанию - пусто.
- og:locale - Локализация, в которой эти теги отмечены. Формат: язык_ТЕРРИТОРИЯ. По умолчанию - en_US.
- og:locale:alternate - Массив других локалей, на которых доступна эта страница.
- og:site_name - Если ваш объект является частью более крупного веб-сайта, укажите название сайта, например, "IMDb".
- og:video - URL видеофайла, который дополняет этот объект.
Пример метаданных:
<meta property="og:audio" content="https://example.com/bond/theme.mp3" />
<meta property="og:description"
content="Шон Коннери стал известен как
изящный и утончённый британский агент Джеймс Бонд." />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="IMDb" />
<meta property="og:video" content="https://example.com/bond/trailer.swf" />
Структурированные свойства
Некоторые свойства могут иметь дополнительные метаданные. Эти свойства указываются так же, как и другие метаданные, но с использованием дополнительного двоеточия (:).
Например, у свойства og:image есть несколько дополнительных структурированных свойств:
- og:image:url - То же самое, что и og:image.
- og:image:secure_url - Альтернативный URL для использования, если веб-страница требует HTTPS.
- og:image:type - MIME-тип этого изображения.
- og:image:width - Ширина изображения в пикселях.
- og:image:height - Высота изображения в пикселях.
- og:image:alt - Описание того, что изображено на картинке (не подпись). Если страница указывает на og:image, она должна указать и og:image:alt.
Пример полного изображения:
<meta property="og:image" content="https://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
<meta property="og:image:alt" content="Яркое красное яблоко с укусом" />
Типы объектов
Чтобы ваш объект был представлен в графе, необходимо указать его тип. Это делается с помощью свойства og:type:
<meta property="og:type" content="website" />
Когда сообщество согласует схему для типа, она добавляется в список глобальных типов. Все остальные объекты в системе типов являются CURIEs формата:
<head prefix="my_namespace: https://example.com/ns#">
<meta property="og:type" content="my_namespace:my_type" />
Музыка
Простая информация о музыкальных объектах. Для каждого типа выполните следующие шаги, чтобы связаться с вашими пользователями:
- music.song - Длительность, альбом и музыканты.
- music.album - Связанные песни и информация об альбоме.
- music.playlist - Создание списков воспроизведения и их содержимое.
Видео
Запись информации обо всех видеоконтентах с такими же свойствами:
- video.movie - Актеры, режиссеры и т.д.
- video.episode - Для конкретного эпизода с такими же данными.
Без вертикали
Глобально определенные объекты, которые не вписываются в вертикаль.
- article - Информация о новых статьях, авторах и т.д.
- book - Информация о книге и ее авторах.
Обсуждение и поддержка
Вы можете обсудить протокол Open Graph в группе на Facebook* или в списке рассылки для разработчиков. Он активно используется Facebook*, Google, IMDb и многими другими.
Реализации
Сообщество с открытым кодом разработало множество парсеров и инструментов публикации. Напишите в группу Facebook*, если вы собрали что-то классное!
- Facebook Object Debugger - Официальный парсер от Facebook*.
- Google Rich Snippets Testing Tool - Поддержка протокола Open Graph для определенных вертикалей.
- WordPress plugin - Официальный плагин от Facebook* для добавления метаданных Open Graph на сайты на WordPress.
Советы по использованию Open Graph
1. Используйте качественные изображения
Изображения являются ключевым элементом, когда дело касается представления вашего контента в социальных сетях. Убедитесь, что вы используете высококачественные изображения с правильными размерами. Рекомендуемая минимальная ширина изображения — 1200 пикселей. Это обеспечит четкость и привлекательность при отображении.
2. Задавайте уникальные заголовки и описания
Уникальные и привлекательные заголовки и описания помогают привлечь внимание пользователей и увеличить вероятность кликов. Используйте og:title и og:description для краткого и яркого представления о вашем контенте.
3. Поддерживайте актуальность метаданных
Регулярно обновляйте и проверяйте свои метаданные. Если ваш контент изменился, сделайте обновление в разметке Open Graph. Это гарантирует, что пользователи видят актуальную информацию, что повышает доверие к вашему сайту.
4. Оптимизируйте для мобильных устройств
Все больше пользователей используют мобильные устройства для доступа в интернет. Поэтому убедитесь, что ваши страницы загружаются быстро и корректно отображаются на мобильных устройствах. Использование тегов Open Graph помогает обеспечить правильное отображение в мобильных версиях социальных сетей.
5. Проверяйте метаданные с помощью инструментов от Facebook*
Используйте Facebook* Sharing Debugger, чтобы проверить вашу мета-разметку. Этот инструмент поможет вам увидеть, как ваш контент будет отображаться в Facebook*, и сообщит о любых ошибках в разметке.
6. Используйте структурированные данные
Рассмотрите возможность добавления структурированных данных, чтобы помочь поисковым системам лучше понять ваш контент. Это может повысить видимость вашего сайта в результатах поиска и социальных медиа.
7. Следите за аналитикой
Анализируйте, как ваш контент справляется в социальных сетях. Уделяйте внимание метрикам, таким как клики и взаимодействия. Это поможет вам адаптировать ваш контент и стратегию для достижения лучших результатов.
* Соцсеть Facebook запрещена в РФ; она принадлежат корпорации Meta, которая признана в РФ экстремистской.