Согласно отчету Global Digital 2023, сегодня почти 60% населения мира пользуются социальными сетями, что делает этот источник трафика привлекательным для любого владельца сайта. Для эффективной работы с социальными сетями важно не только знать, что такое разметка Open Graph (сокращенно OG), но и грамотно с ней работать. На этой странице вы узнаете всё о разметке Open Graph, и получите практически советы для реализации разметки на вашем сайте. 

Что такое разметка Open Graph

Лучше один раз увидеть, чем три раза прочитать. Поэтому начнем с примера – как выглядят данные при шаринге ссылки в социальных сетях, например, страница Яндекс.Погода при шаринге в Facebook:

Как вы видите из примера, соцсеть по ссылке на определенную страницу подтягивает данные:

• Заголовок
• Описание
• Картинку

Вы можете прямо сейчас проверить свой сайт, как именно социальные сети обрабатывают информацию, в официальном инструменте Facebook – Sharing Debugger:

Проверить можно и в других соцсетях или мессенджерах, например, отправив ссылку самому себе в Телеграме:

Вся эта красота при шаринге работает на базе разметки Open Graph, которая изначально была создана Facebook, а сегодня является стандартом для большинства соцсетей и мессенджеров. Вот неполный список, где поддерживается OG разметка:

• VK
• WhatsApp
• Telegram
• Facebook
• Twitter

OG разметку поддерживают не только соцсети и мессенджеры, но и некоторые другие платформы. Например, Google AdSense, где из OG разметки подтягиваются данные для рекомендуемого контента.

Продолжая пример с шарингом страницы в Facebook, в коде данные выглядят следующим образом:

<meta property=”og:description” content=”Подробный прогноз погоды для Праги на сегодня, завтра, неделю, 10 дней, месяц на Яндекс.Погоде. Прогноз погоды в Праге с точностью до района”/>

<meta property=”og:site_name” content=”Яндекс.Погода”/>

<meta property=”og:image” content=”/pogoda/static/og_image.jpeg”/>

<meta property=”og:image:type” content=”image/png”/>

Опытному вебмастеру этот код очень напомнит код обычных метаданных для поисковых сетей. Сам смысл Open Graph разметки схож с мета-данными для поисковых систем – вы предварительно заполняете информацию, которую хотите отражать при шаринге. 

Если на вашем сайте отсутствует OG разметка, то при шаринге в некоторых соцсетях данные подтянутся из обычных мета-данных, например, описание страницы – из поля name=”description”. 

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

Зачем нужна разметка Open Graph 

Разметка Open Graph делает шаринг в соцсетях и мессенджерах не только красивым, но и более эффективным. 

Используя специальную картинку, продающий текст или CTA фразу, вы можете повлиять на конверсию из показов вашего шаринга в клики. Например, авиакомпания сейчас через шаринги в соцсетях распространяет промокод:

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

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

Кроме того, отсутствие OG данных может приводить к ошибкам при шаринге вашей аудиторией. Что особенно важно для сайтов, которыми действительно делятся в соцсетях. Пренебрегать соцсетями не стоит даже для небольших сайтов, корректная настройка OG разметки может дать свои результаты. Например, сайт в нише “Туризм” за прошедшие 365 дней, где на соцсети приходится около 7% от общего трафика:

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

Например, описание одной страницы для разных задач:

• Для поисковых систем: Купить сплит-систему в Москве по низким ценам напрямую от производителя с бесплатной доставкой и установкой. 
• Для социальных сетей: Успейте заказать сплит-систему до 31.08 со скидкой до 27%. Установка за 1 день. Гарантия до 10 лет. 

В метаданных для поисковиков используются нужные ключи, а в OG данных – более “кликбейтную” информацию, чтобы повысить конверсию из показов в клики. У вас может быть иной подход к формированию данных, но информация для поисковых систем, и для социальных сетей и мессенджеров, чаще всего, решает разные задачи.

