Facebook выпустил Open Graph в 2010 году, чтобы лучше отображать внешние веб-сайты на своей платформе. Для этого разработчики платформы социальных сетей создали интересную технологию Open Graph или Open Graph protocol (OGP), которая превращает веб-сайты в объекты, помогая пользователям платформы делиться контентом из внешних источников внутри сети. Это должно быть чрезвычайно полезно для многих операторов веб-сайтов — ведь большинство из них хотят повысить узнаваемость своего сайта.
После Facebook другие сети, такие как Twitter, LinkedIn и Xing, вскочили на волнорез, внедрив Open Graph. Сегодня этот протокол считается важным инструментом для веб-дизайна.
Как работает Open Graph от Facebook?
Когда пользователь делится веб-сайтом в социальных сетях, он должен каким-то образом отобразиться на платформе. Изображение предварительного просмотра и сопроводительный текст должны точно отражать сайт и побуждать других пользователей посетить его. Веб-дизайнеры используют Open Graph, чтобы избежать простого отображения случайного контента с сайта в качестве предварительного изображения.
Веб-дизайнеры могут вставлять теги Open Graph в исходный код сайта, чтобы управлять тем, как предварительный просмотр выглядит в социальной сети. Это также делает Open Graph полезным для онлайн-маркетинга, поскольку протокол дает создателям контента больше контроля над тем, как отображается их общий контент, и лучше подготавливает информацию для пользователей.
Соответствующие теги размещаются в заголовке HTML-документа как мета-свойства:
<meta property="og:title" content="Website title as it should appear on Facebook."/>Сначала вы определяете тип тега, а затем присваиваете ему значение или содержание.
Twitter ввел свои собственные теги. Однако если бот Twitter не находит эти теги при поиске страницы, он также использует Open Graph.
Прежде чем вставлять различные мета-свойства, необходимо определить словарь в префиксе.
<html prefix="og: http://ogp.me/ns#">За ним следует заголовок документа.
Наиболее важные теги Open Graph
Существует множество тегов Open Graph, которые могут быть размещены на сайте, самые важные из них описаны ниже. Эти теги должны быть размещены на любом сайте, которым предполагается делиться в социальных сетях.
Заголовок
Какой заголовок должен отображаться в социальных сетях, когда сайтом делятся в них? В теге title можно указать название. Для Facebook этот заголовок не должен превышать 95 символов. Примерно через 50 символов делается перенос строки. Это также влияет на то, как пользователи реагируют на отображаемое превью.
<meta property="og:title" content="Website title"/>В любом случае, все веб-страницы имеют свои собственные теги title, которые влияют на то, как они отображаются, то есть в веб-браузерах или поисковых системах. Технически, этот заголовок может быть снова использован в теге Open Graph, но протокол Facebook также позволяет операторам веб-сайтов определять альтернативный вариант, который лучше подходит для социальных сетей. Например, адаптированная альтернативная версия может больше соответствовать длине символов, предоставляемой Facebook, чем стандартный тег, используемый для поисковых систем. Альтернативный тег заголовка также позволяет лучше адаптировать заголовок для целевой группы социальных сетей.
Описание
Описание также является неотъемлемой частью каждого HTML-документа. Используя соответствующий тег Open Graph, веб-дизайнеры могут адаптировать описание контента для социальных сетей. Facebook устанавливает длину примерно в 300 символов. В зависимости от заголовка или URL-адреса эта длина может быть меньше, поэтому на всякий случай следует ограничиться максимум 200 символами.
<meta property="og:description" content="Website description"/>В отличие от HTML-описания, альтернатива Open Graph не имеет отношения к SEO. Ключевые слова здесь не важны.
Изображение
Помимо заголовка и описания, предварительный просмотр сайта также включает изображение. Используя тег Open Graph, операторы сайта могут предотвратить использование Facebook и другими платформами социальных сетей любого случайно выбранного изображения со страницы. В противном случае все может пойти не так — например, вместо реального изображения со страницы может быть использовано изображение из рекламного баннера.
<meta property="og:image" content="http://www.example.org/images/preview.jpeg" />Рекомендуется разрабатывать изображение специально для предварительного просмотра, чтобы на него кликнули как можно чаще. Поэтому следует учитывать как содержание изображения, так и его формат. Сочетание текста с изображениями доказало свою эффективность. При этом текст следует располагать по центру, поскольку Facebook может обрезать изображение. Лучше всего использовать формат 1200 x 627 пикселей. При использовании такого размера Facebook будет отображать изображение поверх заголовка и описания. При использовании меньшего формата изображение может перемещаться рядом с текстом в виде миниатюры.
Вы можете добавить дополнительную информацию в тег изображения, чтобы обеспечить наилучшее отображение:
<meta property="og:image" content="http://www.example.org/images/preview.jpeg" />
<meta property="og:image:secure_url" content="https://www.example.org/images/preview.jpeg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
<meta property="og:image:alt" content="A tropical waterfall" />- secure_url: Это хорошая альтернатива для случаев, когда сайт требует HTTPS.
- type: Медиатипом для изображения всегда является «image», но в этой строке также указывается используемый формат. (IANA составила список всех доступных медиатипов).
- width: Эта строка указывает другому сайту ширину изображения в пикселях.
- height: Эта строка указывает другому сайту высоту изображения в пикселях.
- alt: Текст alt из HTML отображается в качестве описания изображения, если изображение предварительного просмотра не может быть отображено.
URL
Тег URL определяет веб-адрес сайта, к которому предоставляется общий доступ. Это может показаться излишним, поскольку URL уже известен. Однако некоторые операторы веб-сайтов имеют несколько URL-адресов для одного и того же содержимого. Это можно использовать, например, для улучшения отслеживания. Тег Open Graph гарантирует, что ссылка на правильный веб-сайт будет всегда.
<meta property="og:url" content="http://www.example.org/articles/id3498/" />Facebook не отображает полный URL-адрес в предварительном просмотре. Он отображает только доменное имя.
Тип
Тип указывает на то, что на самом деле представляет собой содержимое. Для большинства веб-сайтов подходят типы «веб-сайт», «блог» или «статья». Однако существуют и другие варианты:
- сайт
- статья
- блог
- профиль
- книга
- видео
- видео.фильм
- видео.эпизод
- видео.тв_шоу
- видео.другое
- музыка
- музыка.песня
- музыка.альбом
- музыка.плейлист
- музыка.радиостанция
Чтобы правильно использовать тип музыки, Facebook должен сначала одобрить оператора сайта. В их белый список входят в основном крупные компании, такие как Spotify.
Вы можете встретить и другие типы, которые можно найти в списке на сайте schema.org. Все типы, представленные в этой статье, можно найти на официальном сайте Open Graph.
Многие типы позволяют вносить дополнительные характеристики, которые перечисляются в виде отдельных мета-свойств после определения типа. Ниже вы найдете пример статьи с дополнительными спецификациями. Дополнительные спецификации для других типов можно посмотреть на сайте Open Graph.
<meta property="og:type" content="article">
<meta property="article:published_time" content="2019-04-25">
<meta property="article:section" content="Multimedia">В приведенном выше примере код не просто сообщает социальным сетям, что объект является статьей. Он также указывает, когда статья была опубликована и к какой категории она относится.
Обзор тегов Open Graph
Существует еще больше тегов Open Graph, которые можно поместить в исходный код вашего сайта в дополнение к самым важным, описанным выше. Они позволяют еще больше адаптировать ваш контент для социальных сетей.
Каждый тег Open Graph включает в себя контент, который должен быть отображен в нужном месте в социальной сети — и это должно быть сделано в правильном формате. Например, тег og:title содержит одно или несколько слов, то есть строку. Кроме того, вы также можете использовать следующие значения:
- Boolean: Представляет собой истинное или ложное значение (true, false, 1, 0).
- DateTime: временное значение даты (год, месяц, день или yyyy-mm-dd) и времени (часы, минуты, секунды или hh:mm:ss).
- Enum: Набор постоянных значений (например, мужчина, женщина).
- Float: 64-битное знаковое число с плавающей точкой
- Целое число: 32-битное знаковое целое число
- Строка: Последовательность символов Unicode
- URL: Рабочий URL-адрес, использующий протокол HTTP или HTTPS.
- Массив: Набор значений
| Тег | Описание | Содержание |
|---|---|---|
| og:title | Название сайта | Строка |
| og:determiner | Грамматический артикль перед заголовком | Enum |
| og:description | Описание сайта | Строка |
| og:site_name | Имя, которое должно отображаться для сайта в целом | Строка |
| og:url | Канонический URL | URL |
| og:locale | Страна и язык | Строка (язык_ТЕРРИТОРИЯ) |
| og:locale:alternate | Альтернативная страна | Массив |
| og:type | Тип содержимого | Строка |
| og:image | Источник изображения | URL |
| og:image:secure_url | Альтернативный безопасный URL (HTTPS) | URL |
| og:image:type | Тип носителя изображения | Строка |
| og:image:width | Ширина в пикселях | Целое число |
| og:image:height | Высота в пикселях | Integer |
| og:image:alt | Альтернативный текст для изображения | Строка |
| og:audio | Источник аудиофайла | URL |
| og:audio:secure_url | Альтернативный безопасный URL (HTTPS) | URL |
| og:audio:type | Тип медиафайла аудиофайла | Строка |
| og:audio:alt | Альтернативный текст для аудиофайла | Строка |
| og:video | Источник видео | URL |
| og:video:secure_url | Альтернативный безопасный URL (HTTPS) | URL |
| og:video:type | Тип видеоносителя | Строка |
| og:video:width | Ширина видео в пикселях | Целое число |
| og:video:height | Высота видео в пикселях | Integer |
Теги Open Graph для различных типов объектов:
| Тег | Описание | Содержание |
|---|---|---|
| музыка:продолжительность | Продолжительность песни в секундах | Целое число (>=1) |
| музыка:альбом | Альбом, с которого записана песня | Массив (music.album) |
| музыка:альбом:диск | Диск (CD, пластинка), на котором записана песня | Целое число (>=1) |
| музыка:альбом:трек | Номер трека песни в альбоме | целое число (>=1) |
| музыка:музыкант | Имя музыканта | Массив (профиль) |
| музыка:песня | Название песни в альбоме | Строка (music.song) |
| музыка:песня:диск | Диск (CD, пластинка), на котором записана песня | Целое число (>=1) |
| музыка:песня:трек | Номер трека песни в альбоме | Integer (>=1) |
| music:release_date | Дата выхода альбома | DateTime |
| музыка:создатель | Создатель плейлиста или радиостанции | Массив (профиль) |
| видео:актёр | Актер фильма | Массив (профиль) |
| видео:актер:роль | Роль актера | Строка |
| видео:режиссёр | Режиссер фильма | Массив (профиль) |
| видео:сценарист | Сценарист фильма | Массив (профиль) |
| видео:продолжительность | Продолжительность фильма в секундах | Целое число (>=1) |
| video:release_date | Дата выхода фильма | DateTime |
| видео:тег | Ключевые слова для видео | Массив (строка) |
| видео:серия | Серия, из которой снят эпизод | Строка (video.tv_show) |
| article:published_time | Дата публикации статьи | DateTime |
| article:modified_time | Когда статья была изменена в последний раз | DateTime |
| article:expiration_time | Дата истечения срока действия статьи | DateTime |
| статья:автор | Автор статьи | Массив (профиль) |
| статья:раздел | Категория статьи | Строка |
| статья:тег | Ключевые слова для статьи | Массив (строка) |
| книга:автор | Автор книги | Массив (профиль) |
| book:isbn | ISBN книги | Строка |
| book:release_date | Дата публикации книги | DateTime |
| book:tag | Ключевые слова для книги | Массив (строка) |
| профиль:имя_человека | Имя человека | Строка |
| профиль:фамилия | Фамилия человека | Строка |
| профиль:имя пользователя | Имя пользователя человека | Строка |
| профиль:пол | Пол человека | Enum |
Как использовать Open Graph: Пример кода
В следующем примере показан очень простой HTML-документ, подготовленный для социальных сетей с использованием тегов Open Graph:
<!DOCTYPE html>
<html>
<html prefix="og: http://ogp.me/ns#">
<head>
<title>First Article</title>
<meta property="og:type" content="article">
<meta property="og:title" content="My first article">
<meta property="og:description" content="This is a very cool article.">
<meta property="og:site_name" content="Our Website">
<meta property="og:url" content="http://www.example.org/ogp_test.html">
<meta property="og:image" content="http://www.example.org/teddy.png">
<meta property="og:image:type" content="image/jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
<meta property="og:image:alt" content="A teddy bear" />
<meta property="article:published_time" content="2019-04-25">
<meta property="article:author" content="Carl">
</head>
<body>
<h1>My First Article</h1>
<p>This is a test.</p>
</body>
</html>В тегах Open Graph были определены тип документа (т.е. статья), заголовок, описание, URL и подходящее изображение. Дополнительная информация также предоставляется как для статьи, так и для изображения.
Вам не нужно ждать, пока вашим контентом поделятся, чтобы проверить, правильно ли код считывается Facebook. Facebook предоставляет инструмент под названием Sharing Debugger, который проверяет исходный код на наличие проблем и отображает всю собранную информацию. Он также показывает, как предварительный просмотр будет отображаться на Facebook.
Чтобы воспользоваться отладчиком, достаточно иметь учетную запись Facebook. Однако проверяемый сайт должен быть уже доступен в сети.