Что такое Open Graph
Open Graph — протокол мета-тегов, по которому соцсети и мессенджеры строят карточку ссылки: картинку, заголовок и описание. Когда клиент пересылает ссылку на ваш товар в Telegram или менеджер отправляет её в WhatsApp, площадка заходит на страницу, читает теги og:* и рисует превью. Если тегов нет, площадка пытается угадать: берёт первую попавшуюся картинку (часто логотип или иконку), обрезанный title и случайный кусок текста — или не показывает превью вовсе.
Хорошая карточка заметно повышает кликабельность ссылок в переписке, постах и рассылках. Это один из самых дешёвых способов улучшить конверсию трафика из соцсетей: теги прописываются один раз в шаблоне, а работают на каждой пересылке.
Обязательные и полезные теги
| Тег | Зачем | Рекомендация |
|---|---|---|
| og:title | Заголовок карточки | До 60–70 символов, можно короче и «человечнее», чем title для поиска |
| og:description | Текст под заголовком | 1–2 предложения, до ~200 символов; выгода, а не набор ключей |
| og:image | Картинка превью | 1200×630 px, JPG или PNG, до нескольких мегабайт, абсолютный https-адрес |
| og:url | Канонический адрес страницы | Без UTM-меток — чтобы лайки и репосты собирались на одном адресе |
| og:type | Тип объекта | website для большинства страниц, article для статей |
| og:site_name, og:locale | Название сайта и язык | ru_RU для русскоязычных страниц |
| twitter:card | Формат карточки в X (Twitter) и ряде клиентов | summary_large_image для крупной картинки |
Какой должна быть картинка
- Размер 1200×630 пикселей (пропорции примерно 1.91:1). Это универсальный формат: его корректно показывают Telegram, VK, мессенджеры и большинство соцсетей.
- Важное — в центре. Разные площадки по-разному обрезают края; текст и логотип держите в безопасной зоне по центру.
- Крупный текст или без текста вовсе. На телефоне превью занимает пару сантиметров — мелкие надписи не читаются.
- Своя картинка для ключевых страниц. Товар, статья, акция — у каждой своё превью. Для остальных страниц достаточно фирменной картинки по умолчанию.
- Абсолютный адрес и доступность. Картинка должна открываться без авторизации и не быть закрыта в robots.txt — иначе роботы площадок её не получат.
Open Graph и SEO
На позиции в поисковой выдаче теги Open Graph напрямую не влияют — для поиска работают title, description и микроразметка. Но они влияют на то, как ссылка распространяется: красивая карточка чаще кликается и пересылается, а это приводит трафик и упоминания. Кроме того, некоторые поисковые и агрегирующие сервисы используют og:image как картинку страницы. Поэтому настроить оба набора — поисковые мета-теги и Open Graph — стоит одновременно.
Как внедрить на сайт
- Для конкретной страницы — вставьте сгенерированный блок в <head>. В большинстве CMS для этого есть поле «Мета-теги» или SEO-плагин с вкладкой «Соцсети».
- Для всего сайта — пропишите теги в шаблоне, подставляя заголовок, описание и картинку из полей страницы.
- Проверьте результат: отправьте ссылку себе в Telegram, посмотрите отладчик VK для ссылок, а для Facebook-совместимых площадок — Sharing Debugger.
- Не забудьте про страницы с UTM-метками: og:url должен указывать на чистый адрес.
Частые ошибки
- Относительный путь к картинке («/img/og.jpg») — большинство площадок его не поймут.
- Картинка на 3–5 МБ или в формате, который площадка не поддерживает, — превью не появляется.
- Одинаковые og:title и og:description на всех страницах из-за шаблона — в чате все ссылки выглядят одинаково.
- Теги стоят в <body> или выводятся скриптом после загрузки — роботы соцсетей JavaScript обычно не выполняют.
Поисковый сниппет настраивается отдельно — проверьте его в инструменте для title и description и добавьте микроразметку JSON-LD. Ссылки для рассылок и постов удобно размечать UTM-конструктором.
Пример: карточка для статьи и для товара
Для статьи блога og:type ставится article, og:title — живой заголовок без перечисления ключей, og:description — одна мысль, ради которой стоит открыть материал, а картинка — обложка статьи 1200×630 с крупным заголовком. Для карточки товара тип можно оставить website, в заголовок вынести название и главную выгоду, в описание — цену и условия доставки, а картинку взять с белым фоном и товаром по центру. В обоих случаях проверьте, что og:url указывает на чистый адрес без UTM-меток.
Вопросы и ответы
Чем og:title отличается от title?
title работает для поиска и вкладки браузера, og:title — для карточки в соцсетях. Их можно сделать одинаковыми, но og:title часто пишут живее и без перечисления ключей.
Нужны ли теги twitter:*, если есть og:*?
X (Twitter) умеет читать og-теги как запасной вариант, но twitter:card нужен, чтобы выбрать формат карточки. Генератор добавляет минимальный набор.
Почему Telegram показывает старую картинку?
Из-за кэша. Обновите превью через @WebpageBot или измените адрес картинки, добавив параметр версии.
Какой формат картинки лучше — JPG или PNG?
Для фото — JPG, для графики с текстом и плоскими цветами — PNG. WebP поддерживают не все площадки, поэтому для превью его лучше не использовать.
Превью на этой странице точно как в мессенджере?
Нет, это условная карточка: у каждой площадки своя вёрстка. Она помогает оценить длину текста и кадрирование картинки. Картинка подгружается только если вы включите переключатель.