Вы отправили ссылку в Telegram, ВКонтакте или X (Twitter) — и ждёте красивую карточку: яркая картинка, цепляющий заголовок, краткое описание. А вместо этого показываетесь обрезанное фото, непонятный заголовок из шапки сайта или вообще голый текст со ссылкой. Разница между этими двумя сценариями — в настроенных OG-тегах и Twitter Cards. Именно они говорят соцсетям, как показать вашу ссылку, и без них платформа угадывает сама — обычно неправильно.
Разбираем, что такое Open Graph и Twitter/X Cards, какие теги обязательны, почему og:image должен быть 1200×630, какие ошибки ломает превью и как проверить всё за пару минут в бесплатной проверке сайта.
Что такое Open Graph и Twitter Cards
Open Graph (OG) — это протокол, который Facebook запустил в 2010 году, чтобы ссылки красиво выглядели при шеринге в социальных сетях. До него система показывала голый URL, и пользователю пришлось кликать, чтобы понять, о чём страница. Open Graph решил эту проблему: соцсеть читает метаданные со страницы и формирует готовое превью — заголовок, описание и картинку, как будто вы сами собрали пост.
Теги встраиваются в <head> HTML-кода страницы через атрибут property="og:". Их не видит человек на сайте, но читают Facebook, Instagram, WhatsApp, LinkedIn, Pinterest, ВКонтакте и мессенджеры. Настроив Open Graph один раз, вы получаете единый стандарт оформления ссылки для всех этих платформ сразу.
Twitter/X Cards — это похожая система от Twitter (сейчас X). Она работает параллельно с Open Graph: если OG-тегов нет, Twitter подставляет обычные meta title и description. Но чтобы точно контролировать вид карточки — размер картинки, автора, кнопку — добавляют специальные Twitter-теги с атрибутом name="twitter:".
Важный момент: Open Graph напрямую не влияет на ранжирование Google и Яндекса. Поисковики не используют OG-теги как фактор. Но связь есть косвенная: лучшее превью → выше CTR в соцсетях → больше шерингов и трафика → больше обратных ссылок и хороших поведенческих сигналов → лучше позиции. Плюс профессиональный вид повышает доверие и снижает отказы.
Обязательные OG-теги
Четыре тега — база. Без них соцсеть не сможет собрать нормальную карточку и начнёт додумывать.
og:title — заголовок карточки
То, что человек видит в первой строке превью. Может отличаться от <title> страницы: для соцсетей иногда нужен более короткий или более цепляющий вариант.
- Длина: до ~60 символов, иначе обрежется.
- Уникальный для каждой страницы — не дублируйте «Главная» на всех постах.
- Отражает суть: «Что? + Почему это важно?».
og:description — описание карточки
Текст под заголовком, аналог meta description, но для соцсетей. Дополняет заголовок и содержит мягкий призыв к действию.
- Длина: до ~200 символов (в VK короче, в Telegram длиннее).
- Не дублирует og:title слово в слово.
- Даёт выгоду: «узнайте», «посмотрите», «скачайте».
og:image — картинка-превью
Главный визуальный элемент. Именно картинка цепляет в ленте, поэтому к ней самые жёсткие требования.
- Размер: 1200×630 пикселей — золотой стандарт (соотношение сторон 1.91:1).
- Минимальная площадь ~50 000 пикселей; меньше покажут маленьким или не покажут.
- Формат: JPG, PNG, WebP (не анимированный GIF).
- Вес файла: до 5 МБ.
- Обязательно полный абсолютный URL (
https://site.com/img.jpg), а не относительный путь/img.jpg.
og:url — канонический адрес
URL страницы, который передаёт соцсети. Помогает понять, какая версия основная, если есть дубли с www/без, http/https или ?utm=. Указывайте каноническую версию — совпадающую с той, что в адресной строке.
Дополнительные OG-теги
Они не обязательны, но повышают точность отображения и узнаваемость.
og:type — тип контента
Помогает соцсети понять формат: website для главной, article для статей и блога, product для товаров, video.movie для видео. Правильный тип влияет на то, какие дополнительные элементы покажет платформа.
<meta property="og:type" content="article" />
og:site_name — название сайта
Отображается внизу карточки, усиливает узнаваемость бренда.
<meta property="og:site_name" content="seoquest.ru" />
og:locale — язык страницы
Задает язык и формат дат/чисел. Для русского контента — ru_RU.
<meta property="og:locale" content="ru_RU" />
Для статей полезно добавить article:published_time и article:modified_time — соцсети будут показывать актуальную дату публикации.
Twitter/X Cards: summary и summary_large_image
Twitter (X) предлагает несколько типов карточек. Для большинства сайтов подходят два.
Summary Card (краткое описание)
Базовый тип: заголовок, описание, изображение (опционально) и ник автора. Подходит для статей, блогов и новостей.
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Как настроить Open Graph и Twitter Cards" />
<meta name="twitter:description" content="Пошагово про og-теги, размер картинки и частые ошибки." />
<meta name="twitter:image" content="/images/og-article.jpg" />
<meta name="twitter:site" content="@yourbrand" />
Summary Card with Large Image (большое изображение)
Ваш лучший выбор, если нужно максимальное визуальное воздействие: крупная картинка слева, текст справа. Идеально для продуктов, фото, скриншотов результатов и инфографики.
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Как настроить Open Graph и Twitter Cards" />
<meta name="twitter:description" content="Пошагово про og-теги, размер картинки и частые ошибки." />
<meta name="twitter:image" content="/images/og-article.jpg" />
<meta name="twitter:site" content="@yourbrand" />
Размер изображения для Twitter — минимум 300×157 px, но лучше 1200×600 или больше. Формат: JPG, PNG.
Обязательные Twitter-теги: twitter:card (тип), twitter:title, twitter:description, twitter:image (полный URL), twitter:site (аккаунт с @). twitter:creator — опционально, ник автора. Все теги должны быть внутри <head>, а URL картинки доступен без авторизации.
Частые ошибки, которые ломает превью
1. Слишком маленькая картинка
og:image 400×400 или логотип вместо превью — классика. ВКонтакте покажет миниатюру внизу карточки, Telegram может вообще не показать изображение, а Facebook увеличит маленькую картинку и получит пикселизацию. Решение: используйте минимум 1200×630 px для всех платформ сразу.
2. og:title и title не совпадают
Если в поиске человек видит «Как проверить сайт», а в соцсети — «seoquest.ru», возникает разрыв доверия: ожидание не совпадает с реальностью. Решение: og:title должен быть согласован с <title>, но может быть чуть короче или цепляее для соцсетей.
3. og:image не открывается
Если URL картинки требует логина, закрыт robots.txt или отдаёт 404 — соцсеть не загрузит изображение и покажет карточку без него. Решение: проверьте, что URL открыт публично и отдаёт статус 200. Не используйте относительные пути — только полный https-адрес.
4. Дублирующие или перезаписывающие теги
Два og:title в коде, которые переписывают друг друга плагином, заставят соцсеть выбрать превью случайно. Решение: оставьте тег в одном экземпляре и проверьте, что он не дублируется в <head>.
5. Картинка с текстом не читается
Текст на og:image может обрезаться — ВКонтакте отрезает нижнюю треть, Telegram — правую часть. Решение: держите текст в левой верхней части или вообще положитесь на og:title и og:description, а на картинку выносите только визуал.
Примеры HTML для разных страниц
Главная страница
<meta property="og:title" content="seoquest.ru — бесплатная проверка SEO" />
<meta property="og:description" content="Проверьте сайт на 50+ SEO-ошибки за 30 секунд" />
<meta property="og:image" content="/images/og-home.jpg" />
<meta property="og:url" content="/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="seoquest.ru" />
<meta property="og:locale" content="ru_RU" />
Блог-статья
<meta property="og:title" content="Как настроить Open Graph и Twitter Cards" />
<meta property="og:description" content="Обязательные og-теги, размер 1200×630 и частые ошибки настройки." />
<meta property="og:image" content="/images/og-article.jpg" />
<meta property="og:url" content="/blog/open-graph-kartochki-socsetej" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="seoquest.ru" />
<meta property="og:locale" content="ru_RU" />
<meta property="article:published_time" content="2026-10-14T10:00:00+03:00" />
Страница товара/услуги
<meta property="og:title" content="SEO-аудит сайта — проверка за 30 минут" />
<meta property="og:description" content="Найдём 50+ SEO-ошибок и дадим рекомендации по исправлению" />
<meta property="og:image" content="/images/og-audit.jpg" />
<meta property="og:url" content="/services/audit/" />
<meta property="og:type" content="product" />
Как проверить OG-теги и Twitter Cards в seoquest.ru
Собрать теги вручную через curl и смотреть в сторонние отладчики долго и легко запутаться. В seoquest всё есть внутри аудита.
1. Раздел «Мета-теги» (в составе SEO-аудита). Откройте страницу по URL — инструмент покажет все OG- и Twitter-теги, размер и доступность og:image, а также тип карточки X. Это быстрее, чем собирать код руками, и сразу видно, чего не хватает.
2. Бесплатная проверка сайта на /check/free. Чтобы увидеть OG в контексте остальных SEO-сигналов — не только по одной странице, а по всему сайту, — запустите бесплатную проверку. Она считает Health Score и покажет проблемы с метаданными в порядке приоритета.
Официальные отладчики для глубокой проверки. Если нужно убедиться в конкретной платформе — используйте Facebook Sharing Debugger (кнопка «Reset Cache», чтобы обновить кэш) и Twitter Card Validator. Соцсети кэшируют превью на дни, поэтому после правок кэш нужно сбрасывать, а ссылку отправить заново — например, себе в «Избранное» Telegram или в сообщения ВКонтакте.
Чеклист настройки Open Graph
- [ ] og:title — уникальный, до 60 символов
- [ ] og:description — уникальный, до 200 символов
- [ ] og:image — минимум 1200×630 px, полный URL, доступна без логина
- [ ] og:url — канонический адрес страницы
- [ ] og:type — правильный (website / article / product)
- [ ] og:site_name и og:locale — ru_RU для русского контента
- [ ] Twitter Card: summary_large_image с полным URL изображения
- [ ] Превью проверено в реальной соцсети после сброса кэша
Часто задаваемые вопросы
Open Graph влияет на SEO напрямую?
Нет, OG-теги не являются фактором ранжирования для Google или Яндекса. Но они повышают CTR из соцсетей, а больше шерингов и трафика косвенно улучшают SEO-показатели.
Одна картинка подойдёт для Open Graph и Twitter Cards?
Да. Рекомендуемый размер 1200×630 подходит для обеих систем — главное, чтобы файл был в формате JPG/PNG/WebP, весил до 5 МБ и открывался по полному URL без авторизации.
Почему после правок тегов превью не обновляется?
Соцсети кэшируют превью на несколько дней. Сбросьте кэш в Facebook Sharing Debugger или Twitter Card Validator, а затем отправьте ссылку заново — только так вы увидите новую версию.
Почему в разных соцсетях превью отличается?
Разные платформы по-разному парсят страницу: если og:image не загрузился, Telegram может подставить картинку из контента. Строго следовать OG-тегам начинают почти все крупные площадки, поэтому всегда настраивайте их — это универсальное решение.
Внутренние ссылки и что изучить дальше
Open Graph тесно связан с другими мета-тегами и оформлением ссылок в выдаче. Чтобы карточки работали на результат максимально, заодно настройте базовые элементы:
- Как оптимизировать мета-теги title и description — без сильных title/description даже красивая OG-карточка не спасёт CTR в поиске.
- Соцсети и способы связи на сайте — как использовать превью ссылок для продвижения и обратной связи.
- Сниппеты в поиске: как улучшить — что показывает ссылка в выдаче и как это связано с тем, как она выглядит в соцсетях.
- Микроразметка Schema.org для сайта — структурные данные, которые вместе с OG делают контент понятным и поисковикам, и соцсетям.
Итог
Open Graph и Twitter Cards — это не «техническая деталь для продвинутых», а инструмент привлечения трафика из соцсетей. Правильно настроенные og-теги с картинкой 1200×630 делают ссылку привлекательной в ленте, повышают CTR и косвенно улучшают SEO через трафик и обратные ссылки. Убедитесь, что на каждой странице заданы обязательные теги, а изображение уникально и доступно публично. Проверить всё по одному URL — в разделе «Мета-теги» аудита, а запустить полную проверку сайта — бесплатно на check/free.