Open Graph и Twitter Cards: красивые ссылки в соцсетях и мессенджерах
Когда вы отправляете ссылку на свой сайт в Telegram, ВКонтакте или WhatsApp, происходит маленькое чудо или маленькая катастрофа: либо разворачивается аккуратная карточка с заголовком, описанием и красивой картинкой, либо в чат падает голый URL без единого намёка на то, что за ним скрывается. Разница между этими двумя сценариями определяется буквально десятком строк в разделе <head> вашего сайта — разметкой Open Graph и Twitter Cards. Это не магия и не сложная технология, но именно она решает, кликнут ли по вашей ссылке те сотни людей, которым её переслали в мессенджере, или пролистают мимо. В этой статье разберём протокол Open Graph до последнего тега, покажем экранированные примеры кода, требования к изображениям, инструменты отладки и типичные ошибки, из-за которых красивая карточка превращается в тыкву.
Что такое Open Graph Protocol и зачем он нужен
Open Graph Protocol — это стандарт разметки, придуманный изначально в Facebook, который позволяет любой веб-странице описать саму себя для социальных сетей и мессенджеров. Когда платформа встречает ссылку, она не загружает страницу целиком и не пытается угадать, что на ней важно. Вместо этого она читает специальные метатеги в разделе <head> и из них собирает превью — ту самую карточку с заголовком, описанием и картинкой. Без этой разметки социальная сеть вынуждена гадать: брать заголовок из тега <title>, выдёргивать первый попавшийся абзац и хватать случайное изображение со страницы, которое чаще всего оказывается логотипом, иконкой или баннером из шапки.
Представьте две ситуации. В первой пользователь пересылает другу ссылку на ваш разбор услуги, и в чате появляется лаконичная карточка: чёткий заголовок, одно ёмкое предложение описания и фотография, которая визуально объясняет суть. Во второй — в чат падает строка вида https://site.ru/?p=1842&utm_source=tg, и больше ничего. Какую из ссылок откроют чаще, объяснять не нужно. Open Graph превращает сырой URL в визуальный объект, который привлекает внимание и сообщает контекст ещё до клика.
Важно понимать: Open Graph никак не отображается на самой странице. Это служебная информация, которую видят только роботы социальных платформ. Поэтому проверить её на глаз, открыв сайт в браузере, невозможно — нужны специальные отладчики, о которых поговорим ниже. Эта особенность и порождает большинство проблем: разметка вроде бы есть, но работает не так, как ожидалось, и заметить это можно только в момент шеринга.
Open Graph — это лицо вашей ссылки в социальных сетях. Контент может быть гениальным, но если карточка выглядит как ошибка, по ней просто не кликнут.
Базовые теги Open Graph: разбираем каждый
Разметка Open Graph состоит из метатегов с атрибутом property, который всегда начинается с префикса og. Минимально необходимый набор включает четыре тега, но для полноценного результата стоит заполнить семь. Каждый тег размещается внутри раздела <head> и имеет одинаковую структуру: <meta property=»og:ИМЯ» content=»ЗНАЧЕНИЕ»>. Разберём их по очереди.
Обязательный минимум: четыре кита
Тег og:title задаёт заголовок карточки. Он не обязан совпадать с тегом <title> страницы — иногда для соцсетей стоит сформулировать более цепляющий вариант. Оптимальная длина — до 60–70 символов, чтобы текст не обрезался. Пример: <meta property=»og:title» content=»Open Graph и Twitter Cards: красивые ссылки в соцсетях»>.
Тег og:description — короткое описание, которое выводится под заголовком. Здесь хорошо работает одно-два предложения, раскрывающих ценность материала, на 150–200 символов. Пример: <meta property=»og:description» content=»Полный разбор разметки Open Graph: теги, требования к картинке, отладка и типичные ошибки»>.
Тег og:image — самый важный и самый капризный. Он указывает абсолютный URL изображения для превью. Именно картинка занимает большую часть карточки и притягивает взгляд. Пример: <meta property=»og:image» content=»https://site.ru/wp-content/uploads/og-cover.jpg»>. Подробные требования к этому изображению разберём в отдельном разделе, потому что именно с ним связано большинство ошибок.
Тег og:url задаёт канонический адрес страницы. Он сообщает платформе единственно верный URL материала, чтобы все лайки, репосты и счётчики привязывались к одному адресу, а не размывались между версиями с разными UTM-метками и параметрами. Пример: <meta property=»og:url» content=»https://site.ru/open-graph-twitter-cards/»>.
Дополнительные теги для полноты картины
Тег og:type описывает тип контента. Для статей блога используется значение article, для главной страницы и разделов — website, для товаров в магазине — product. Пример: <meta property=»og:type» content=»article»>. Тип article открывает доступ к дополнительным тегам — времени публикации, автору, разделу, — которые помогают платформам точнее категоризировать материал.
Тег og:site_name указывает название сайта целиком. Оно выводится мелким шрифтом и формирует узнаваемость бренда: пользователь видит, что ссылка ведёт именно на ваш проект. Пример: <meta property=»og:site_name» content=»LSI Продвижение»>. Тег og:locale задаёт язык и регион контента в формате язык_РЕГИОН. Для русскоязычного сайта это <meta property=»og:locale» content=»ru_RU»>. Это помогает платформам корректно обрабатывать кодировку и направлять контент нужной аудитории.
| Тег | Назначение | Обязателен |
|---|---|---|
| og:title | Заголовок карточки | Да |
| og:description | Описание под заголовком | Да |
| og:image | Картинка превью (абсолютный URL) | Да |
| og:url | Канонический адрес страницы | Да |
| og:type | Тип контента (article, website, product) | Желательно |
| og:site_name | Название сайта | Желательно |
| og:locale | Язык и регион (ru_RU) | Желательно |
Требования к og:image: главная картинка карточки
Изображение — это то, что в первую очередь видит человек, листая ленту или чат. Поэтому к нему предъявляются конкретные технические требования, и нарушение любого из них портит результат. Идеальный размер — 1200×630 пикселей, соотношение сторон 1.91:1. Именно под него рассчитаны большие карточки во всех основных платформах. Картинки меньшего размера платформа либо растянет с потерей качества, либо отрисует маленькой превьюшкой сбоку вместо полноразмерного баннера.
- Размер 1200×630 пикселей — оптимум для крупной карточки во всех соцсетях и мессенджерах.
- Минимально допустимый размер — 600×315 пикселей, ниже платформы переключаются на маленькое превью.
- Вес файла — желательно до 1–2 МБ, иначе медленные платформы могут не успеть подгрузить картинку до показа.
- Формат — JPG или PNG, реже WebP (поддержка WebP в превью платформ пока неравномерная, безопаснее JPG).
- URL обязательно абсолютный, с протоколом https — относительные пути платформы не понимают.
- Картинка должна быть доступна публично, без авторизации и без блокировки robots.txt для ботов соцсетей.
Отдельно стоит помнить про безопасную зону. Разные платформы по-разному обрезают картинку: квадратная превью в одном мессенджере, широкая карточка в другом. Если на изображении есть важный текст или объект, держите его ближе к центру, оставляя поля по краям. Тогда при любой обрезке смысл сохранится. Кстати, тема визуальной привлекательности в выдаче напрямую перекликается с тем, как поработать над кликабельностью результатов в поиске — об этом мы подробно писали в материале про то, как увеличить CTR сайта в поисковой выдаче.
Twitter Cards: отдельная разметка для расширенных карточек
Twitter (ныне X) исторически использует собственный набор метатегов с префиксом twitter, хотя при их отсутствии умеет подхватывать данные из Open Graph. Главный тег — twitter:card, который определяет тип карточки. Значение summary_large_image даёт крупную карточку с большой картинкой сверху, а просто summary — компактную с маленькой превьюшкой сбоку. Для контентных сайтов почти всегда нужен первый вариант.
Пример базового набора: <meta name=»twitter:card» content=»summary_large_image»>, <meta name=»twitter:title» content=»Заголовок»>, <meta name=»twitter:description» content=»Описание»>, <meta name=»twitter:image» content=»https://site.ru/og-cover.jpg»>. Обратите внимание: у Twitter-тегов атрибут называется name, а не property, как у Open Graph. Это частая причина ошибок при ручной вёрстке. Если twitter-теги не заданы, платформа возьмёт og-аналоги, поэтому минимально достаточно прописать только twitter:card, а остальное подтянется из Open Graph.
| Тег | Атрибут | Значение |
|---|---|---|
| twitter:card | name | summary_large_image |
| twitter:title | name | Заголовок |
| twitter:description | name | Описание |
| twitter:image | name | Абсолютный URL картинки |
Как видят разметку VK, Telegram, WhatsApp и Facebook
Каждая платформа читает Open Graph немного по-своему, и знание этих нюансов экономит часы отладки. ВКонтакте опирается на стандартные og-теги и кэширует превью при первом шеринге. У VK есть собственный валидатор и кнопка пересканирования, без которой обновлённая картинка не подтянется — об этом ниже.
Telegram читает og:title, og:description и og:image, формируя аккуратную карточку под сообщением. Важная особенность: Telegram кэширует превью очень агрессивно и долго. Если вы поменяли картинку, в чате может неделями показываться старая. Сбросить кэш помогает бот @WebpageBot, которому отправляют ссылку для пересканирования.
WhatsApp показывает компактную карточку с картинкой и при этом особенно чувствителен к весу изображения: тяжёлые файлы он попросту не подгружает, оставляя превью без картинки. Поэтому для WhatsApp критично держать вес og:image в разумных пределах. Facebook — родоначальник протокола, читает все теги полностью и предоставляет самый подробный инструмент отладки. Понимание того, как контент распространяется по этим каналам, тесно связано со стратегией наполнения блога — мы разбирали это в статье про контент-маркетинг для SEO и корпоративный блог.
Косвенное влияние на SEO: соцсигналы и поведение
Прямого фактора ранжирования по Open Graph не существует — поисковые системы не повышают позиции за наличие og-тегов. Но влияние есть, и оно вполне ощутимо, просто работает по цепочке. Красивая карточка повышает CTR при шеринге: по ссылке с превью кликают заметно чаще, чем по голому URL. Больше кликов означает больше переходов из социальных каналов, а это рост трафика, который не зависит от позиций в органике.
Дальше включаются поведенческие факторы. Люди, пришедшие по осмысленной карточке, понимают, что их ждёт, и реже сразу уходят. Растёт глубина просмотра, время на сайте, возвраты. Эти сигналы поисковые системы учитывают. Плюс распространение ссылок в соцсетях и мессенджерах увеличивает шанс, что материал заметят и сошлются на него с других сайтов — а это уже прямые ссылки, которые работают на авторитет домена. Наконец, узнаваемое название сайта в каждой карточке формирует брендовый спрос, а брендовые запросы поисковики ценят высоко. Грамотно оформленные заголовки и описания при этом полезны и в самой выдаче — про их составление читайте в разборе про оптимизацию title и description и типичные ошибки.
Open Graph не двигает позиции напрямую, но запускает цепочку: карточка — клик — трафик — поведение — бренд. А вот эту цепочку поисковые системы уже замечают.
Как внедрить разметку на сайт
Вручную в шаблоне
Если у вас самописный сайт или статический проект, теги прописываются прямо в шаблоне раздела <head>. Для динамических страниц значения подставляются из данных материала: заголовок, описание и обложку нужно вытягивать из полей записи, чтобы у каждой страницы была своя уникальная карточка. Главное правило — не оставлять одинаковые og-теги на всех страницах. Если на всём сайте стоит один и тот же og:image и og:title, карточки всех материалов будут выглядеть одинаково, и эффект сведётся к нулю.
Через плагины в WordPress
В WordPress задачу решают SEO-плагины. Yoast SEO и Rank Math имеют отдельные вкладки для социальных сетей в редакторе записи: там можно задать заголовок, описание и картинку для Facebook и Twitter, а плагин сам сгенерирует корректные теги в <head>. Для русскоязычной аудитории удобен плагин Yandex (Clearfy) и связки, поддерживающие ВКонтакте. Если не указать картинку явно, плагины обычно подставляют изображение записи (featured image), поэтому важно, чтобы у каждого материала была установлена качественная обложка. Настройка социальной разметки — лишь часть комплексной оптимизации платформы, о которой мы подробно рассказали в гайде по оптимизации сайта на WordPress для SEO. Если же разметка кажется вам сложной, можно делегировать её специалистам в рамках услуги доработки сайта.
Отладка: как проверить карточку до публикации
Поскольку Open Graph не виден в браузере, проверять его нужно специальными отладчиками. Это обязательный шаг перед тем, как делиться ссылкой публично — иначе вы рискуете запустить в мир карточку с битой картинкой и потом неделями бороться с закэшированным результатом.
- Facebook Sharing Debugger — самый подробный инструмент. Вставляете URL, видите, какие теги распознаны, какая картинка подтянута, и получаете список предупреждений. Кнопка Scrape Again принудительно обновляет кэш Facebook.
- VK-валидатор (отладчик ссылок ВКонтакте) — показывает превью так, как его увидит VK, и позволяет пересканировать страницу после изменений.
- Бот @WebpageBot в Telegram — отправьте ему ссылку, и он сбросит кэш превью для Telegram.
- Twitter Card Validator — проверяет корректность twitter-тегов (доступность зависит от текущей политики платформы).
- Любой просмотр исходного кода страницы (Ctrl+U) — позволяет вручную убедиться, что теги вообще присутствуют в <head>.
Ключевой момент про кэш: почти все платформы кэшируют превью при первом обращении и потом долго его не обновляют. Если вы поменяли картинку или заголовок, обязательно сделайте перешеринг — прогоните ссылку через отладчик с принудительным обновлением. Без этого шага новые пользователи будут видеть свежую карточку, но в существующих чатах и постах останется старая.
Типичные ошибки и финальный чек-лист
Большинство проблем с Open Graph сводятся к одним и тем же повторяющимся ошибкам. Разберём их, чтобы вы могли проверить свой сайт по списку.
- Отсутствует og:image — карточка показывается без картинки или с хаотично выбранным изображением со страницы.
- Относительный URL картинки вместо абсолютного — платформа не может загрузить изображение.
- Картинка закрыта от ботов в robots.txt или требует авторизации — превью остаётся пустым.
- Старая закэшированная картинка после обновления — забыли сделать перешеринг через отладчик.
- Дубли тегов — один og:title прописан дважды (например, и вручную, и плагином), платформа путается.
- Одинаковые og-теги на всех страницах — все карточки выглядят клонами.
- Слишком тяжёлая картинка — WhatsApp и медленные платформы не успевают её загрузить.
- Перепутаны атрибуты: у og-тегов property, у twitter-тегов name.
Финальный чек-лист перед публикацией: на каждой важной странице заданы og:title, og:description, og:image, og:url, og:type и og:site_name; картинка 1200×630 с абсолютным https-URL и весом до 2 МБ; прописан twitter:card со значением summary_large_image; нет дублей тегов; ссылка прогнана через Facebook Sharing Debugger и VK-валидатор; для уже опубликованных материалов сделан перешеринг для сброса кэша. Эта рутина занимает пару минут на материал, но именно она отличает сайт, ссылки которого приятно пересылать, от сайта, ссылки которого выглядят как ошибка.
Open Graph и Twitter Cards — это та техническая мелочь, которая работает на каждый репост, каждую пересылку в мессенджере и каждое упоминание вашего сайта в соцсетях. Настроенная один раз, она годами тихо повышает кликабельность ссылок и формирует узнаваемость бренда. Но социальная разметка — лишь один элемент большой системы технической и контентной оптимизации, и максимальный эффект она даёт в связке с грамотной структурой, скоростью и продуманным контентом. Если вы хотите, чтобы сайт не просто красиво выглядел при шеринге, но и стабильно рос в поиске, доверьте задачу профессионалам — закажите SEO-продвижение сайта или начните с комплексного SEO-аудита, чтобы увидеть полную картину точек роста вашего проекта.
Услуги LSI Продвижение
Наша команда предлагает полный спектр услуг по SEO-продвижению и технической доработке сайтов. Мы работаем только белыми методами, ориентируемся на реальный бизнес-результат — трафик, заявки и продажи, а не только позиции в отчёте, — и выстраиваем продвижение системно, под конкретные задачи и нишу вашего проекта. Начать можно с бесплатной диагностики, чтобы понять текущее состояние сайта и точки роста, а затем перейти к комплексной работе. Выберите подходящую услугу из списка ниже:
- Бесплатный SEO аудит сайта — автоматическая проверка на 50+ параметров за 2 минуты
- Комплексный SEO аудит — глубокий ручной анализ с рекомендациями от эксперта
- Продвижение сайтов — вывод в ТОП Яндекса и Google по целевым запросам
- SEO консультация — разбор вашего сайта с конкретными рекомендациями
- LSI тексты — экспертный контент, оптимизированный для поисковых систем
- Доработка сайта — техническая оптимизация и исправление ошибок
- Создание сайта под ключ — разработка с нуля с SEO-оптимизацией
- Стоимость продвижения — прозрачные тарифы и условия
- Портфолио и кейсы — реальные результаты наших клиентов
Закажите SEO продвижение сайта
Выведем ваш сайт в ТОП Яндекса и Google. Бесплатная консультация — разберём сайт, найдём точки роста и предложим стратегию продвижения.
Comments
Вот прямо в точку про голый URL в чате. Кидаю ссылку на свой сайт в Telegram, а там ни картинки, ни описания. Теперь понял, что это из-за отсутствия Open Graph в head. Пойду добавлять четыре кита.
Спасибо за раздел про требования к og:image. А какой размер сейчас оптимальный? Слышала про 1200 на 630, но у меня картинка обрезается в WhatsApp по краям.
Дарья, оптимум сейчас 1200 на 630 пикселей, соотношение примерно 1.91 к 1. Если в WhatsApp обрезает края, значит важные элементы у вас слишком близко к границам — держите текст и лица ближе к центру, с запасом полей. И проверьте вес: WhatsApp капризен к тяжёлым файлам.
Вопрос: если у меня стоит плагин Yoast, он же сам генерирует Open Graph. Есть смысл ещё и вручную в шаблон лезть, или это будет конфликт двух разметок?
Станислав, конфликт возможен, если обе разметки выводят свои теги одновременно — тогда в head окажется два og:title и соцсеть выберет непредсказуемо. Если пользуетесь плагином, доверьте генерацию ему и не дублируйте вручную. Ручная правка шаблона оправдана только когда плагина нет.
А Twitter Cards вообще актуальны, если у нас в России X почти не используют? Или эту разметку подхватывают и другие сервисы?
Отладил через отладчик, а карточка всё равно показывает старую картинку, хотя я её давно поменял. Это кэш соцсети? Как заставить обновить?
Матвей, да, это кэш соцсети. Telegram, VK и Facebook кэшируют карточку надолго. Решается принудительным обновлением: в отладчике Facebook есть кнопка Scrape Again, у Telegram помогает бот @WebpageBot. После этого карточка подтянет новую картинку.
Полезно. Не знала, что VK, Telegram и Facebook читают одни и те же og-теги. Думала, для каждой соцсети надо свою разметку городить.
По поводу косвенного влияния на SEO — а есть реальные данные, что красивая карточка увеличивает кликабельность? Или это из разряда логично, но не доказано?
Держу небольшой блог. Скажите, обязательно ли заполнять og:type, og:url и все дополнительные теги, или для начала хватит четырёх обязательных?
Внедрил вручную в шаблон, всё заработало, карточки красивые. Но у меня на главной одна картинка, а хочется, чтобы для каждой статьи была своя. Как это правильно организовать?
Спасибо за пошаговость. Раздел про плагины в WordPress прям выручил — не хотелось руками в код лезть, а тут понятно, какие есть варианты.
А что если og:image указывает на картинку, а она не подтягивается? У меня в теге путь есть, но в карточке пусто. Может, дело в относительном пути вместо абсолютного?
Артур, почти наверняка дело в относительном пути. Open Graph требует абсолютный URL с указанием протокола — https://site.ru/image.jpg, а не /image.jpg. Соцсети не достраивают домен сами. Поправьте на полный путь, и картинка подтянется.
Немного сомневаюсь насчёт важности всего этого. Люди же и по голой ссылке кликают, если тема интересна. Или разница в переходах реально ощутимая?
Маркетолог. Проверял через отладчик Telegram и Facebook — показывают по-разному. Telegram берёт первую картинку, если og:image не задан, а Facebook ругается. Это нормально или я что-то упустил?
Отличная статья, добавила все теги по чек-листу. Единственное — не поняла разницу между og:title и обычным title страницы. Они должны совпадать или могут отличаться?
Ксения, они могут отличаться, и часто это полезно. Обычный title заточен под поисковую выдачу и содержит ключи, а og:title можно сделать более цепляющим, человеческим — ведь его увидят в чате, где важна не SEO-оптимизация, а желание кликнуть. Если хотите разделить эти задачи — как раз наш профиль в LSI Продвижение.
У меня интернет-магазин, при расшаривании товара хочется показывать цену прямо в карточке. Это делается через Open Graph или нужна отдельная разметка product?
Спасибо, что предупредили про типичные ошибки. У меня как раз og:image весил 3 мегабайта, поэтому в мессенджерах не подгружался. Сжала — заработало моментально.
А как быть с картинкой для карточки, если статья про текст и подходящего изображения нет? Ставить логотип компании или лучше вообще без og:image, чтобы не портить вид?
Оставить комментарий
Мы используем cookies
Для улучшения работы сайта и вашего удобства. Оставаясь на сайте, вы соглашаетесь с политикой конфиденциальности.