Каждая ссылка на ваш сайт, отправленная в чат или соцсеть, — это мини-реклама страницы. Если вместо аккуратной карточки с картинкой, заголовком и описанием получатель видит голый URL или случайный фрагмент текста, доверие падает ещё до перехода. Исправить это можно с помощью Open Graph-разметки — нескольких HTML-тегов, которые подсказывают мессенджерам, что именно показывать в превью. В статье разберём, как это устроено, какие требования у Telegram, WhatsApp и соцсетей и какие ошибки чаще всего допускают владельцы сайтов.
Что такое OG-разметка и зачем она бизнесу
Open Graph — протокол, который Facebook представил в 2010 году, а сегодня его поддерживают Telegram, WhatsApp, ВКонтакте и большинство других площадок. Когда пользователь отправляет ссылку, бот сервиса загружает страницу, считывает эти теги из служебной части документа и собирает карточку: изображение, заголовок, описание и адрес. Без OG-тегов мессенджер выбирает картинку и текст на своё усмотрение — и часто выбирает неудачно: логотип из подвала, случайную иконку или пустое место. По опыту маркетологов, аккуратное превью повышает кликабельность ссылок в разы по сравнению с «голым» URL. Плюс это работает на бренд: карточка с фирменной картинкой и понятным заголовком заметна в переписке даже без перехода.
Минимальный набор тегов для любой страницы
Базовая разметка состоит из шести тегов, которые размещаются в блоке «head» каждой страницы. Вот что они означают:
- og:title — заголовок карточки, до 60–70 символов, может отличаться от основного title страницы;
- og:description — описание в 1–2 строки, до 150–160 символов, с понятной выгодой для читателя;
- og:image — картинка превью, обязательно полный адрес с https://;
- og:url — канонический адрес страницы без UTM-меток и лишних параметров;
- og:type — тип контента: website для главной, article для статей, product для товаров;
- og:site_name — название сайта или бренда.
Этого набора достаточно, чтобы карточка выглядела аккуратно в большинстве сервисов. Для отдельных площадок добавляются свои теги — о них ниже.
Картинка превью: размеры и требования
Стандартный размер превью — 1200×630 пикселей (соотношение сторон 1,91:1), минимум, который принимают площадки, — 600×315. Формат — JPEG или PNG: WebP и SVG боты поддерживают нестабильно и могут просто не показать изображение. Для WhatsApp важно, чтобы файл весил не больше 300 КБ, поэтому сжимайте картинку без заметной потери качества. Текст на изображении делайте крупным: на смартфоне превью занимает лишь часть экрана, и мелкие надписи станут нечитаемыми. И избегайте важных деталей по краям — площадки кадрируют картинки по-своему.
Нюансы популярных мессенджеров и соцсетей
У каждой площадки есть свои особенности, которые стоит знать заранее:
- Telegram — читает стандартный Open Graph; если превью устарело, кэш сбрасывается через официального бота @webpagebot;
- WhatsApp — самый требовательный: нужны https, абсолютный путь к картинке и вес файла до 300 КБ; превью не появится, если разметка формируется скриптом в браузере;
- ВКонтакте — поддерживает Open Graph, а для статей и товаров подхватывает дополнительные поля вроде автора и цены;
- X (Twitter) — помимо OG использует собственные теги twitter:card; для крупных превью указывайте значение summary_large_image.
Из-за этих различий одну и ту же ссылку стоит проверить минимум в Telegram, WhatsApp и VK — карточка может собираться по-разному.
Частые ошибки, из-за которых превью не работает
Если карточка отображается «криво» или не появляется вовсе, чаще всего причина в следующем:
- относительный путь к картинке (например, /images/cover.jpg) вместо полного URL с доменом;
- ссылка на изображение по http вместо https или смешанный контент на странице;
- теги подставляются JavaScript-ом — боты мессенджеров не исполняют скрипты;
- изображение слишком «тяжёлое» или в формате WebP/SVG;
- несколько тегов og:image на странице — бот берёт первый попавшийся;
- заголовок и описание не совпадают с содержимым страницы — клики есть, а доверия нет.
Кэширование: почему превью не обновляется после правок
Мессенджеры сохраняют превью при первой загрузке и дальше показывают сохранённую копию — так они экономят время и не нагружают ваш сайт. Поэтому если вы поменяли картинку или заголовок, а в чате по-прежнему старая версия, дело почти всегда в кэше, а не в ошибках разметки. Сбросьте его: в Telegram — через @webpagebot, в WhatsApp и Facebook — кнопкой «Scrape Again» в Sharing Debugger, во ВКонтакте карточка обычно обновляется при следующей отправке ссылки. Отправляйте проверочную ссылку в чат самому себе — это быстрее, чем гадать, подтянулись ли изменения.
Технические нюансы: SPA, интернет-магазины, динамические страницы
Если сайт собран на React, Vue или другом фреймворке и рендерится в браузере, мета-теги всё равно должны приходить с сервера — иначе боты увидят пустую страницу. Для этого используется серверный рендеринг (SSR) или генерация тегов на бэкенде. Интернет-магазинам нужна динамическая разметка: у каждой карточки товара — своё og:title с названием и ценой, своя картинка и описание, иначе все товары в переписках выглядят одинаково. Следите и за og:url: он должен вести на канонический адрес без параметров, чтобы площадки не путали версии страницы. Такая доработка обычно занимает у разработчика несколько часов.
OG-разметка — одна из самых дешёвых доработок с заметным эффектом: настройка занимает несколько часов, а работает годами на каждый чат, рассылку и репост. Короткий чек-лист: задайте базовые og-теги на всех шаблонах, подготовьте картинку 1200×630 и весом до 300 КБ, проверьте превью в отладчиках и настройте сброс кэша. Если сайт для вас делает подрядчик — включите эти требования в ТЗ: для веб-студии настройка OG — стандартная задача. А если хотите привести в порядок разметку на действующем сайте — напишите нам: проверим ключевые страницы и доведём карточки до аккуратного вида во всех популярных мессенджерах.