Open Graph — почему ссылка выглядит по-разному в каждой соцсети
Когда вы делитесь ссылкой в Telegram, ВКонтакте или MAX, соцсеть формирует карточку предпросмотра: заголовок, описание и картинка. Без правильно настроенных мета-тегов Open Graph (OG) соцсеть пытается угадать, что показать — и чаще всего угадывает неправильно.
Что происходит без OG-тегов:
- Соцсеть берёт первый попавшийся заголовок с страницы (часто это название меню или логотип)
- Картинка может быть слишком маленькой, обрезанной или вообще отсутствовать
- Описание отсутствует или берётся из случайного абзаца
- Ссылка выглядит непрофессионально и снижает доверие
Open Graph — это протокол, появившийся в 2010 году, который позволяет контролировать, как ваша ссылка выглядит при шеринге. Сейчас его поддерживают все крупные соцсети и мессенджеры.
Обязательные OG-теги
| Тег | Что передаёт | Практическое правило |
|---|---|---|
og:title | Заголовок карточки | Кратко отражает содержание страницы |
og:description | Описание карточки | Дополняет заголовок без переспама |
og:image | Изображение превью | Публичный абсолютный URL, обычно 1200×630 |
og:url | Основной URL | Совпадает с канонической версией страницы |
og:title — заголовок карточки
Заголовок, который отображается в карточке при шеринге. Может отличаться от <title> страницы — для соцсетей иногда нужен более короткий или более цепляющий вариант.
Рекомендации:
- Длина: до 60 символов (в карточке может обрезаться)
- Уникальный для каждой страницы
- Содержит ключевую информацию
og:description — описание карточки
Краткое описание, которое отображается под заголовком. Аналог meta description, но для соцсетей.
Рекомендации:
- Длина: до 200 символов (в Telegram может быть длиннее, в VK — короче)
- Не дублирует og:title
- Содержит призыв к действию
og:image — картинка-превью
Главный визуальный элемент карточки. Именно картинка привлекает внимание в ленте новостей.
Технические требования:
- Минимальный размер: 1200×630 пикселей (общепринятая рекомендация)
- Минимальная площадь: 50 000 пикселей
- Формат: JPG, PNG, GIF (не анимированный), WebP
- Вес файла: до 5 МБ
- Соотношение сторон: 1.91:1 (идеально 1200×630)
Что происходит с маленькой картинкой:
- VK показывает маленькое превью внизу карточки
- Telegram может не показать картинку вообще
- соцсеть может обрезать до миниатюры
og:url — канонический URL
URL страницы, который указывается в OG-тегах. Помогает соцсетям понять, какая версия страницы является основной (если есть www/non-www, http/https).
Дополнительные OG-теги
og:type — тип контента
Определяет тип контента: website, article, product, video и т.д. Влияет на то, какие дополнительные элементы покажет соцсеть.
<meta property="og:type" content="article" />
Для блога используйте article, для главной — website, для страницы товара — product.
og:site_name — название сайта
Название вашего сайта, которое отображается внизу карточки.
<meta property="og:site_name" content="seoquest.ru" />
og:locale — язык страницы
Язык контента страницы. Влияет на то, как соцсеть форматирует даты, числа и текст.
<meta property="og:locale" content="ru_RU" />
Как проверить карточку в ВК, Telegram и MAX
Для аудитории в РФ важны превью в ВКонтакте, Telegram и MAX. Базовых OG-тегов (og:title, og:description, og:image, og:url, og:locale = ru_RU) обычно достаточно: эти сервисы читают Open Graph.
Сначала проверьте страницу в нашем инструменте Карточки для соцсетей — увидите превью, чеклист OG-тегов и Twitter Card по одному URL. Готовый HTML для вставки в <head> можно собрать в генераторе Open Graph.
- ВКонтакте — после правок отправьте ссылку себе в сообщения и посмотрите карточку.
- Telegram — перешлите URL в «Избранное» и сверьте превью.
- MAX — вставьте ссылку в диалог: заголовок и картинка должны подтянуться.
После смены og:image кэш мессенджеров обновляется не мгновенно — подождите или отправьте ссылку заново (иногда помогает параметр к URL картинки, например ?v=2).
Open Graph для разных типов страниц
Главная страница
<meta property="og:title" content="seoquest.ru — бесплатная проверка SEO" />
<meta property="og:description" content="Проверьте сайт на 50+ SEO-ошибок за 30 секунд" />
<meta property="og:image" content="https://seoquest.ru/og-home.jpg" />
<meta property="og:url" content="https://seoquest.ru/" />
<meta property="og:type" content="website" />
Блог-статья
<meta property="og:title" content="Как проверить сайт на SEO-ошибки бесплатно" />
<meta property="og:description" content="Пошаговая инструкция по бесплатной проверке сайта на SEO-ошибки" />
<meta property="og:image" content="https://seoquest.ru/blog/og-seo-check.jpg" />
<meta property="og:url" content="https://seoquest.ru/blog/kak-proverit-sajt-seo/" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-07-01T10:00:00+03:00" />
<meta property="article:modified_time" content="2026-07-15T14:30:00+03:00" />
Для статей добавьте article:published_time и article:modified_time — это помогает соцсетям показывать актуальный контент.
Страница товара/услуги
<meta property="og:title" content="SEO-аудит сайта — проверка за 30 минут" />
<meta property="og:description" content="Найдём 50+ SEO-ошибок и дадим рекомендации по исправлению" />
<meta property="og:image" content="https://seoquest.ru/og-audit.jpg" />
<meta property="og:url" content="https://seoquest.ru/services/audit/" />
<meta property="og:type" content="product" />
<meta property="product:price:amount" content="0" />
<meta property="product:price:currency" content="RUB" />
Типичные ошибки с Open Graph
1. Одна og:image для всех страниц
Самая частая ошибка — использовать одну и ту же картинку (обычно логотип) для всех страниц. Это снижает CTR при шеринге: в ленте все ссылки выглядят одинаково.
Решение: создайте уникальную картинку для каждой страницы. Для статей — превью с заголовком. Для товаров — фото товара. Для главной — баннер с УТП.
2. og:image слишком маленький
Картинка 400×400 пикселей — это меньше минимума. Соцсети либо покажут её маленькой, либо не покажут вообще.
Решение: используйте минимум 1200×630 px для ВКонтакте и 1024×512 px для Telegram.
3. og:title и title не совпадают
Если title страницы — «Как проверить сайт», а og:title — «seoquest.ru», это создаёт разрыв: пользователь видит одно в поиске и другое в соцсети.
Решение: og:title должен быть согласован с title, но не обязан совпадать слово в слово. Для соцсетей можно сделать более короткий или более цепляющий вариант.
4. og:image не открывается
Если URL картинки требует авторизации, закрыт robots.txt или отдаёт 404 — соцсеть не сможет загрузить картинку и покажет карточку без изображения.
Решение: проверьте, что URL og:image доступен публично и отдаёт 200.
5. Картинка с текстом не читается
Если на og:image напечатан текст, который не помещается в карточку соцсети — он обрежется. соцсеть может обрезать нижнюю треть, Telegram — правую часть.
Решение: размещайте текст в верхней левой части картинки. Или лучше — не используйте текст на картинке, а положитесь на og:title и og:description.
Как проверить OG-теги
1. Инструмент seoquest.ru — карточки для соцсетей
Откройте /tools/social-cards, вставьте URL страницы и нажмите «Проверить». В отчёте: превью (заголовок, описание, картинка), чеклист по каждому OG-тегу и блок Twitter Card. Это быстрее, чем собирать теги вручную через curl, и не уводит на сторонние отладчики.
2. Генератор тегов
Если тегов ещё нет — соберите HTML в генераторе Open Graph и Twitter Card и вставьте в <head> страницы. Затем снова прогоните URL через проверку карточек.
3. Финальный взгляд в мессенджере
После правок отправьте ссылку себе в ВКонтакте, Telegram («Избранное») или MAX — так вы увидите, как карточку отрисует уже кэш сервиса. Если превью старое, подождите или смените query у og:image.
4. Полная проверка сайта
Чтобы увидеть OG в контексте остальных SEO-сигналов, запустите бесплатную проверку Health Score.
Open Graph и SEO — связаны ли они?
Open Graph напрямую не влияет на SEO. Поисковики не используют OG-теги для ранжирования. Но есть косвенная связь:
- Лучший CTR в соцсетях → больше шерингов → больше трафика → больше обратных ссылок → лучше ранжирование
- Профессиональный вид → больше доверия → больше кликов → ниже отказ → лучше поведенческие факторы
- Уникальные картинки → заметнее в ленте → больше репостов → больше охват
Чеклист настройки Open Graph
- [ ] og:title — уникальный, до 60 символов
- [ ] og:description — уникальный, до 200 символов
- [ ] og:image — минимум 1200×630 px, уникальная для каждой страницы
- [ ] og:url — канонический URL страницы
- [ ] og:type — правильный тип контента (website/article/product)
- [ ] og:site_name — название сайта
- [ ] og:locale — ru_RU для русского контента
- [ ] Превью проверено в ВК, Telegram и MAX
- [ ] og:image доступен публично (не требует авторизации)
- [ ] Проверено в /tools/social-cards (+ при необходимости генератор /tools/og-twitter)
Итог
Open Graph — это не «техническая деталь», а инструмент привлечения трафика из соцсетей. Правильно настроенные OG-теги делают вашу ссылку привлекательной в ленте новостей, повышают CTR и косвенно влияют на SEO через увеличение трафика и обратных ссылок. Убедитесь, что на каждой странице сайта настроены все обязательные OG-теги, а картинка-превью уникальна и имеет достаточный размер. Быстрая проверка — в карточках для соцсетей, сборка тегов — в генераторе Open Graph.
Вопросы и ответы
Open Graph влияет на SEO напрямую?
Нет, OG-теги не являются фактором ранжирования для Яндекса или Google. Но они влияют на CTR из соцсетей, а больший трафик и шеринги косвенно улучшают SEO-показатели.
Нужны ли разные og:image для разных соцсетей?
Не обязательно, но желательно. Рекомендуется 1200×630, Telegram лучше показывает квадратные (1080×1080) или портретные (1080×1920) картинки. Если одна картинка работает на всех платформах — это нормально, главное — минимум 1200×630.
Почему в разных соцсетях превью отличается?
Разные соцсети используют разные алгоритмы парсинга. Telegram может взять картинку из контента страницы, если og:image не указан или не загрузился. большинство платформ строго следует OG-тегам. Всегда настраивайте OG-теги — это универсальное решение.
Можно ли использовать animated GIF как og:image?
Некоторые платформы не поддерживают анимированные GIF в OG-тегах — покажется первый кадр. VK и Telegram могут показать анимацию. Для надёжности используйте статичные JPG/PNG/WebP.
Как часто нужно проверять OG-теги?
При каждом изменении дизайна или контента страницы. И регулярно — хотя бы раз в квартал, чтобы убедиться, что картинки не сломались и не устарели.