Метатег Open Graph

Метатег Open Graph решает судьбу ссылки за долю секунды: человек видит в ленте или в чате либо аккуратную карточку с картинкой и внятным заголовком, либо голый адрес с обрывком случайного текста. Кликают по ним по-разному, а трафик в обоих случаях достаётся вам бесплатно — из репостов, рассылок, рабочих чатов и подборок. Разница только в том, потратили вы час на разметку или нет.

В SEO я с 2005 года и вижу одну и ту же картину на проверках чужих сайтов: техническая часть более-менее в порядке, тексты писали не бесплатно, а ссылка в Telegram разворачивается в серую заглушку с логотипом хостинга. Ниже — как устроена эта разметка, какие теги действительно нужны, почему превью упорно показывает старую картинку и как проверить результат до того, как ссылку увидят сотни людей.

Что делает разметка Open Graph и где вы её видите

Open Graph — набор мета-тегов в секции head, которые описывают страницу для внешних площадок: какой показать заголовок, какое описание, какую картинку, к какому типу отнести содержимое. Протокол придумали в Facebook, но он давно перестал быть его собственностью: теги читают ВКонтакте, Telegram, Одноклассники, Viber, WhatsApp, Slack, многие почтовые клиенты и агрегаторы ссылок.

Механика простая. Когда площадка встречает адрес, она отправляет собственного робота, скачивает HTML, находит теги og: и собирает превью. Дальше страница ей больше не нужна — карточка живёт в кэше площадки. Если тегов нет, робот пытается угадать: берёт title, первый попавшийся кусок текста и первую картинку в коде. Первой картинкой на большинстве сайтов оказывается логотип, иконка корзины или спейсер в один пиксель.

На позиции в Яндексе разметка не влияет — это не фактор ранжирования, и обещания «поднять сайт через Open Graph» стоит слушать с осторожностью. Влияет она на другое: на долю кликов там, где ваша ссылка конкурирует с чужими в одной ленте. Косвенный эффект для поиска тоже есть, но он длинный: больше переходов и упоминаний — выше узнаваемость бренда, больше брендовых запросов, устойчивее позиции по ним.

Минимальный набор тегов и что писать в каждом

Обязательных тегов немного. Всё остальное — уточнения, которые нужны не каждому проекту.

Тег	Что задаёт	Практическое правило
og:title	Заголовок карточки	До 60–70 знаков. Может отличаться от title: здесь важнее интрига и польза, а не точное вхождение ключа
og:description	Текст под заголовком	120–160 знаков. Не пересказ заголовка, а причина кликнуть: конкретика, цифра, вопрос
og:image	Картинку превью	Абсолютный URL, 1200×630, до 5 МБ, публично доступен без авторизации
og:url	Канонический адрес	Один и тот же для всех вариантов ссылки: без utm, без слеша-дубля, без index.php
og:type	Тип содержимого	article для статей блога, website для главной и разделов, product для карточки товара
og:site_name	Название площадки	Короткое имя сайта или бренда — часть площадок выводит его мелким шрифтом над заголовком
og:locale	Язык и регион	ru_RU. Нужен, если есть версии на других языках

Заголовок и описание в карточке живут по законам ленты, а не поисковой выдачи. В выдаче человек уже что-то ищет и читает сниппет с намерением. В ленте он листает и не искал ничего — карточка должна дать повод остановиться. Поэтому в og:title хорошо работает конкретика вместо обобщения: не «Как продвигать сайт», а «Почему заявки падают, когда трафик растёт».

Отдельно про og:url. Этот тег склеивает репосты. Если один и тот же материал расшарили с меткой рассылки, с меткой рекламы и без меток, площадка при указанном каноническом адресе будет считать их одной ссылкой. Без тега получите три разные записи, каждая со своим счётчиком, и на самой ссылке это выглядит как менее популярный материал.

Картинка превью: размеры, вес и типичные поломки

Больше всего проблем даёт именно og:image — и почти всегда по одной из пяти причин.

Смежный материал по теме — «Open Graph: как ссылка на ваш сайт выглядит в Telegram и WhatsApp — и почему это заявки».

