Зачем нужны Open Graph и Twitter Cards
Когда кто-то делится ссылкой на ваш сайт в Telegram / VK / WhatsApp / Discord / Twitter — мессенджер пытается сделать превью:
- Картинка
- Заголовок
- Краткое описание
Без специальной разметки превью получается рандомное — берётся первое попавшееся изображение, обрезается title как попало.
С разметкой Open Graph (для Facebook, Telegram, VK, WhatsApp, LinkedIn, Discord) и Twitter Cards (для X/Twitter) — превью выглядит как карточка с осознанным фото и текстом.
Open Graph — что это
Open Graph (OG) — это протокол от Facebook, который стал стандартом для всех мессенджеров.
Базовый набор тегов в <head>:
<meta property="og:title" content="Заголовок страницы для шеринга" />
<meta property="og:description" content="Краткое описание 150-200 символов" />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Название сайта" />
<meta property="og:locale" content="ru_RU" />og:image — главный тег
Размер картинки:
- Минимум: 600 × 315 px
- Оптимум: 1200 × 630 px (соотношение 1.91:1)
- Максимум: 8 МБ файл
Формат: JPG или PNG. WebP не везде поддерживается (Telegram OK, некоторые мессенджеры — нет).
Где брать: автогенерация в Next.js / Astro:
// Next.js opengraph-image.tsx — автогенерация OG-картинки
import { ImageResponse } from 'next/og';
export default async function Image() {
return new ImageResponse(
<div>...любой JSX...</div>,
{ width: 1200, height: 630 }
);
}og:type — варианты
| Значение | Когда |
|---|---|
| website | Главная, обычные страницы |
| article | Блог-статьи (полезно с дополнительными og:article:*) |
| product | Карточка товара |
| profile | Страница пользователя |
| video.movie | Видео |
| music.song | Аудио |
Twitter Cards — что это
Twitter (X) использует свой протокол поверх OG. Если у вас есть OG, Twitter в основном использует его для превью.
Минимум для Twitter:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Заголовок" />
<meta name="twitter:description" content="Описание" />
<meta name="twitter:image" content="https://example.com/twitter-image.jpg" />twitter:card — варианты
| Значение | Картинка | Когда |
|---|---|---|
| summary | Маленькая квадратная | Простой пост, без яркого визуала |
| summary_large_image | Большая 1200×630 | Большинство случаев — рекомендуется |
| app | Карточка для приложения | Для мобильных приложений |
| player | Видео-плеер | Для видео-контента |
99% случаев — summary_large_image.
Полная разметка страницы
Финальный шаблон в <head>:
<!-- Open Graph -->
<meta property="og:type" content="article" />
<meta property="og:title" content="Как сделать SEO-каталог с фильтрами" />
<meta property="og:description" content="7 правил архитектуры для агрегатора. На примерах icolleges, opencard, carto-auto." />
<meta property="og:image" content="https://seocheckup.ru/blog/kak-sdelat-seo-katalog/og.jpg" />
<meta property="og:url" content="https://seocheckup.ru/blog/kak-sozdat-seo-katalog-s-filtraciey" />
<meta property="og:site_name" content="SEO Чек-ап" />
<meta property="og:locale" content="ru_RU" />
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Как сделать SEO-каталог с фильтрами" />
<meta name="twitter:description" content="7 правил архитектуры для агрегатора." />
<meta name="twitter:image" content="https://seocheckup.ru/blog/kak-sdelat-seo-katalog/og.jpg" />Дополнительные теги для статей
Для блог-статей полезно добавить:
<meta property="article:published_time" content="2026-06-13T12:00:00+03:00" />
<meta property="article:modified_time" content="2026-06-15T10:00:00+03:00" />
<meta property="article:author" content="https://seocheckup.ru/authors/ivan" />
<meta property="article:tag" content="SEO" />
<meta property="article:tag" content="каталоги" />Где это видно
| Сервис | Использует |
|---|---|
| Telegram | Open Graph |
| Open Graph | |
| VK | Open Graph (со своими дополнениями vk:*) |
| Open Graph (свой протокол) | |
| Open Graph | |
| Discord | Open Graph |
| X / Twitter | Twitter Cards + fallback на OG |
| Slack | Open Graph |
| iMessage | Open Graph |
| Skype | Open Graph |
То есть Open Graph покрывает 90% случаев шеринга. Twitter Cards добавляет +5%.
Валидация и тестирование
Facebook Sharing Debugger
developers.facebook.com/tools/debug
Показывает превью Facebook + сбрасывает кеш.
Twitter Card Validator (устарел, но работает)
cards-dev.twitter.com/validator
Telegram
Просто откройте чат и отправьте ссылку — превью обновится через 24 часа автоматически, или принудительно через @webpagebot.
Сторонние
- opengraph.xyz — превью для всех соцсетей
- metatags.io — простой валидатор
Анти-паттерны
❌ Одинаковая og:image на всех страницах
Каждая страница должна иметь уникальный og:image. На главную — логотип компании, на блог-статьи — иллюстрация по теме.
❌ og:image меньше 600×315
Мессенджеры могут отказаться показывать превью. Делайте минимум 1200×630.
❌ Дублирование og:title с обычным title
Можно дублировать (если одинаково оптимально), но обычно для соцсетей нужна более яркая формулировка.
❌ Отсутствие og:image
Без неё мессенджер показывает голую ссылку. CTR в чатах падает в 3-5 раз.
❌ og:image не доступен публично
Если картинка лежит за авторизацией или 404 — превью пустое.
❌ Слишком длинное og:description
Длиннее 200 символов — обрезается. Уложитесь в 150-160.
Кеширование
Все мессенджеры кешируют превью на 1-90 дней.
При обновлении OG-тегов на странице:
- В Facebook — сбросить через Debugger
- В Telegram — через 24 часа автоматически, или @webpagebot
- В VK — переотправить ссылку с
?v=2в конце
Чек-лист
- [ ] og:type выбран правильно
- [ ] og:title + og:description + og:image + og:url на каждой странице
- [ ] og:image 1200×630, JPG/PNG, доступен публично
- [ ] og:image уникальный для каждой страницы
- [ ] Twitter Cards для X — summary_large_image
- [ ] article:* теги для блог-статей
- [ ] Валидация через Facebook Sharing Debugger
Итог
Open Graph и Twitter Cards — это 5 минут работы в шаблон, дающие красивые превью при любом шеринге. CTR в чатах растёт в 3-5 раз.