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

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

Что это такое

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

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

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

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

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

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

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

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

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

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