• Относительный путь. /uploads/cover.jpg вместо https://site.ru/uploads/cover.jpg. Часть площадок достроит адрес, часть — нет, и превью соберётся по-разному в разных мессенджерах.
• Неверные пропорции. Горизонталь примерно 1,91 к 1 — это 1200×630. Квадрат обрежут по краям, вертикаль сожмут в узкую полоску, мелкое изображение площадка покажет иконкой слева, а не большим блоком.
• Слишком большой файл. Робот превью работает с таймаутом. Обложка на 4–5 МБ иногда не успевает скачаться, и карточка собирается без картинки. Держите вес до 300–500 КБ.
• Картинка закрыта. Изображение отдаётся только авторизованным, лежит за защитой от хотлинка или отдаётся с редиректом на другой домен. Робот площадки — не браузер и не пользователь, куки ему не передадут.
• Текст на всю обложку. В мобильной ленте карточка сжимается до ширины экрана. Крупные надписи из трёх слов ещё читаются, абзац мелким шрифтом превращается в шум.

Полезная привычка — задавать рядом с картинкой её размеры и тип: og:image:width, og:image:height, og:image:type. Это позволяет площадке зарезервировать место в ленте до того, как файл скачался, и снижает шанс, что при медленном ответе сервера карточка соберётся без изображения. Для скриншотов интерфейсов пригодится og:image:alt — текстовое описание для тех, кто пользуется экранным диктором.

Кто какие теги читает: OG, Twitter Card и микроразметка

Вокруг разметки для превью крутятся три разных стандарта, и их регулярно путают. Схема ниже показывает, кто за что отвечает.

Стандарт	Кто читает	Что даёт	Нужен ли вам
Open Graph	ВКонтакте, Telegram, Одноклассники, мессенджеры, почтовые клиенты, Slack	Карточку ссылки: картинка, заголовок, описание	Да, это база
Twitter Card	X (бывший Twitter), часть сторонних клиентов	Свой формат карточки, при отсутствии подхватывает og:	Только если ведёте там аккаунт
Schema.org / JSON-LD	Поисковые системы	Расширенные сниппеты в выдаче: хлебные крошки, рейтинг, FAQ, цена	Да, но это отдельная задача
Мета description	Поисковые системы	Текст сниппета в выдаче	Да, и он не заменяет og:description

Главный вывод из таблицы: Open Graph и микроразметка Schema.org решают разные задачи и не подменяют друг друга. Разметка товара с ценой и наличием влияет на вид сниппета в поиске, но не даёт красивого превью в Telegram. И наоборот — идеальная карточка ссылки никак не улучшает выдачу.

Подробнее — в моём курсе по продвижению сайтов:

8:14

Про Twitter Card часто спрашивают, стоит ли его ставить российскому бизнесу. Если аккаунта в X нет и не планируется, смысла мало: площадка при отсутствии своих тегов уверенно подхватывает og:. Если аккаунт есть, добавьте один тег twitter:card со значением summary_large_image — этого достаточно, чтобы карточка развернулась в крупный формат, остальное возьмётся из Open Graph.

Как разметка ставится на разных движках

Способ зависит от того, на чём собран сайт, но принцип общий: теги должны формироваться автоматически из данных страницы, а не прописываться руками для каждой публикации. Ручной вариант живёт ровно до первой правки заголовка.

1. WordPress. Разметку выдают SEO-плагины уровня Yoast, Rank Math, All in One SEO. В настройках выбирается источник картинки — как правило, миниатюра записи. Проверьте, чтобы плагин был один: два плагина ставят два комплекта тегов, и площадка возьмёт первый попавшийся.
2. MODX. Теги пишутся прямо в шаблоне через плейсхолдеры полей ресурса: заголовок из pagetitle или longtitle, описание из introtext, картинка из поля с обложкой. Отдельный плагин не нужен.
3. 1С-Битрикс. В большинстве сборок есть свойства страницы под OG-данные, а карточки товаров заполняются из свойств инфоблока. Проверять надо именно карточки: главная и разделы обычно настроены, а товары получают одну картинку на весь каталог.
4. Самописный движок. Теги добавляются в общий шаблон head с подстановкой полей. Обязательно предусмотрите запасную обложку на случай, если у материала нет своей картинки, — иначе тег уйдёт пустым, а пустой og:image хуже отсутствующего.
5. Конструкторы сайтов. Настройки превью обычно спрятаны в свойствах отдельной страницы. Ограничение типовое: одна картинка на весь сайт и отсутствие подстановки заголовка конкретной статьи.

