Open Graph и превью в соцсетях

Когда вы кидаете ссылку в Telegram или ВКонтакте и появляется красивая карточка с картинкой и заголовком — за это отвечает Open Graph в head страницы.

Open Graph — набор meta-тегов с префиксом og:, которые сообщают соцсетям и мессенджерам, как показать ссылку: какой заголовок, описание и картинку поставить в превью.

Обычные теги head — title и description — нужны поисковику. Но соцсети их почти не читают: у них собственный протокол разметки превью, Open Graph, придуманный когда-то в Facebook и ставший де-факто стандартом для всех. Если на странице нет og-тегов, мессенджер сам угадывает картинку и текст — и часто угадывает плохо: тащит логотип из шапки, обрезает случайный абзац или вообще показывает голую ссылку. Управляемое превью повышает кликабельность в разы, поэтому og-теги ставят на каждую важную страницу.

Зачем это на практике

Сравните две ссылки в ленте. Первая — это аккуратная карточка: крупная картинка, жирный заголовок, строчка описания, имя сайта. Вторая — просто синий URL. По первой кликают заметно чаще, потому что она выглядит как контент, а не как «что-то техническое». Для блога, магазина или статьи это прямой рост переходов из соцсетей — без единой строчки рекламы. Open Graph — это бесплатный способ сделать так, чтобы вашими ссылками хотелось делиться.

Базовые теги Open Graph

Четыре тега — основа любого превью. Их кладут в head:

<meta property="og:title" content="Учебник по HTML — CodeChick">
<meta property="og:description" content="От структуры документа до метаданных и SEO. С примерами и квизами.">
<meta property="og:image" content="https://example.com/preview.png">
<meta property="og:url" content="https://example.com/html">

Обратите внимание: у og-тегов атрибут называется property (а не name, как у обычных meta) и значение начинается с og:. Это формальное требование протокола — с name вместо property теги не сработают.

• og:title — заголовок карточки. Может отличаться от title страницы: тут можно сделать его «человечнее».
• og:description — короткий текст под заголовком в превью.
• og:image — главное украшение. Адрес обязательно абсолютный (с https://), относительный путь соцсеть не подтянет.
• og:url — канонический адрес страницы, его соцсеть использует как «настоящую» ссылку.

og:type и картинка правильного размера

Тег og:type задаёт тип объекта — для статьи это article, для обычной страницы website, для товара существуют отдельные типы. От него зависит, как платформа трактует контент:

<meta property="og:type" content="article">
<meta property="og:site_name" content="CodeChick">

Отдельная боль — размер картинки. Соцсети любят горизонтальные изображения с соотношением сторон 1.91:1; рекомендуемый размер — 1200×630 пикселей. Если картинка слишком маленькая или квадратная, многие платформы покажут её мелкой иконкой сбоку вместо большого баннера. Поэтому под og:image обычно готовят отдельную «обложку» нужных пропорций.

Twitter Cards

У X (бывший Twitter) исторически свой набор тегов — Twitter Cards. Хорошая новость: если og-теги уже есть, Twitter подхватит из них заголовок, описание и картинку. Достаточно добавить лишь тип карточки:

<meta name="twitter:card" content="summary_large_image">

Значение summary_large_image просит большую карточку с крупной картинкой (есть и компактный вариант summary). Заметьте: у twitter-тегов атрибут снова name, а не property — мелкая, но частая причина, почему превью «не клеится». При желании можно переопределить отдельные поля тегами twitter:title, twitter:description, twitter:image, но обычно хватает og + одной строки про карточку.

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

Когда пользователь вставляет ссылку, платформа отправляет своего бота забрать страницу, читает из head og-теги, скачивает картинку и собирает карточку. Дальше — ключевой момент — результат кэшируется. Поэтому если вы поправили og-теги, а превью осталось старым, дело не в коде, а в кэше платформы.

Для отладки у соцсетей есть официальные валидаторы превью (sharing debugger у Facebook, card validator у X, аналоги у ВКонтакте). Они показывают, какие теги бот реально увидел, и позволяют сбросить кэш, заставив платформу перечитать страницу. Это первый инструмент, когда «картинка не та» или «превью пустое».

Минимальный рабочий набор

Как это работает под капотом

Open Graph — это не магия рендера, а соглашение о метаданных. Бот платформы делает обычный HTTP-запрос за HTML, парсит только head, ищет теги с property="og:..." и складывает их в структуру объекта. Картинку он скачивает отдельным запросом по адресу из og:image — вот почему путь должен быть абсолютным и доступным без авторизации. Собранную карточку платформа сохраняет в кэше на часы или дни, чтобы не дёргать ваш сайт при каждом расшаривании. Twitter Cards устроены так же, просто с другим префиксом, и по умолчанию читают og-теги как запасной источник.

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

• name вместо property у og-тегов. Open Graph требует property="og:..."; с name теги игнорируются.
• Относительный путь в og:image. Бот не знает домен в отрыве от страницы — указывайте полный https://-адрес.
• Маленькая или квадратная картинка. Платформа покажет её иконкой сбоку. Готовьте обложку около 1200×630.
• Поправили теги — превью старое. Это кэш платформы. Сбросьте его через официальный отладчик, а не правьте код по кругу.
• Забыли twitter:card. Без него X нередко показывает компактную карточку вместо крупной, даже когда картинка есть.

Итоги

• Open Graph — отдельный от SEO протокол: соцсети читают теги og:, а не обычные title/description.
• Минимум — og:title, og:description, og:image, og:url плюс og:type; у тегов атрибут property.
• og:image требует абсолютного URL и картинки нужных пропорций (~1200×630), иначе превью выглядит бедно.
• Twitter Cards подхватывают og-теги; достаточно добавить twitter:card с атрибутом name.
• Превью кэшируется платформой — после правок сбрасывайте кэш через официальный отладчик.