База знаний · Соцсети

Open Graph: как настроить превью ссылки в соцсетях и мессенджерах

Q: Должны ли og:title и обычный title совпадать?

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

Q: Нужны ли отдельные теги для Twitter (X)?

Желательно добавить twitter:card со значением summary_large_image для крупного превью. Остальные данные X обычно берёт из Open Graph, так что дублировать всё не нужно — достаточно карточного тега.

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

1200×630размер картинки превью

5 теговдостаточно для карточки

×кликикарточка вместо голой ссылки

Кратко — что нужно для превью

og:title — заголовок карточки
og:description — короткое описание под заголовком
og:image — картинка превью, 1200×630 px (это ключевой тег)
og:url и og:type — канонический адрес и тип страницы
Проверять готовое превью в отладчиках соцсетей, а не на глаз в коде

Что такое Open Graph и где он работает

Open Graph — это протокол, придуманный Facebook в 2010 году и подхваченный почти всеми площадками. Технически это <meta>-теги в секции <head> с атрибутом property="og:...". Пользователь их не видит — их читают платформы, когда кто-то делится ссылкой, и на их основе рисуют карточку-превью.

✕ Без Open Graph

https://site.by/uslugi/remont-stiralnyh-mashin/?utm_source=tg

✓ С Open Graph

SEO Академия

site.by

Ремонт стиральных машин в Минске — выезд в день заявки

Гарантия 12 месяцев, оплата после ремонта. Работаем ежедневно с 8:00 до 20:00.

Одна и та же ссылка в мессенджере: слева — голый URL, справа — карточка, собранная из Open Graph.

Где это работает: Facebook, ВКонтакте, LinkedIn, Telegram, WhatsApp, Viber, Одноклассники, Discord, Slack — практически любой мессенджер и соцсеть. Одна и та же разметка обслуживает их все. Отдельно у Twitter (X) есть свои теги twitter:card, но они во многом дублируют Open Graph и часто читаются как fallback.

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

Обязательный минимум тегов

Для нормального превью достаточно пяти тегов:

og:title — заголовок карточки. Может совпадать с тегом Title страницы, но не обязан — тут можно сделать формулировку «под репост»;
og:description — 1–2 предложения под заголовком, суть страницы;
og:image — картинка превью, самый заметный элемент карточки;
og:url — канонический адрес страницы (без UTM-меток и параметров);
og:type — тип: website для главной и обычных страниц, article для статей.

Полезное дополнение — og:site_name (название сайта в карточке) и блок twitter:card со значением summary_large_image для крупного превью в Twitter/X.

og:image: главный тег и его размеры

Картинка — то, на что в первую очередь падает взгляд, поэтому к ней отдельные требования:

Размер 1200×630 пикселей — рекомендованный стандарт (соотношение ~1,91:1). В таком формате картинка показывается крупным баннером во всех соцсетях;
Минимум 600×315 — ниже этого некоторые платформы покажут маленькую иконку вместо большой карточки;
Абсолютный URL — всегда полный адрес https://site.by/image.png, а не относительный путь;
Разумный вес — оптимизированный JPG или PNG; слишком тяжёлый файл соцсеть может не подтянуть;
Читаемость — если на картинке есть текст или логотип, держите их ближе к центру: платформы иногда обрезают края.

Именно отсутствие og:image чаще всего и делает превью «пустым» — заголовок и описание платформа ещё может собрать сама, а вот картинку без тега не возьмёт.

Готовый пример

Базовый набор Open Graph для страницы статьи:

<meta property="og:type" content="article">
<meta property="og:title" content="Заголовок для соцсетей">
<meta property="og:description" content="Короткое описание страницы для превью.">
<meta property="og:image" content="https://site.by/preview.png">
<meta property="og:url" content="https://site.by/statya/">
<meta property="og:site_name" content="Название сайта">

<meta name="twitter:card" content="summary_large_image">

На WordPress эти теги обычно генерирует SEO-плагин (Yoast, Rank Math) — там достаточно задать картинку и описание в настройках записи. На конструкторах Open Graph чаще всего уже встроен. Для самописного сайта теги добавляют в шаблон <head>.

Частые ошибки из наших аудитов

Open Graph нет вообще — превью собирается платформой наугад или не собирается; ссылка выглядит голой;
Нет og:image — самый частый недочёт: карточка есть, но без картинки и потому невзрачная;
Относительный URL в og:image — платформа не может загрузить картинку по неполному адресу;
Картинка не того размера — квадрат или узкая полоска вместо баннера 1200×630, превью выглядит криво;
Старое превью «залипло» — вы обновили og-теги, а соцсеть показывает прежнюю картинку: у платформ есть кэш, его нужно сбросить в отладчике;
og:url с UTM-метками — в превью попадает «грязный» адрес, а репосты дробят статистику.

Как проверить своё превью

Facebook Sharing Debugger — вставьте URL: покажет, как соберётся карточка, какие теги нашлись, и сбросит кэш
Отладчик ВКонтакте — обновляет превью для ВК после изменения тегов
Просто вставьте ссылку в Telegram-чат «самому себе» или в черновик поста — увидите превью вживую
Исходный код — Ctrl+U и поиск og: : на месте ли title, description, image, url
SEO-аудит — проверяет наличие Open Graph на всех страницах и подсвечивает, где превью не соберётся

Что дальше

Проверьте ключевые страницы — главную, услуги, статьи — через Facebook Sharing Debugger или просто вставив ссылку в Telegram. Убедитесь, что есть og:title, og:description и, главное, og:image размером 1200×630 с абсолютным URL. На WordPress задайте картинку и описание в SEO-плагине. Это разовая настройка, которая делает каждый репост вашего сайта заметным.

Хотите узнать, на каких страницах превью не соберётся и ссылки выглядят неаккуратно? Закажите комплексный SEO-аудит: проверим Open Graph на всех страницах, а заодно метатеги, скорость, разметку и видимость в ИИ-поиске.

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

Коротко об Open Graph

Влияет ли Open Graph на позиции в поиске? +

Напрямую — нет, это не фактор ранжирования. Но он влияет на трафик из соцсетей и мессенджеров: красивое превью повышает кликабельность репостов. То есть работает на посещаемость, а не на позиции.

Должны ли og:title и обычный title совпадать? +

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

Обновил картинку, а в соцсети старая — почему? +

Соцсети кэшируют превью, чтобы не загружать страницу каждый раз. После изменения og-тегов сбросьте кэш в отладчике платформы (Facebook Sharing Debugger, отладчик ВК) — и подтянется новая карточка.

Нужны ли отдельные теги для Twitter (X)? +

Желательно добавить twitter:card со значением summary_large_image для крупного превью. Остальные данные X обычно берёт из Open Graph, так что дублировать всё не нужно — достаточно карточного тега.

Проверим ваш сайт

Как выглядят ссылки вашего сайта при репосте?

Закажите SEO-аудит — проверим Open Graph на всех страницах и покажем, где превью не соберётся и ссылка выглядит голой. А заодно метатеги, индексацию, скорость и видимость сайта в ИИ-ответах.

Заказать SEO-аудит Все услуги