Что такое микроразметка Open Graph и как настроить превью ссылок

Когда ссылку на сайт отправляют во ВКонтакте или мессенджер, под ней появляется карточка с заголовком, описанием и картинкой. Что именно будет видно в этой карточке, определяет разметка Open Graph. Если ее нет, платформа сама выбирает, что показать, и часто подставляет логотип из шапки, обрывок меню или вообще выводит голый адрес.

Разметка занимает несколько строк кода, но от нее зависит, как сайт выглядит везде, где делятся ссылкой на вас. С 2024 года она к тому же входит в список источников, из которых Google формирует заголовки в поисковой выдаче.

Что такое Open Graph

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

Каждый тег состоит из свойства с префиксом og: и значения. Базовая разметка выглядит так:

<meta property="og:title" content="Как выбрать кондиционер для квартиры" />

<meta property="og:description" content="Разбираем мощность, тип и уровень шума, чтобы не переплатить за лишние функции." />

<meta property="og:image" content="https://site.ru/images/og/kondicioner.jpg&quot; />

<meta property="og:url" content="https://site.ru/blog/kak-vybrat-kondicioner/&quot; />

<meta property="og:type" content="article" />

Open Graph часто называют микроразметкой, хотя формально это словарь метаданных, а не разметка содержимого страницы, как например, Schema.org. Задачи у них разные. Schema.org описывает объекты на странице, например товар, организацию или рецепт, а Open Graph описывает саму страницу как объект, которым делятся.

Как появился протокол и что в нем менялось

Протокол представили на конференции разработчиков Facebook (сервис компании Meta, деятельность которой запрещена в России) f8 21 апреля 2010 года. В тот же день компания запустила кнопку «Мне нравится» для сторонних сайтов, и Open Graph был нужен именно для нее. Разметка сообщала соцсети, какую страницу отметил пользователь, как она называется и какую картинку показать в его профиле. Функция превью ссылок стала главной позже, когда протокол подхватили другие платформы.

Спецификация опубликована на сайте ogp.me и с тех пор почти не менялась. Менялось другое, а именно то, как платформы используют разметку.

Основные изменения за последние годы:

• 2023 год — X (бывший Twitter) перестал показывать заголовки в карточках ссылок, оставив только изображение и домен, поэтому картинка стала единственным носителем смысла превью в этой сети;
• 2024 год — Google добавил og:title в список источников для заголовков в результатах поиска наряду с тегом title и заголовком H1.

Насколько распространена разметка

По данным Web Almanac 2024, исследования HTTP Archive по миллионам сайтов, словарь Open Graph используется на 64% страниц. Это один из самых распространенных видов метаданных в интернете, он встречается чаще, чем JSON-LD с разметкой Schema.org, которая есть на 41% страниц.

Дополнительные теги встречаются на гораздо меньшем числе страниц. Размеры изображения через og:image:width и og:image:height указаны примерно на 24% страниц, тип файла на 11%, а текстовое описание картинки og:image:alt только на 5,8%. Большинство сайтов ограничиваются минимальным набором, который добавляет CMS по умолчанию, и не проверяют, как превью выглядит на самом деле.

Зачем Open Graph бизнесу

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

Задачи, которые решает Open Graph:

• контроль превью в соцсетях — во ВКонтакте, Одноклассниках и Дзене карточка ссылки собирается из тегов og:title, og:description и og:image;
• превью в мессенджерах — Telegram и другие мессенджеры показывают карточку по тем же тегам, когда ссылку отправляют в чат или канал;
• единый вид в репостах — клиенты и партнеры делятся ссылками на страницы компании, и разметка гарантирует одинаковое оформление;
• заголовки в Google — og:title стал одним из источников, по которым поисковая система выбирает заголовок сниппета;
• поддержка Яндексом — в справке Вебмастера Open Graph указан среди поддерживаемых видов семантической разметки вместе с Schema.org и микроформатами.

Обязательные теги

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

Текст в og:title и og:description не обязан совпадать с title и description, которые видит поисковик. Title для поиска составляют под запросы, поэтому он часто звучит сухо. В соцсетях человек не ищет, а листает ленту, и заголовок карточки должен зацепить его внимание. 

Дополнительные теги

Помимо обязательного набора, протокол поддерживает десятки уточняющих свойств. Объективно большинству сайтов нужны лишь некоторые из них. X читает значения из Open Graph, если на странице нет тегов twitter:title, twitter:description и twitter:image, поэтому для этой сети достаточно одного тега twitter:card.

Полезные дополнительные теги:

