Open Graph и Twitter Cards

Управляем тем, как ссылка на сайт выглядит, когда её кидают в соцсеть или мессенджер.

Open Graph (OG) — протокол мета-тегов, который задаёт превью ссылки (картинку, заголовок, описание) при шеринге в соцсетях и мессенджерах. Twitter Cards — аналог для X/Twitter.

Зачем это разработчику

Когда пользователь кидает ссылку в Telegram, ВКонтакте, Facebook или X, платформа показывает карточку-превью. Без OG-тегов она соберёт что попало: случайную картинку, обрезанный текст. Привлекательное превью повышает кликабельность — это влияет на трафик, пусть и не на ранжирование напрямую.

Почему это не «то же, что title»

Логичный вопрос: зачем дублировать заголовок и описание в OG, если уже есть title и meta description? Затем, что это разные каналы с разными правилами показа. Поисковик строит сниппет по своим тегам и может переписать description под запрос. Соцсеть же показывает ровно то, что в OG, и почти всегда с картинкой — а og:image у обычных SEO-тегов аналога нет вовсе. Кроме того, формулировка, которая хорошо работает в поиске («Что такое canonical — пошагово»), в ленте соцсети может звучать суховато. Поэтому OG задают отдельно, даже если по смыслу он близок к title.

Базовые og-теги

OG-теги ставятся в <head> через <meta property="og:...">:

<meta property="og:title"       content="Что такое canonical — CodeChick">
<meta property="og:description" content="Как убрать дубли страниц и не потерять позиции.">
<meta property="og:image"       content="https://codechick.io/og/canonical.png">
<meta property="og:url"         content="https://codechick.io/tutorials/seo/canonical">
<meta property="og:type"        content="article">

Ключевой тег — og:image. Рекомендованный размер картинки превью — 1200×630. Слишком маленькая картинка платформа покажет крошечной иконкой или проигнорирует.

Twitter Cards

X/Twitter использует свои теги, но умеет подхватывать OG. Минимально стоит задать тип карточки:

<meta name="twitter:card"  content="summary_large_image">
<meta name="twitter:title" content="Что такое canonical — CodeChick">
<meta name="twitter:image" content="https://codechick.io/og/canonical.png">

summary_large_image — карточка с большой картинкой; summary — компактная с маленькой.

Как работает под капотом: парсинг превью

Когда вы шерите ссылку, платформа сама делает запрос к странице (часто со своим ботом, например facebookexternalhit), вытаскивает OG-теги из HTML и строит карточку. Смоделируем эту логику разбора:

import re

html = '''
<meta property="og:title" content="Гайд по canonical">
<meta property="og:image" content="https://codechick.io/og.png">
<meta property="og:description" content="Убираем дубли страниц">
'''

def parse_og(html):
    pattern = r'property="og:(\w+)"\s+content="([^"]*)"'
    return {k: v for k, v in re.findall(pattern, html)}

card = parse_og(html)
print("Заголовок:", card.get("title"))
print("Картинка: ", card.get("image"))
print("Описание: ", card.get("description"))

Вывод:

Заголовок: Гайд по canonical
Картинка:  https://codechick.io/og.png
Описание:  Убираем дубли страниц

Важный нюанс: платформенный бот, как и поисковый, обычно не выполняет ваш JavaScript. Если OG-теги добавляются на клиенте, превью соберётся неправильно — теги должны быть в серверном HTML.

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

og:image на клиенте — бот не дождётся JS, превью будет без картинки.
Относительный URL картинки — нужен абсолютный https://....
Маленькая картинка — платформа покажет иконку вместо большой карточки; целевой размер 1200×630.
Кеш превью — соцсети кешируют OG надолго; после правок используйте их отладчики, чтобы сбросить кеш.

Итог

Open Graph и Twitter Cards управляют превью ссылки при шеринге в соцсети и мессенджеры.
Ключевой тег — og:image (1200×630) с абсолютным URL; задавайте также title, description, url, type.
OG-теги должны быть в серверном HTML: платформенные боты не исполняют JavaScript.