Протокол Open Graph: Зачем он необходим и как его использовать

Что такое Open Graph и его значение

Open Graph — это стандарт микроразметки, который позволяет формировать визуальные анонсы при добавлении ссылок на сайты в социальных сетях. С его помощью можно настроить, какое изображение, заголовок и описание будут отображены в превью ссылки. Этот протокол был разработан Facebook, но сейчас активно используется в различных соцсетях и мессенджерах: ВКонтакте, Twitter, Telegram и других.

Зачем необходима микроразметка?

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

Преимущества использования Open Graph

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

Ключевые мета-теги Open Graph

Протокол состоит из ряда мета-тегов, которые добавляются в <head> вашего HTML-кода. Рассмотрим основные из них:

og:title — заголовок страницы;
og:description — описание страницы;
og:image — ссылка на изображение;
og:type — тип контента (например, «article»);
og:url — URL страницы.

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

<html>
<head>
  <title>Заголовок страницы</title>
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://example.com/page">
  <meta property="og:title" content="Заголовок">
  <meta property="og:description" content="Описание">
  <meta property="og:image" content="https://example.com/image.jpg">
</head>
<body>
</body>
</html>

Управление изображениями для соцсетей

Разные соцсети имеют свои требования к размерам изображений. Рекомендуется создавать отдельные изображения для каждой платформы и использовать теги vk:image, fb:image, twitter:image для их указания.

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

Ошибки в коде могут привести к некорректному отображению превью. Рекомендуется проверять разметку с помощью специальных валидаторов.

Сервисы и плагины для работы с Open Graph

Существует множество инструментов для автоматического создания и проверки кода Open Graph. Вы можете использовать генераторы мета-тегов, плагины для CMS или сервисы для аудита страниц.