При использовании Open Graph разметки информация может отличаться не только от мета-данных для поисковых систем, но и отличаться для каждой конкретной социальной сети или мессенджера. Например, шаринг во Вконтакте и в Телеграме может иметь различный текст, адаптированный под конкретную аудиторию. 

Как реализовать Open Graph разметку на сайте

Если ваш сайт работает на WordPress или на другой популярной CMS, то реализацию можно доверить готовым плагинам. Например, для WordPress:

• Open Graph Protocol Framework – специализированный плагин
• Rank Math SEO – комплексный SEO плагин, OG разметка одна из составляющих
• All in One SEO – комплексный SEO плагин, OG разметка одна из составляющих

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

• og:title – тег отвечает за заголовок, здесь может быть как полная копия тега <title>, так и любой другой короткий текст
• og:type – разметка OG универсальна для разных платформ, поэтому при передаче информации необходимо указать тип вашего проекта. Для сайта этот параметр статичен – “website”. С другими типами вы можете ознакомиться в официальной справке. 
• og:image – ссылка на изображение, которое будет выводиться при шаринге в социальных сетях. 
• og:url – URL-адрес текущей страницы.
• og:description – короткое описание содержимого страницы.

Это 5 базовых параметров, которые должны при шаринге любой страницы. Вы можете существенно кастомизировать данные, используя дополнительные теги. Например:

• og:video – вы можете отражать при шаринге видео вместо статичного изображения.
• og:locale – актуально для мультиязычных сайтов, если вы хотите, чтобы при шаринге определенного языка подтянулись данные на нужном языке.
• og:site_name – выводит общее название сайта (в дополнение к заголовку конкретной страницы, например, “Блог о технике”) 

Обратите внимание, что не все соцсети и не все мессенджеры поддерживают все теги. Например, в Фейсбуке не работает видео при шаринге, когда в Телеграмме его можно без проблем добавить. Кроме того, дополнительные параметры поддерживаются лишь некоторыми тегами, например, для картинок можно задать размеры шаринга:

• og:image:width — пиксели в ширину; 
• og:image:height — пиксели в высоту;

С полным списком тегов, а также с корректным заполнением данных, вы можете ознакомиться в официальной документации по Open Graph разметке, она доступна на разных языках:

• Английский
• Русский

У некоторых соцсетей и мессенджеров также имеется собственная документация по разметке. Например, документация для VK, Facebook или Twitter. 

На разных платформах поддерживаются ограниченное количество тегов, а также действуют свои требования для текста и картинок для шаринга. “Золотым стандартом” картинок можно считать размер 1600 на 900 пикселей, но лучше адаптировать картинку по требованиям конкретной соцсети. Например, добавив для Твиттера собственную картинку для шаринга:

<meta name=”twitter:image” content=”https://www.blog.com/image.png” />

OG разметка на WordPress сайте

Список лучших плагинов для OG разметки на WordPress сайте мы привели выше, рассмотрим реализацию с помощью плагина All in One SEO в бесплатной версии. 

В этом плагине существует два уровня настройки: глобальный (для всего сайта) и точечный (для конкретной страницы).

Глобальные настройки расположены на странице плагина в вашей панели администратора во вкладке All in One SEO –> Соцсети:

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

OG разметка каждой отдельной страницы устанавливается при создании или редактировании конкретной страницы, например:

Вы можете задать OG данные для каждой соцсети отдельно. Если информацию не заполнить, данные подтянутся согласно вашим глобальным настройкам плагина All in One SEO. 

Стоит ли использовать Open Graph в 2023 году?

В 2023 году невозможно пренебрегать социальными сетями и мессенджерами. Важно быть там, где ваша потенциальная аудитория, и разметка Open Graph поможет сделать это максимально эффективно. 

Благодаря Open Graph вы сможете:

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

Так как Open Graph используется не только в соцсетях и мессенджерах, а еще в Google Adsense и других платформах, реализация OG разметки поможет решить и другие задачи. 

Благодаря наличию готовых решений для WordPress и других популярных CMS, а также относительной простоте реализации в случае с самописными сайтами, реализация OG разметки – задача посильная для большинства.

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