Open Graph: красивое превью ссылки в соцсетях

Кидаете ссылку на свой сайт в чат или соцсеть — и что появляется? Иногда красивая карточка с картинкой и заголовком. А иногда голый адрес или случайный кусок текста. Разница не в удаче. Разница в том, настроена ли на сайте разметка Open Graph. Это она говорит соцсетям, как показать вашу ссылку.

Что это такое

Open Graph — это набор специальных тегов в коде страницы. Они невидимы для обычного посетителя, но их читают соцсети и мессенджеры: ВКонтакте, Telegram, WhatsApp, Facebook. Теги подсказывают, какую картинку показать, какой заголовок, какое описание. По сути это инструкция «как выглядеть моей ссылке, когда ею делятся».

Зачем он нужен

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

Основные теги

Их немного, и запоминать наизусть не нужно. Главных четыре. og:title — заголовок карточки. og:description — короткое описание под ним. og:image — та самая картинка превью, самый важный элемент: именно она цепляет взгляд. И og:url — адрес страницы. Картинку берите покрупнее, примерно 1200 на 630 пикселей, иначе соцсеть покажет её мелко или обрежет.

<meta property="og:title" content="Как раскрутить сайт самостоятельно">
<meta property="og:description" content="Пошаговое руководство с инструментами">
<meta property="og:image" content="https://site.ru/og/cover.jpg">
<meta property="og:url" content="https://site.ru/page">
<meta property="og:type" content="article">

На популярных CMS эти теги обычно подставляет SEO-плагин: вы задаёте картинку и описание в настройках записи, а код он генерирует сам.

Какой тег отвечает за что

Чтобы было совсем наглядно, разложим карточку на части — какой тег за какой элемент превью отвечает:

Как проверить

Настроили теги — проверьте, что вышло. Самый быстрый способ: киньте ссылку самому себе в Telegram или в личку ВКонтакте и посмотрите на карточку. Если картинка и заголовок на месте — всё работает. Если соцсеть упорно показывает старое превью, дело в кэше: соцсети надолго запоминают, как выглядела ссылка. У крупных площадок есть свои отладчики, которые умеют сбрасывать этот кэш.

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

Их по пальцам пересчитать. Нет тега og:image — и карточка выходит безликой, без картинки. Картинка слишком маленькая — соцсеть её игнорирует. Указали путь к несуществующему файлу — превью пустое. И типичное: поправили теги, а старая карточка всё равно показывается, потому что не сбросили кэш соцсети. Проверяйте превью сразу после настройки.

Какой должна быть картинка превью

og:image — главный элемент карточки, и к нему есть требования. Оптимальный размер — 1200 на 630 пикселей (соотношение примерно 1,91:1): такая картинка показывается крупно и не обрезается. Вес держите в разумных пределах, до нескольких мегабайт, иначе соцсеть может её не подтянуть. Если на картинке есть текст или логотип — делайте их крупными и ближе к центру: края при разных размерах карточки иногда срезаются. И обязательно указывайте абсолютный адрес картинки (с https и доменом), а не относительный путь — по относительному соцсеть её просто не найдёт.

Open Graph и карточки в X (Twitter)

ВКонтакте, Telegram, WhatsApp и большинство мессенджеров читают именно Open Graph. Отдельную разметку — Twitter Cards — исторически использует X (бывший Twitter): теги вроде twitter:card и twitter:image. Удобно то, что при отсутствии twitter-тегов X подхватывает данные из Open Graph. Поэтому для большинства сайтов достаточно настроить OG, а пару twitter-тегов добавлять только если вам важен вид ссылок именно в X.

Как сбросить кэш превью

Соцсети надолго запоминают, как выглядела ссылка, и после правок упорно показывают старую карточку. Лечится это принудительным сбросом кэша через отладчики площадок: у ВКонтакте есть свой инструмент проверки ссылок, у Facebook — Sharing Debugger, а в Telegram превью обновляет бот @WebpageBot. Прогоните ссылку через нужный отладчик — он перечитает страницу и подтянет уже свежую карточку.

Влияет ли Open Graph на SEO

Честный ответ: напрямую на позиции в поиске — нет. Поисковые роботы Яндекса и Google не ранжируют сайт выше за наличие og-тегов. Но связь всё же есть, и она косвенная: красивые карточки приносят больше переходов из соцсетей и мессенджеров, ссылками с привлекательным превью охотнее делятся, растёт узнаваемость бренда и брендовый трафик. Всё это — поведенческие и репутационные сигналы, которые поиск ценит. Так что Open Graph работает не на робота, а на людей, а уже через людей — на SEO.

Расширенные теги: type, locale, image:alt

Кроме четырёх основных, есть полезные дополнения, которые делают карточку аккуратнее и помогают площадкам правильно её разобрать:

• og:type — тип контента: website для главной, article для статьи, product для товара.
• og:site_name — название сайта (показывается рядом с карточкой).
• og:locale — язык и регион, например ru_RU.
• og:image:width и og:image:height — размеры картинки: с ними соцсеть не ждёт загрузки, чтобы понять пропорции, и карточка появляется быстрее.
• og:image:alt — текстовое описание картинки для доступности.
• Для статей — article:published_time и article:author.

Картинка под каждую страницу

Частая ошибка — одна и та же картинка Open Graph на весь сайт. Тогда все ссылки в ленте выглядят одинаково и сливаются. Гораздо сильнее работает индивидуальное превью под каждую страницу: для статьи — обложка по теме, для товара — его фото, для категории — характерный визуал. Крупные проекты идут дальше и генерируют og-картинки автоматически: шаблон с фоном бренда, на который скриптом наносится заголовок страницы. Получается, что каждая ссылка делится со своей уникальной, узнаваемой карточкой — и без ручного дизайна на каждую запись.

Кто что читает: ВК, Telegram, WhatsApp

Площадки разбирают разметку чуть по-разному, и это полезно учитывать:

• Telegram — читает Open Graph, превью обновляет бот @WebpageBot. Иногда показывает карточку не сразу, а после первой отправки ссылки.
• ВКонтакте — использует OG, но имеет свой кэш; для сброса есть инструмент проверки ссылок в настройках сообщества/рекламном кабинете.
• WhatsApp и другие мессенджеры — тоже опираются на OG, но требовательнее к размеру и весу картинки: тяжёлую могут не подтянуть.
• X (Twitter) — предпочитает Twitter Cards, но при их отсутствии берёт данные из Open Graph.

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

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