Отдельная развилка — сайты, которые собираются в браузере. Если содержимое страницы дорисовывает JavaScript, робот превью его не увидит: он читает первый HTML-ответ и не выполняет скрипты. Теги должны приходить с сервера в исходном коде. Проверяется это за минуту: откройте исходный код страницы сочетанием Ctrl+U и поищите og:. Если в исходнике их нет, а в инспекторе элементов есть — проблема именно в этом.

Если нужны детали, смотрите «Метатег abstract что это такое».

Кэш превью: почему изменения не видны

Самая частая жалоба звучит так: «поменяли картинку, а в мессенджере всё равно старая». Дело почти всегда в кэше площадки, а не в вашем сайте. Каждый сервис хранит собранное превью у себя и не перезапрашивает страницу при каждом новом репосте — иначе популярная ссылка положила бы сервер.

Площадка	Как сбросить превью
ВКонтакте	Прогнать адрес через встроенный отладчик ссылок в разделе разработчика — он перезапрашивает страницу
Telegram	Написать боту @WebpageBot и отправить ему ссылку: он обновляет карточку в кэше
Свой сайт	Сбросить кэш страниц на стороне сайта и CDN, иначе площадка получит старый HTML
Любая площадка	Добавить к картинке версию в имени файла: cover-v2.jpg вместо перезаписи cover.jpg

Последний приём — самый надёжный. Площадка кэширует по адресу картинки: если адрес изменился, старого файла у неё просто нет, и она скачает новый. Перезапись файла под тем же именем в половине случаев не даст ничего ни в кэше площадки, ни в кэше браузера.

Ошибки, из-за которых карточка собирается неправильно

Список собран по разборам чужих сайтов и отсортирован по частоте, с которой я на них натыкаюсь.

Симптом	Причина	Что делать
Вместо обложки логотип или иконка	Тега og:image нет, площадка взяла первую картинку в коде	Добавить тег с абсолютным адресом обложки
Картинка обрезана по краям	Пропорции не 1,91:1	Пересобрать обложку под 1200×630, важное держать в центре
Превью не появляется вообще	Страница отдаёт 404 или редирект роботу площадки, либо закрыта в robots.txt	Проверить код ответа и доступность для сторонних роботов
Описание обрывается на середине слова	og:description собирается автоподстановкой из первых символов текста	Задать описание отдельным полем, а не срезом абзаца
Два разных превью в разных чатах	Дублирующиеся теги от двух плагинов или от плагина и шаблона	Оставить один источник разметки
Заголовок карточки — название сайта	og:title жёстко прописан в общем шаблоне	Подставлять заголовок конкретной страницы
Ссылка ведёт на версию с меткой рекламы	Не задан og:url	Указать канонический адрес без параметров

Особенно неприятен случай с закрытым доступом. Некоторые системы защиты от ботов отдают роботу превью страницу-заглушку с проверкой браузера. С точки зрения защиты всё логично, с точки зрения ссылки — карточка собирается из текста этой заглушки. Если карточка выглядит одинаково странно на всех площадках, начинайте проверку именно с защитных сервисов и правил на стороне сервера.

Как проверить разметку перед публикацией

Проверка занимает пару минут и экономит гораздо больше. Порядок такой.

• Открыть исходный код страницы и убедиться, что теги og: есть именно в нём, а не появляются после выполнения скриптов.
• Скопировать адрес из og:image и открыть в отдельной вкладке: картинка должна отдаваться напрямую, без редиректов и без запроса авторизации.
• Прогнать адрес через отладчик ссылок ВКонтакте — он показывает собранное превью и ошибки.
• Отправить ссылку самому себе в Telegram и в почте: это два самых разных по поведению клиента, и что работает в обоих, обычно работает везде.
• Проверить на телефоне, а не только на компьютере: обрезка и размер шрифта в мобильной ленте другие.
• Проверить не одну страницу, а по одной из каждого типа: главную, раздел, статью, карточку товара. Ошибки почти всегда сидят в конкретном шаблоне.

Если нужна помощь по теме — обучение SEO-продвижению.

