OpenGraph. Что это и для чего нужен.

Что такое OpenGraph ECF6FC

OpenGraph (OG) – это набор протоколов метаданных, разработанный Facebook, который позволяет определить, как информация будет представлена при ее публикации в социальных сетях. OpenGraph теги встраиваются в HTML-код веб-страницы и содержат информацию о заголовке, описании, изображениях и других атрибутах страницы.

Пример представления записи в facebook:

C OG

Без OG

Из данного примера мы видим, что с использованием OpenGraph, запись выглядит привлекательно и структурированно, чем без него. Следовательно, больше вероятности того, что пользователь обратит внимание на такой пост.

Примечание

Использовать ли нижеперечисленные теги решать вам.

Список тегов OG

Cписок основных тегов, которые можно использовать для определения метаданных на странице:

  1. og:title – Заголовок страницы.
  2. og:type – Тип контента страницы (например, “website”, “article”, “video”).
  3. og:url – url страницы.
  4. og:image – url изображения, связанного с контентом страницы. Дополнительные метатеги og:image:width и og:image:height, задают высоту и ширину изображения.
  5. og:description – Описание контента страницы.
  6. og:site_name – Название вашего веб-сайта.
  7. og:locale – Языковая локализация контента (например, “en_US”).
  8. og:article:published_time – Дата и время публикации статьи.
  9. og:article:author – Автор статьи.
  10. og:article:section – Раздел, к которому относится статья.

Одинаковый для всех? Нет!

Большая часть соц. сетей, такие как Facebook, ВКонтакте, LinkedIn, Pinterest и другие используют OG, за исключение того, что они могут использовать свои дополнительные метатеги. Поэтому, если вы ориентируетесь на ту или иную соц. сеть, всегда обращайтесь к официальной документации. Вот, например, документация Pinterest по OpenGraph.

Пример базового набора OG метаданных, который обычно используется:

<meta property="og:locale" content="ru_RU">
<meta property="og:type" content="website">
<meta property="og:title" content="Заголовок страницы">
<meta property="og:description" content="Краткое описание страницы">
<meta property="og:image" content="URL изображения">
<meta property="og:url" content="URL страницы">

Также есть соц. сети которые не используют OG, либо используют свои форматы представления метаданных.

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

А вот Twitter использует свои собственные форматы метаданных для представления контента – Twitter Cards.

“OpenGraph” для Twitter – Twitter Cards

Cписок наиболее часто используемых метатегов Twitter Cards, которые обеспечивают базовую информацию о странице или контенте, включая заголовок, описание, изображение и связанные аккаунты Twitter:

  1. twitter:card – тип карты Twitter (например, “summary” или “summary_large_image”).
    – “summary” используется, когда у вас есть краткое описание контента, и вы не хотите показывать большое изображение в карточке Twitter. Этот тип карты обычно используется для статей, блогов, новостей и прочего подобного контента.
    – “summary_large_image” используется, когда у вас есть краткое описание контента, а также значительное изображение, которое вы хотите показать в карточке Twitter. Этот тип карты обычно используется для страниц с фотографиями, изображениями, изображениями товаров и прочего визуально контента.
  2. twitter:title – заголовок страницы или контента.
  3. twitter:description – описание страницы или контента.
  4. twitter:image – URL изображения, связанного с контентом.
  5. twitter:url – URL страницы или контента.
  6. twitter:site – Twitter-аккаунт сайта.
  7. twitter:creator – Twitter-аккаунт автора контента.

Где размещается в html разметке

Обычно теги OpenGraph размещаются внутри секции <head> вашей HTML-страницы.

Пример размещения тегов OpenGraph:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Заголовок страницы</title>

  <!-- Мета-теги OpenGraph -->
  <meta property="og:title" content="Заголовок страницы">
  <meta property="og:description" content="Описание страницы">
  <meta property="og:image" content="URL_изображения">
  <meta property="og:url" content="URL_страницы">
  <!-- end Мета-теги OpenGraph -->

</head>
<body>
  <!-- Содержимое страницы -->
</body>
</html>

Готовый шаблон. Бери внедряй!

Очень часто на практике распространено, что метатеги og:title, og:description и twitter:title, twitter:description заполняются, либо динамически подставляются такими же данными как title и description веб-страницы. Если же мы рассматриваем использование CMS(движок) сайта, то для них существуют плагины, которые делают это автоматически. Например плагин для WordPress – Yoast SEO.

Как заполнять метатеги

  • og:title, og:description и twitter:title, twitter:description.
    На практике распространено, что данные метатеги заполняются, либо динамически подставляются такими же данными как title и description веб-страницы.
<head>
  <title>Заголовок страницы</title>
  <meta name="description" content="Описание страницы">

  <!-- Метатеги OpenGraph -->
  <meta property="og:locale" content="ru_RU">
  <meta property="og:type" content="website">
  <meta property="og:title" content="Заголовок страницы">
  <meta property="og:description" content="Описание страницы">
  <meta property="og:image" content="URL_изображения">
  <meta property="og:url" content="https://site.ru/post-1/">
  <meta property="og:site_name" content="Название сайта" >

  <!-- Метатеги Twitter Cards -->
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="Заголовок страницы">
  <meta name="twitter:description" content="Описание страницы">
  <meta name="twitter:image" content="URL_изображения">

</head>