Open Graph — это набор метатегов, который сообщает соцсетям и мессенджерам, как показать вашу ссылку: какой заголовок, описание и картинку поставить в карточку. Разметка живёт в коде страницы и никак не видна обычному посетителю — зато её сразу видно, когда ссылкой делятся.
Сразу к вопросу, который волнует чаще всего: на позиции в поиске Open Graph не влияет. Ниже — что он действительно даёт, как его настроить и почему после правок в мессенджере ещё неделю висит старая картинка.
Что такое Open Graph и что он меняет
Когда человек отправляет ссылку в мессенджер или публикует её в соцсети, платформа заходит на страницу и собирает карточку-превью. Если разметки нет, она делает это на своё усмотрение — и результат обычно неудачный.
Что подставляет платформа без разметки: заголовок берёт из тега title, описание — из первого попавшегося текста на странице, а картинку выбирает сама из тех, что нашла в коде. Это может оказаться логотип, иконка соцсети из подвала или вообще ничего. Встречается и худший вариант: карточка вообще не формируется, и в переписке остаётся голая ссылка.
Разметка убирает случайность. Вы явно указываете, что показать, и ссылка выглядит одинаково предсказуемо везде — в Телеграме, ВКонтакте, в рабочих чатах.
Влияет ли Open Graph на SEO
Здесь стоит быть точным, потому что в статьях на эту тему часто путают.
На ранжирование — не влияет. Ни Яндекс, ни Google не используют og-теги как фактор при определении позиций. Это разметка для социальных платформ, поисковые системы берут заголовок и описание страницы из title и description. Разметка Open Graph не поднимет сайт в выдаче, и обещать обратное некорректно.
Косвенное влияние есть, и оно реальное. Аккуратная карточка заметнее в ленте и в переписке, по ней чаще переходят. Больше переходов — больше посетителей, глубже вовлечение, а поведение пользователей поисковики уже учитывают. Механику этой связи мы разбирали в материале про поведенческие факторы.
Практический вывод: настраивать Open Graph нужно, но не как «работу над позициями», а как работу над тем, чтобы ссылками на вас делились охотнее.
Обязательный минимум
Четыре тега закрывают почти всё. Размещаются они внутри <head> страницы:
<meta property="og:title" content="Название материала — коротко и по делу">
<meta property="og:description" content="Одно-два предложения о том, что внутри.">
<meta property="og:image" content="https://site.ru/images/preview.jpg">
<meta property="og:url" content="https://site.ru/stranica/">
<meta property="og:type" content="article">
Что здесь важно:
og:title — не обязан совпадать с тегом title страницы. В поиске заголовок должен содержать запрос, а в соцсети — заинтересовать человека, который листает ленту. Это разные задачи, и дублировать одно в другое стоит только если формулировка одинаково хороша для обеих.
og:description — то же самое: короткое живое описание, а не набор ключевых слов. Длинный текст всё равно обрежется, ориентируйтесь на 100–150 символов.
og:image — только абсолютный путь, начиная с https://. Относительный путь вида /images/preview.jpg не сработает: платформа не знает, от какого домена его отсчитывать. Это ошибка номер один.
og:url — канонический адрес страницы. Помогает платформам склеивать статистику репостов, если на страницу ведут ссылки с разными параметрами.
og:type — тип содержимого: article для статей, website для обычных страниц, product для товаров.
Картинка: размеры и требования
| Платформа | Рекомендуемый размер | Пропорции | Ограничение |
|---|---|---|---|
| Универсальный вариант | 1200 × 630 | 1,91 : 1 | до 5 МБ |
| ВКонтакте | 1200 × 630 | 1,91 : 1 | до 5 МБ |
| Телеграм | 1200 × 630 | 1,91 : 1 | до 5 МБ |
| 1200 × 630 | 1,91 : 1 | до 600 КБ | |
| 1200 × 627 | 1,91 : 1 | до 5 МБ | |
| Одноклассники | 1200 × 630 | 1,91 : 1 | до 5 МБ |
Практически везде работает один размер — 1200 × 630 пикселей. Это соотношение 1,91 : 1, и на него ориентируются почти все платформы.
Что происходит при других пропорциях: картинку обрежут по центру. Квадратное изображение потеряет верх и низ, вертикальное — почти всё. Поэтому важные детали — текст, лицо, логотип — держите ближе к центру, не у краёв.
Отдельно про вес. WhatsApp заметно строже остальных: тяжёлый файл он может просто не подтянуть. Разумный ориентир — держать превью в пределах 200–300 КБ, этого хватает для качественной картинки в webp или хорошо сжатом jpeg. Заодно это не тормозит саму страницу — тема, которую мы разбирали в материале про скорость загрузки.
Что писать в заголовке и описании
Теги заполнены — это ещё не значит, что карточка работает. Разница между «разметка есть» и «по ссылке кликают» лежит в формулировках.
Заголовок. В поиске он должен содержать запрос, потому что человек ищет словами. В соцсети никто ничего не ищет — там листают ленту, и заголовок должен зацепить за полсекунды. Поэтому дословный перенос сюда поискового заголовка обычно проигрывает.
Было: «Технический аудит сайта: что это, как провести — гайд 2026». Стало: «Что ломается на сайте чаще всего — и как это найти за вечер».
Первый вариант хорош для выдачи: он содержит запрос и год. Второй — для ленты: он обещает конкретный результат и не выглядит как строка из справочника.
Описание. Здесь работает правило «одна мысль, которой нет в заголовке». Повторять заголовок другими словами бессмысленно — место маленькое, и его лучше потратить на то, что усилит интерес: цифру, неожиданный факт, обещание конкретики.
Было: «В этой статье мы рассказываем о техническом аудите сайта и его этапах». Стало: «Разбираем 28 пунктов проверки — от кодов ответа до скорости, с таймингом на каждый».
Чего избегать. Кликбейта, который не подтверждается на странице: человек перейдёт, не найдёт обещанного и закроет вкладку. В соцсетях это заметно быстрее, чем в поиске, — там сразу видно, что репостов нет, а переходы не конвертируются.
Особенности российских платформ
Стандарт общий, но ведут себя площадки по-разному, и это стоит учитывать.
Телеграм показывает превью компактно: небольшая картинка, короткий заголовок, обрезанное описание. Он же чаще других держит устаревший кэш — именно с ним связано большинство жалоб на «старую картинку». Зато Телеграм умеет показывать крупное изображение, если пропорции близки к рекомендуемым.
ВКонтакте даёт карточке больше места и заметно строже относится к качеству изображения: мелкая картинка превращается в маленькую врезку сбоку, и весь эффект теряется. У платформы есть собственный инструмент проверки ссылок, который заодно обновляет кэш — самый удобный способ увидеть, как всё выглядит на самом деле.
Одноклассники работают по тем же тегам, отдельной разметки не требуют. Специфика в аудитории: там заметно лучше отзываются на понятные бытовые формулировки, чем на профессиональную терминологию.
Рабочие мессенджеры — тот случай, о котором забывают. Ссылками на статьи и коммерческие страницы часто делятся в корпоративных чатах, и там карточка формируется по тем же og-тегам. Для B2B-сайта это иногда более важный канал, чем публичные соцсети.
Динамические превью: одна картинка на сайт или своя для каждой страницы
Ставить одно изображение на весь сайт проще всего, и как запасной вариант это допустимо. Но карточка тогда не говорит ничего о конкретном материале: во всех репостах одинаковая обложка, и человек не понимает, чем эта ссылка отличается от предыдущей.
Разумная середина — генерация превью по шаблону. Схема простая: делается заготовка с фирменным оформлением, а заголовок материала подставляется в неё автоматически при сборке страницы. Так каждая статья получает своё изображение, а ручной работы не прибавляется.
Реализуется это по-разному в зависимости от того, на чём сделан сайт: на статических генераторах картинка собирается при сборке, на CMS — плагином или скриптом, на конструкторах чаще всего никак, и там остаётся загружать изображения вручную для важных страниц.
Практическое правило: своя картинка обязательно нужна главной, ключевым коммерческим страницам и материалам, которыми вы планируете делиться. Для остальных достаточно шаблонной заготовки.
Почему в мессенджере старая картинка
Самая частая жалоба по теме: разметку поправили, картинку заменили, а в Телеграме по-прежнему висит прежнее превью. Причём у коллеги в другом мессенджере — уже новое.
Механика. Платформы кэшируют превью. Один раз зайдя на страницу, соцсеть сохраняет карточку у себя и при следующих отправках той же ссылки заново к вам не обращается. Срок хранения у всех разный — от нескольких часов до месяца и дольше. Ваш сайт при этом ни при чём: изменения уже на месте, их просто не запрашивают.
Как сбросить:
- Отладчики платформ. У части соцсетей есть инструмент проверки ссылки, который заодно принудительно обновляет кэш. Достаточно вставить туда адрес и запустить проверку.
- Параметр к ссылке. Универсальный приём: добавить к адресу безобидный параметр — например
?v=2. Платформа считает это новым адресом и собирает превью заново. Оговорка: такие ссылки не стоит размещать на самом сайте, чтобы не плодить адреса-дубли в индексе. Для разовой отправки в чат приём безопасен. - Подождать. Кэш истекает сам. Вариант рабочий, но непредсказуемый по срокам.
Если превью не появилось вообще, проверьте по порядку:
- Картинка открывается по прямой ссылке в браузере в режиме инкогнито — то есть доступна без авторизации и не отдаёт ошибку.
- Путь абсолютный, с доменом и протоколом.
- Папка с изображениями не закрыта в robots.txt — иначе часть платформ до файла не доберётся.
- Теги стоят внутри
<head>, а не в теле страницы. - На странице нет второго комплекта og-тегов от плагина или темы — при конфликте платформа может взять не тот.
Как добавить разметку
Вручную в шаблон. Подходит, если сайт на статическом генераторе или у вас есть доступ к шаблонам. Теги добавляются в общий <head>, а значения подставляются из данных страницы — заголовка, описания, обложки. Один раз настроили — работает на всех материалах.
Через плагин CMS. У популярных движков есть SEO-модули, которые добавляют og-теги автоматически, часто дублируя их из title и description. Быстро, но требует проверки: плагины любят ставить одну картинку на весь сайт и не всегда дают переопределить её для конкретной страницы.
На конструкторе. В большинстве конструкторов поля для превью есть в настройках страницы — там задаётся картинка и описание для соцсетей. Возможности ограничены, но базовый набор закрывается.
Какой бы способ вы ни выбрали, результат проверяется одинаково: открыть исходный код страницы и убедиться, что теги на месте и значения подставились правильные.
Типичные ошибки
| Ошибка | Как проявляется | Как исправить |
|---|---|---|
| Относительный путь к картинке | Превью без изображения | Указать полный адрес с https:// |
| Картинка закрыта в robots.txt | Превью пустое у части платформ | Открыть папку с изображениями |
| og:title дублирует title дословно | Карточка выглядит как строка из выдачи | Написать отдельный живой заголовок |
| Слишком длинное описание | Текст обрезается на полуслове | Уложиться в 100–150 символов |
| Два комплекта тегов на странице | Превью берётся непредсказуемо | Убрать дубли от плагина или темы |
| Картинка меньше 600 × 315 | Показывается мелкой врезкой сбоку | Заменить на 1200 × 630 |
| Теги вне head | Платформа их не видит | Перенести внутрь head |
Как проверить
Первое — исходный код страницы: открыть и найти в нём og-теги. Если их нет, дальше проверять нечего, проблема в шаблоне или плагине.
Второе — отладчики платформ. Они показывают, как соцсеть видит вашу страницу, и подсвечивают, чего не хватает.
Третье, самое надёжное — отправить ссылку самому себе. В разных мессенджерах, потому что каждая платформа обрезает картинку и текст по-своему. То, что идеально выглядит в Телеграме, во ВКонтакте может потерять половину заголовка.
Отдельно стоит проверять не только статьи, но и коммерческие страницы. Разметку обычно настраивают для блога, а про каталог и страницы услуг забывают — при том что именно их чаще отправляют в личных сообщениях, когда советуют подрядчика или товар. Ссылка без превью в такой переписке выглядит как случайно скинутый адрес, а с аккуратной карточкой — как рекомендация.
И последнее: проверку имеет смысл повторять после любых работ с шаблоном сайта. Разметка ломается незаметно — она не влияет ни на вёрстку, ни на работу страницы, поэтому пропажу тегов после обновления темы или переноса сайта обычно замечают спустя месяцы, случайно отправив кому-то ссылку.
Open Graph и микроразметка Schema.org: в чём разница
Их регулярно путают, хотя работают они в разных местах.
Open Graph отвечает за то, как ссылка выглядит в соцсетях и мессенджерах. Потребители разметки — ВКонтакте, Телеграм, WhatsApp и прочие платформы. Поисковики её игнорируют.
Schema.org отвечает за то, как страница выглядит в поисковой выдаче: рейтинги, цены, вопросы-ответы, хлебные крошки. Потребители — Яндекс и Google. Соцсети её не используют.
Одна не заменяет другую, нужны обе, и они не конфликтуют между собой. Как внедрять Schema.org и какие типы разметки бывают, разбираем в отдельной статье про микроразметку. А то, как выглядит и из чего собирается ваш результат в поиске, — в материале про сниппет сайта.
Чек-лист
- Четыре обязательных тега на месте: og:title, og:description, og:image, og:url.
- Все теги внутри
<head>. - Путь к картинке абсолютный, с доменом и https.
- Картинка 1200 × 630, важные детали не у краёв.
- Вес превью в пределах 200–300 КБ.
- Картинка открывается по прямой ссылке без авторизации.
- Папка с изображениями не закрыта в robots.txt.
- На странице нет второго комплекта og-тегов.
- og:title и og:description написаны для человека, а не скопированы из мета.
- Ссылка проверена отправкой минимум в двух мессенджерах.
Что дальше
Open Graph — небольшая, но заметная часть технической опрятности сайта. Обычно вместе с ней всплывает и остальное: незакрытые служебные страницы, дубли, битые пути к файлам, медленная загрузка.
Если хотите увидеть полную картину по своему сайту, это делается в рамках аудита — отдельной услуги от 5 000 ₽ с отчётом, где по каждой находке расписано, что исправить и в каком порядке.
