Open Graph на сайте: всё, что нужно знать разработчикам и контент-менеджерам

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

Open Graph – набор мета-тегов, который позволяет управлять тем, как страница сайта выглядит при публикации ссылки во внешних сервисах: социальных сетях, мессенджерах, корпоративных чатах. Протокол был предложен Facebook (запрещённая в РФ соцсеть) в 2010 году и быстро стал фактическим стандартом для формирования превью ссылок.

Как формируются превью ссылок

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

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

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

Почему без Open Graph плохо

Если не заполнить поля с OG-тегами при публикации, платформа использует собственные алгоритмы. Это значит, что:

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

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

В то же время корректное и визуально аккуратное превью повышает кликабельность (CTR). Пользователь быстрее понимает, куда ведёт ссылка и какой контент его ждёт. В некоторых проектах правильная настройка Open Graph также даёт заметный рост CTR, даже если контент остаётся прежним, без каких-либо изменений.

Базовый принцип работы OG

OG-теги размещаются внутри секции <head> HTML-документа и должны быть доступны при первом HTTP-запросе. На самой странице они не отображаются, но доступны для чтения внешними сервисами.

При стандартной OG-разметке для страницы используются следующие теги:

<meta property="og:type" content="website"/> - указывает тип контента на странице (например, article для статьи, video.movie для видео, product для товара или website для обычной страницы)
<meta property="og:locale" content="ru_RU"/>- определяет язык и региональные настройки контента (например, ru_RU для русского языка)
<meta property="og:site_name" content="Название сайта"/> - указывает название всего вашего сайта для лучшего брендирования
<meta property="og:title" content="Заголовок"/> - задает заголовок вашей ссылки в карточке публикации. Это один из важнейших элементов, привлекающих внимание
<meta property="og:url" content="URL-страницы"/> - задает канонический (основной) адрес страницы, на которую ведет ссылка
<meta property="og:description" content="Описание"/> - предоставляет краткое описание контента страницы, которое отображается под заголовком
<meta property="og:image" content="ссылка на изображение"/> - содержит URL-адрес изображения, которое будет использоваться в качестве превью к ссылке, а теги <meta property="og:image:width" content="1200"/> и <meta property="og:image:height" content="630"/> задают его размер.

При отсутствии OG-разметки платформы пытаются заменить её стандартными HTML-тегами (<title>, <meta name="description">) или извлекает данные из тела страницы. Какой может быть результат в таком случае, мы уже говорили.

Если же теги Open Graph присутствуют, они имеют приоритет над стандартными SEO-метаданными, поэтому стоит учитывать, что заголовок и описание в поисковике и в превью соцсетей будут разными.

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

Мессенджер Telegram формирует превью быстро, но кеширует его весьма агрессивно. Имеется в виду, что если OG-данные были изменены, то превью ещё долго может не обновляться. А при отсутствии OG-тегов Telegram пытается извлечь данные из контента страницы.

Для сброса кэша в каждом сервисе используется свой инструмент

Сброс кэша OG в Telegram

Переходим в бот @WebpageBot и вставляем ссылку на страницу сайта, где нужно сбросить кеш
Бот вернет сообщение с превью и двумя кнопками. Выбираем нужную и все готово.

Update preview again - сбрасывает кэш иконки (изображения)
Update with content - полностью сбрасывает кэш, включая иконку, заголовок, описание и другие Open Graph-теги

Сброс кэша OG в VK

Переходим по ссылке https://vk.com/dev/pages.clearCache и прокручиваем страницу в самый низ (перед этим нужно убедиться, что вы вошли в свой аккаунт) и заполняем поля

Если требует access_token, то лучше всего будет создать многоразовый токен, чтобы не создавать каждый раз новые через другие сервисы. Для этого:

переходим на страницу https://dev.vk.com/ru/admin/apps-list и создаем приложение
затем внутри приложения переходим по пути Разработка -> Ключи доступа. Здесь во вкладке “Сервисный ключ” находится нужный нам токен. Нажимаем на “Показать” и выбираем удобный способ подтверждения. После этого вставляем токен в access_token
если все данные заполнены правильно сервис вернет сообщение {"response":1}

Требования к изображениям Open Graph

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

Размер

Оптимальный формат, который наиболее корректно обрабатывается большинством платформ, – 1200×630 пикселей. Нижняя граница – около 600×315 пикселей. Однако стоит учитывать, что при использовании фотографий с минимальными значениями повышается вероятность некорректного отображения.

Другие важные требования к фотографиям для OG:

Соотношение сторон – приблизительно 1,91:1.
Поддерживаемые форматы – JPG, PNG, WEBP.
Вес – желательно до 1–2 МБ.
URL изображения должен быть абсолютным (с указанием протокола (https://), домена, пути к файлу).

Правильный URL: <meta property="og:image" content="https://example.ru/images/blog/preview.jpg">
Неправильный URL: <meta property="og:image" content="images/blog/preview.jpg">

Количество

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

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

Кеширование Open Graph: что это и почему возникают проблемы

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

Без принудительного обновления превью изменения могут не отображаться неделями.

Чтобы сбросить кеш, необходимо учитывать особенности платформы, для которой это делается.

ВКонтакте для обновления данных используется инструмент «Обновить информацию», куда передаётся URL страницы. После этого ВК повторно считывает OG-данные. Если обновление не сработало, есть один лайфхак: можно сменить URL изображения.

В Telegram как таковой инструмента сброса кеша официально отсутствует. Поэтому для здесь используются обходные методы:

изменение имени файла изображения,
добавление новых параметров к URL,
повторная отправка ссылки спустя время.

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

Проверка и отладка Open Graph

Корректность разметки проверяется с помощью специальных инструментов. Среди самых простых и наиболее популярных – OpenGraph.dev и Telegram Preview. Они позволяют быстро увидеть, как ссылка будет выглядеть в превью.

При отладке важно убедиться:

что URL доступен без редиректов;
изображение открывается напрямую;
используется HTTPS;
сервер возвращает корректный HTTP-ответ.

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

Перед публикацией желательно использовать чек-лист и проверять страницу в тестовых инструментах. Для примера можно ориентироваться на такой:

✔ OG-теги размещены в <head>
✔ Используются абсолютные URL
✔ Изображение ≥ 1200×630
✔ Формат JPG / PNG
✔ HTTPS
✔ og:url совпадает с canonical
✔ на страницах не используется noindex
✔ Проверено в VK / Telegram
✔ Кеш сброшен после правок

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