Когда ссылку на страницу вставляют в пост во ВКонтакте, Telegram, Одноклассниках или в чат мессенджера, платформа сама подтягивает заголовок, описание и картинку. Откуда она их берёт — определяете вы через разметку Open Graph и Twitter Cards. Если этих метатегов нет или они заполнены криво, соцсеть покажет случайный кусок текста и нерелевантную картинку, и кликабельность ссылки падает. Эта статья — практическое руководство по настройке OG-разметки: что писать в теги, какие нужны размеры картинок, как валидировать результат и какие ошибки чаще всего ломают превью.
Что такое Open Graph и зачем он нужен
Open Graph (OG) — протокол метаданных, который описывает, как страница должна выглядеть при репосте в соцсетях. Технически это набор <meta>-тегов в секции <head> HTML с атрибутом property="og:...". Когда пользователь делится ссылкой, краулер платформы (бот ВКонтакте или Telegram) заходит на страницу, читает эти теги и строит карточку-превью: крупная картинка, заголовок, описание, имя сайта.
Прямого влияния на ранжирование в Яндексе и Google разметка OG не оказывает — это не фактор алгоритмов вроде YATI или Core Web Vitals. Но косвенно она работает на поведенческие факторы: релевантное превью повышает кликабельность ссылки в соцсетях и мессенджерах, даёт дополнительный трафик и узнаваемость бренда. Для коммерческого сайта это особенно заметно, когда менеджеры пересылают карточки товаров в переписке.
Базовый набор тегов Open Graph
Минимально достаточный набор — четыре тега. Без них корректная карточка не соберётся:
<meta property="og:title" content="Гранитные памятники в Новосибирске — каталог и цены">
<meta property="og:description" content="Изготовление памятников из гранита от 18 000 ₽. Бесплатный выезд замерщика, рассрочка, гарантия 10 лет.">
<meta property="og:image" content="https://example.ru/img/og/granite-cover.jpg">
<meta property="og:url" content="https://example.ru/granite/">
<meta property="og:type" content="website">
Что важно по каждому тегу:
- og:title — заголовок карточки. Может отличаться от
<title>: в<title>держат SEO-формулировку с ключом в начале, а в og:title — более «человеческую», цепляющую. Оптимально до 60–70 символов, иначе платформа обрежет. - og:description — описание под заголовком, 140–200 символов. Уместны призыв к действию и конкретика (цена, условие), а не «вода».
- og:image — абсолютный URL картинки. Только полный путь с
https://, относительные адреса краулеры не примут. - og:url — канонический абсолютный адрес страницы. Должен совпадать с rel=canonical, чтобы все репосты «склеивались» на один URL.
- og:type — тип объекта:
websiteдля обычных страниц,articleдля статей,productдля товаров.
Дополнительно полезны og:site_name (имя сайта) и og:locale (ru_RU).
Требования к og:image: размеры и форматы
Картинка — главный элемент превью, на неё в первую очередь реагирует глаз в ленте. Площадки предъявляют конкретные требования к размеру и весу:
| Параметр | Рекомендация | Комментарий |
|---|---|---|
| Размер для большой карточки | 1200×630 px | Соотношение ~1,91:1 — стандарт для горизонтального превью |
| Минимальный размер | 600×315 px | Меньше — соцсеть покажет маленькую карточку или иконку |
| Вес файла | до 5 МБ (лучше до 1 МБ) | Тяжёлые картинки краулер может не загрузить |
| Формат | JPG / PNG / WebP | WebP поддерживают не все площадки — для OG безопаснее JPG |
| Абсолютный URL | обязательно | Только https://, без относительных путей |
| Текст на картинке | по центру, не у краёв | Платформы по-разному кадрируют превью |
Размер изображения можно явно указать тегами og:image:width и og:image:height, чтобы краулер не загружал файл целиком ради вычисления габаритов.
Twitter Cards: нужны ли отдельные теги
Twitter Cards — параллельный протокол от X (бывший Twitter), описывающий превью внутри этой соцсети. Теги помечаются name="twitter:...". Ключевой момент: если Twitter-тегов на странице нет, X подставит данные из Open Graph. Поэтому полностью дублировать разметку не обязательно — достаточно добавить несколько специфичных тегов поверх OG:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@chrome_media">
<meta name="twitter:title" content="Гранитные памятники в Новосибирске">
<meta name="twitter:image" content="https://example.ru/img/og/granite-cover.jpg">
Главный тег — twitter:card, он определяет тип карточки:
| Тип карточки | Когда применять |
|---|---|
summary |
Маленькая карточка с квадратной картинкой слева — для лаконичных анонсов |
summary_large_image |
Большое горизонтальное изображение сверху — стандарт для статей и товаров |
player |
Встроенный видео/аудиоплеер |
app |
Карточка с ссылкой на мобильное приложение |
Для большинства сайтов хватает summary_large_image плюс OG-разметки. На российском рынке X имеет ограниченную аудиторию, поэтому приоритет за корректным Open Graph, который читают ВКонтакте, Telegram, Одноклассники и WhatsApp.
Разметка для разных типов контента
Под тип страницы меняется og:type и набор дополнительных тегов — это важно для коммерческих проектов и блогов.
Статья блога (og:type="article"):
<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-06-05T10:00:00+07:00">
<meta property="article:author" content="https://example.ru/team/ivanov">
<meta property="article:section" content="Техническое SEO">
Связка с авторством работает на E-E-A-T: указание автора и даты публикации поддерживает сигналы экспертности, о которых мы писали в материале про structured data и Schema.org.
Карточка товара (og:type="product"): добавляют product:price:amount и product:price:currency — цена в превью повышает доверие для коммерческого интента.
OG и Schema.org решают разные задачи и не заменяют друг друга: OG отвечает за превью в соцсетях, а JSON-LD — за расширенные сниппеты в поиске. Их внедряют параллельно; детали — в гайде по JSON-LD для разных типов контента.
Валидация: как проверить разметку
Заполнить теги мало — нужно убедиться, что краулер их корректно считал. Инструменты валидации:
- Telegram — отправьте ссылку боту @WebpageBot: он обновит кэш превью и покажет, что подтягивается. Telegram агрессивно кэширует карточки, поэтому после правок старое превью держится — бот сбрасывает кэш.
- ВКонтакте — встройте ссылку в черновик поста: редактор сразу покажет карточку. Если она неверная, проверьте OG-теги и сбросьте кэш в инструментах для разработчиков.
- Facebook Sharing Debugger и X Card Validator — официальные валидаторы западных платформ; полезны для международной аудитории.
- Браузер — откройте исходный код (Ctrl+U) и проверьте, что
og:-теги физически присутствуют в<head>, а не дорисовываются JavaScript.
Последний пункт критичен для SPA и сайтов на JS-фреймворках: если OG-теги генерируются на клиенте, краулер соцсети их не увидит — он не исполняет JavaScript так, как браузер. Решение — серверный рендеринг (SSR) или пререндеринг метатегов. Та же проблема разобрана в статье про JavaScript и SEO.
Мини-кейс
На сайте клиента — региональном производителе памятников — карточки товаров при пересылке в Telegram и WhatsApp показывали логотип шапки вместо фото изделия и обрезанный заголовок «Главная — изготовление…». Причина: на всех страницах стоял один общий og:image (логотип) и og:title, заданный шаблоном CMS глобально.
Что сделали: для каждой карточки подставили og:image с фото конкретного памятника, og:title с названием модели и og:description с ценой и сроком изготовления. Прописали og:type="product" и абсолютные URL. После сброса кэша через @WebpageBot превью стали показывать релевантное фото и цену. Конкретных цифр прироста не приводим — задача была устранить техническую ошибку, ломавшую превью при каждой пересылке.
⚠️ Частые ошибки и риски
- Относительный путь в og:image.
content="/img/cover.jpg"краулер не загрузит — нужен абсолютный URL с доменом иhttps://. - OG-теги генерируются через JavaScript. Боты соцсетей не исполняют JS — теги должны быть в HTML сразу. Для SPA нужен SSR или пререндеринг.
- Один og:image и og:title на весь сайт. Шаблонная заглушка вместо уникального превью на каждой странице обесценивает разметку.
- Картинка меньше 600×315 px или битый URL. Платформа покажет иконку-заглушку вместо превью.
- og:url не совпадает с rel=canonical. Репосты «размазываются» по разным адресам, а не склеиваются на канонический URL.
- ⚠️ РИСК: кликбейтный og:title/og:description, не соответствующий содержимому страницы, — путь к высокому показателю отказов. Пользователь кликнул на обещание, не получил его и вернулся в ленту. Это ухудшает поведенческие факторы, а накрутка превью «ради клика» противоречит белым методам.
FAQ
Влияет ли Open Graph на позиции в Яндексе и Google?
Напрямую — нет, OG не входит в факторы ранжирования. Влияние косвенное: качественное превью повышает кликабельность ссылок в соцсетях, а значит трафик и узнаваемость бренда.
Нужно ли дублировать Twitter Cards, если есть Open Graph?
Полностью — нет. При отсутствии twitter-тегов X берёт данные из OG. Достаточно добавить twitter:card="summary_large_image" и при желании twitter:site.
Какой размер картинки оптимален?
1200×630 px для большой горизонтальной карточки (~1,91:1). Минимум — 600×315 px. Важный текст держите ближе к центру: платформы по-разному кадрируют превью.
Почему в Telegram показывается старое превью после правок?
Telegram кэширует карточки. Отправьте ссылку боту @WebpageBot — он сбросит кэш и подтянет актуальную разметку.
Почему OG-теги не работают на сайте на React/Vue?
Скорее всего теги добавляются через JavaScript, а краулеры соцсетей JS не исполняют. Нужен серверный рендеринг (SSR) или пререндеринг метатегов в исходном HTML.
Материал подготовлен экспертами Chrome Media — агентства SEO и digital-маркетинга. Помогаем настроить техническое SEO и разметку для соцсетей так, чтобы каждая ссылка работала на трафик и бренд.
Добавить комментарий