Последний пункт важнее остальных. Владельцы сайтов проверяют главную, видят красивую карточку и успокаиваются, а делятся люди чаще всего страницами товаров и статьями — где обложки как раз и не настроены.

Подробнее об этом — в статье «Как оптимизировать метатег title на сайте: инструкция по шагам».

Зачем разметка нужна в эпоху нейросетей

За последние годы у Open Graph появилась вторая жизнь, о которой редко пишут. Ссылками всё чаще обмениваются не в лентах соцсетей, а в рабочих чатах, в почте и в диалогах с языковыми моделями. Механизм превью там тот же самый: клиент читает разметку и показывает карточку.

Для сервисов, которые собирают краткое содержание страницы по ссылке, теги og:title и og:description — самый короткий и однозначный источник данных о том, что на странице. Внятно заполненная разметка снижает вероятность, что материал перескажут по случайному куску текста из бокового блока. Никакой гарантии тут нет, но это дешёвое действие с понятным механизмом.

Есть и практическая мелочь для B2B. В корпоративных мессенджерах ссылка на коммерческое предложение или на страницу услуги разворачивается в карточку, которую видит вся рабочая группа. Аккуратное превью с названием услуги и понятным описанием — часть первого впечатления о подрядчике, ровно как и сам сайт.

Частые вопросы

Влияет ли Open Graph на позиции в поиске? Напрямую нет, это не фактор ранжирования ни в Яндексе, ни в Google. Влияние косвенное и отложенное: карточка повышает долю кликов из соцсетей и мессенджеров, растёт трафик и число упоминаний бренда, а брендовый спрос уже виден поиску. Ждать движения позиций через неделю после установки тегов не стоит.

Нужен ли og:description, если есть обычный description? Нужен, потому что задачи разные. Мета-описание пишется под выдачу и содержит ключевые слова, описание для карточки — под ленту и содержит причину кликнуть. Технически площадка возьмёт description при отсутствии og-версии, но текст будет звучать как сниппет, а не как приглашение.

Что делать, если у статьи нет своей картинки? Задать в шаблоне запасную обложку — фирменную заставку с названием сайта. Она хуже уникальной картинки, но заметно лучше пустого тега, при котором площадка снова начнёт угадывать и подставит логотип из шапки.

Сколько тегов og:image можно ставить? Технически несколько, и часть площадок покажет выбор из нескольких изображений. На практике проще ставить один: при нескольких тегах разные сервисы берут разные картинки, и предсказать вид карточки становится невозможно.

Как быть с интернет-магазином, где тысячи карточек? Собирать теги из данных товара автоматически: заголовок из названия, описание из краткого текста, картинку из главного изображения товара. Ручное заполнение тут не масштабируется. Проверять достаточно несколько карточек из разных категорий — они собраны по одному шаблону.

Почему в почте карточка выглядит иначе, чем в мессенджере? Потому что каждый клиент сам решает, что показывать и в каком размере. Часть почтовых сервисов вообще не грузит внешние картинки до разрешения пользователя. Задача разметки — дать корректные данные, а верстку карточки площадка делает по-своему.

Коротко

• Разметка Open Graph управляет видом ссылки в соцсетях, мессенджерах и почте; на ранжирование она не влияет, на кликабельность — заметно.
• Обязательный минимум: og:title, og:description, og:image, og:url, og:type. Остальное — уточнения под конкретные задачи.
• Картинка 1200×630, абсолютный адрес, вес до 500 КБ, открытый доступ без авторизации — четыре условия, нарушение любого ломает превью.
• Теги должны формироваться шаблоном из данных страницы, а не прописываться вручную, и приходить в первом HTML-ответе, а не дорисовываться скриптами.
• Старая картинка после правки — это кэш площадки: сбрасывается отладчиком ВКонтакте, ботом @WebpageBot в Telegram или новым именем файла.
• Проверять нужно по одной странице каждого типа — главную, раздел, статью, карточку товара, — потому что ошибки сидят в шаблоне, а не в отдельной публикации.

Если после проверки выяснилось, что разметка стоит криво не только в превью, а по всему сайту — мета-теги дублируются, канонические адреса спорят друг с другом, часть шаблонов вообще без разметки, — приходите на SEO-консультацию: посмотрим исходный код ключевых шаблонов и разберём, что чинить в первую очередь.