• og:site_name — имя компании или бренда в том виде, в каком его узнают клиенты, например «SEO Интеллект», а не адрес домена; ВКонтакте и ряд мессенджеров выводят его мелким шрифтом рядом с карточкой, и читатель сразу видит, чей это материал;
• og:locale — код языка и страны, по которому платформа понимает, для какой аудитории написан текст; для сайта на русском языке указывают ru_RU, а если у страницы есть версия на другом языке, ее перечисляют в отдельном теге og:locale:alternate;
• og:image:width и og:image:height — ширина и высота картинки в пикселях, для стандартного превью это 1200 и 630; зная размеры заранее, соцсеть сразу строит карточку правильной формы, и первый человек, который поделился ссылкой, не увидит пустое место вместо изображения;
• og:image:alt — короткая подпись к картинке, которая описывает, что на ней изображено; ее зачитывают экранные дикторы для незрячих пользователей, и она появляется вместо изображения, если файл не загрузился из-за медленного интернета;
• article:published_time и article:modified_time — дата выхода статьи и дата последней правки, записанные в формате ISO 8601, например 2026-09-22T10:00:00+03:00; по этим тегам платформы и агрегаторы определяют, насколько свежий материал;
• twitter:card — единственный тег, который нужен сети X отдельно от Open Graph; значение summary_large_image выводит картинку во всю ширину карточки, а без него X покажет крошечную миниатюру сбоку от текста.

Требования к изображению og:image

Картинка занимает большую часть карточки и основные требования предъявляются именно к ней. Размер 1200×630 пикселей с соотношением сторон 1,91 к 1 рекомендует документация Meta для разработчиков, и под него подстроились остальные платформы.

Правила подготовки изображения:

• размер — 1200×630 пикселей, изображения меньше 600×315 пикселей многие платформы не выводят крупной карточкой;
• формат — JPG для фотографий и PNG для графики с текстом, поскольку WebP и SVG поддерживаются не везде;
• адрес — абсолютный URL с протоколом HTTPS, который отдает файл напрямую, без редиректов и ограничений доступа;
• композиция — текст, логотип и лица размещают ближе к центру, так как разные площадки по-своему обрезают края;
• вес файла — в пределах нескольких сотен килобайт, чтобы превью быстро загружалось в мессенджерах;
• уникальность — для важных страниц готовят отдельную картинку, а общее изображение с логотипом оставляют как запасной вариант.

Как добавить разметку на сайт

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

Способы добавления разметки:

• WordPress — SEO-плагины Yoast SEO, Rank Math и All in One SEO формируют теги Open Graph и позволяют задать отдельные заголовок, описание и картинку для соцсетей в редакторе записи;
• Tilda — в настройках страницы в разделе SEO задаются заголовок, описание и изображение для соцсетей, а если картинку не указать, конструктор подставит первую подходящую со страницы;
• 1С-Битрикс — теги выводятся в шаблоне сайта, а значения берутся из свойств страницы или инфоблока, поэтому для корректной работы обычно нужна доработка шаблона программистом;
• самописный сайт или статичная страница — теги добавляют вручную в раздел head каждой страницы или в общий шаблон с подстановкой значений из базы данных.

Как проверить разметку

Проверку проводят в два этапа. Сначала проверьте, что теги есть в коде страницы и заполнены правильно, затем, как карточка выглядит на конкретных площадках. Соцсети и мессенджеры сохраняют превью после первого обращения к ссылке. Если картинку или заголовок поменяли, старая карточка может сохраняться в ленте и чатах. Помимо инструментов сброса, помогает изменение адреса картинки, например добавление к нему параметра вида ?v=2.

Инструменты проверки:

• исходный код страницы — сочетание клавиш Ctrl+U в браузере открывает код, где поиском по og: находят все теги Open Graph;
• валидатор Яндекса — инструмент в Яндекс Вебмастере распознает Open Graph, Schema.org, микроданные и RDFa и показывает ошибки;
• Telegram — бот @WebpageBot обновляет сохраненное превью ссылки, если теги изменили после первой публикации;
• ВКонтакте — достаточно вставить ссылку в поле создания записи и посмотреть на сформированную карточку до публикации;
• Sharing Debugger от Meta — показывает все распознанные теги и ошибки, хотя из России сервис доступен не всегда.

Частые ошибки

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

Возможные ошибки в разметке Open Graph:

• одна картинка на весь сайт — все страницы показываются в соцсетях с одинаковым логотипом, и публикации в ленте сливаются;
• относительный адрес изображения — путь вида /images/og.jpg вместо полного URL не распознается большинством платформ;
• изображение по HTTP или за редиректом — часть сервисов не загружает такие файлы и выводит карточку без картинки;
• og:url с параметрами — адрес с UTM-метками или страницей пагинации разбивает статистику репостов на несколько вариантов;
• дубли тегов — два разных og:image или og:title от темы и плагина одновременно;
• запрет в robots.txt — если каталог с картинками запрещен для роботов, соцсети не смогут получить изображение;
• пустые значения — теги присутствуют в коде, но шаблон не подставляет в них данные.

Open Graph и продвижение сайта

Open Graph относится к базовым техническим настройкам сайта, которые проверяются во время аудита вместе с мета-тегами, canonical и Schema.org. Специалисты «SEO Интеллект» проверяют и настраивают разметку в ходе SEO продвижения сайтов, а в разработке сайтов сразу закладывают ее в шаблоны страниц.

(*Meta признана экстремистской организацией и запрещена в России)