Мета-теги Open Graph: полное руководство по превью ссылок в соцсетях
Мета-теги Open Graph — это теги <meta property="og:…">, которые размещают в <head> HTML-страницы. Они управляют заголовком, описанием и изображением, которые показываются, когда кто-то делится вашей ссылкой в Facebook, LinkedIn, Slack, Discord, WhatsApp и на большинстве других платформ. Достаточно задать их один раз — и почти каждая сеть покажет насыщенное превью вместо голого URL. X (Twitter) читает собственные теги Twitter Card, но при отсутствии подходящего тега откатывается к вашим тегам Open Graph, поэтому один аккуратно собранный набор тегов покрывает почти все места, куда может попасть ссылка.
Именно этот протокол определяет разницу между ссылкой, которая показывает заголовок, краткое описание и четкое изображение 1200×630, и голым адресом, на который никто не кликает.
Это руководство разбирает полный набор мета-тегов для публикации в соцсетях: четыре обязательных тега Open Graph, правила размеров og:image, механизм отката Twitter Card, то, как каждая платформа отображает и кеширует превью, ошибки, из-за которых репост остается пустым, и способы отладки результата после деплоя.
Что такое мета-теги Open Graph?
Open Graph — это открытый протокол, изначально созданный в Facebook и описанный на ogp.me, который позволяет любой веб-странице представить себя как насыщенный объект. Вместо того чтобы гадать, о чем ваша ссылка, платформа читает горстку тегов и превращает их в карточку превью.
Синтаксис — это обычный HTML-тег <meta> с атрибутом property и значением content, размещенный внутри <head> документа:
<meta property="og:title" content="How Open Graph Tags Work">Обратите внимание на атрибут property. Классические HTML-теги <meta> для SEO (meta description, robots, viewport) используют name. Open Graph использует property, а Twitter Card снова использует name. Правильный атрибут здесь важен: краулер, ожидающий property="og:title", не прочитает name="og:title".
Почти каждая платформа, превращающая ссылку в карточку, читает Open Graph: на нем говорят Facebook, LinkedIn, Slack, Discord, WhatsApp, Pinterest и Telegram. Заметное исключение — X. Он предпочитает собственные теги twitter:*, но для всего, что не находит, откатывается к вашим тегам og:* — поэтому дублировать их приходится редко.
Open Graph соседствует с классическими SEO-тегами <meta>, а не заменяет их. <title> и канонической ссылкой по-прежнему управляется поиск; meta description по-прежнему формирует ваш сниппет в выдаче. Теги Open Graph не влияют на ранжирование — они отвечают за карточку в соцсетях. Полный <head> обычно несет все три семейства сразу.
Писать всё это вручную — занятие однообразное, и в нем легко ошибиться в мелочах. Генератор Open Graph и мета-тегов собирает весь блок из короткой формы, показывает живое превью и следит за тем, чтобы каверзные детали (имена атрибутов, абсолютные URL, размеры изображения) оставались согласованными — чтобы их не приходилось держать в голове.
Основные теги Open Graph, которые действительно нужны
Open Graph определяет десятки свойств, но для хорошего репоста нужна лишь горстка. Начните с четырех обязательных, добавьте описание — и для большинства страниц на этом можно остановиться.
Четыре обязательных тега: og:title, og:type, og:image, og:url
Четыре тега обязательны по протоколу. Пропустите один — и платформы либо не покажут карточку, либо подставят неудачную догадку.
<meta property="og:title" content="How Open Graph Tags Work">
<meta property="og:type" content="website">
<meta property="og:image" content="https://example.com/og/cover.png">
<meta property="og:url" content="https://example.com/open-graph-guide">og:title — жирный заголовок на карточке. og:type классифицирует объект (подробнее ниже). og:image — изображение превью, и это должен быть абсолютный HTTPS-URL. og:url — канонический адрес страницы, по которому платформы устраняют дубликаты репостов и агрегируют вовлеченность.
og:description и чем он отличается от SEO meta description
og:description — краткое описание, которое выводится под заголовком на карточке репоста:
<meta property="og:description" content="A practical guide to og:title, og:image and Twitter Card tags.">Это не тот же тег, что SEO <meta name="description">, и он служит другому читателю. Meta description борется за клики на странице результатов Google и рассчитан примерно на 155 символов. Описание Open Graph читают на карточке в соцсети, где места меньше и вес несет первое предложение. Если опустить og:description, большинство платформ откатятся к вашему meta description, так что часто его можно не задавать. Отдельное описание пишут только тогда, когда социальный крючок должен отличаться от сниппета в поиске.
og:type и что он открывает
og:type сообщает платформам, что за сущность представляет ваша страница. Обычные значения — website, article, product и profile. Главная или лендинг — это website; пост в блоге — article.
Выбор article открывает дополнительные свойства и возможности, недоступные обычному типу website:
<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-07-16T00:00:00Z">
<meta property="article:author" content="Ada Lovelace">Эти теги article:* передают в карточки даты публикации и авторство и делают страницу пригодной для Pinterest Rich Pins, которые тянут структурированные данные прямо из вашей разметки Open Graph. Ставьте og:type в article на постах и в website на всём остальном — соответствующие поля подтянутся следом.
Вот справка по тегам, которые действительно используются на большинстве страниц:
| Тег | Что задает | Пример значения |
|---|---|---|
og:title | Заголовок, показываемый на карточке | How Open Graph Tags Work |
og:type | Тип объекта: website, article, product, profile | article |
og:image | Изображение превью (абсолютный HTTPS-URL) | https://example.com/og/cover.png |
og:url | Канонический URL страницы | https://example.com/open-graph-guide |
og:description | Краткое описание под заголовком | A practical guide to social meta tags. |
og:site_name | Название сайта в целом | Example |
og:locale | Язык и регион контента | en_US |
og:image — размеры, соотношение сторон и правила, которые ломают репосты
Изображение — это то, что в превью видят первым, и именно на нем разваливается большинство репостов. Задайте правильный размер и формат og:image — и один файл заработает везде.
Универсальный стандарт 1200×630 (1.91:1)
Рекомендуемый размер og:image — 1200×630 пикселей, соотношение сторон 1.91:1. Одно такое изображение корректно отображается в Facebook, LinkedIn, Slack, Discord и в карточке summary_large_image у X, так что отдельный файл под каждую платформу не нужен.
Нижние пределы размера тоже важны. Facebook игнорирует любое изображение меньше 200×200 и показывает тесную квадратную миниатюру для всего, что меньше 600×315. Ниже 1200 пикселей по ширине крупные карточки начинают выглядеть размыто. Ориентируйтесь на 1200×630 — и вы разом преодолеете каждый порог.
Почему важны og:image:width и og:image:height
Когда платформа впервые встречает вашу ссылку, изображение еще не загружено — оно подгружается асинхронно. Если объявить размеры заранее, платформа сможет зарезервировать нужное место и сразу сверстать карточку:
<meta property="og:image" content="https://example.com/og/cover.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Open Graph guide cover with the title in large type">Пропустите их — и самый первый репост страницы может отобразиться пустым, пока краулер догоняет. Добавьте их — и карточка будет правильной с первой же вставки. Тег og:image:alt описывает изображение для скринридеров на платформах, которые это поддерживают.
Формат и размер файла
Используйте JPG или PNG. Оба надежно декодируются любым краулером — в этом весь смысл og:image: изображение обязано отрисоваться на серверах, которые вы не контролируете. Как правило, держите файл меньше 1 MB, а для WhatsApp — меньше 300 KB, ведь он строже остальных. Если экспорт получился тяжелее, прогоните его через Сжатие изображений, чтобы опустить размер ниже 1 MB без заметной потери качества.
Так и тянет взять здесь современный формат, но это как раз тот случай, когда стоит удержаться. Новые форматы экономят байты для браузеров, однако некоторые социальные краулеры декодируют их неодинаково, поэтому og:image в WebP или AVIF может вернуться пустым на платформе, которая его не читает. Компромиссы разобраны в статье WebP vs AVIF vs JPEG: какой формат выбрать в 2026?; конкретно для изображений в репостах оставайтесь на JPG или PNG. Поскольку платформы обрезают края по-разному, держите логотип и заголовок внутри центрированной безопасной зоны 1080×600, чтобы ничего важного не срезалось.
Правило абсолютного HTTPS-URL
og:image и og:url должны быть полными URL вида https://…, а не относительными путями. Путь вроде /cover.png прекрасно разрешается в редакторе и на живой странице, но у краулера, запрашивающего ваш URL, нет базового адреса, относительно которого его разрешить, — поэтому репост возвращается пустым. Изображение также должно быть публично доступно: если robots.txt блокирует краулер или файл спрятан за авторизацией, превью останется пустым.
Всё это упирается в еще одно ограничение: краулеры не выполняют JavaScript. Facebook, LinkedIn, WhatsApp, Telegram и Discord забирают ваш сырой HTML и читают то, что там есть. Теги, вставленные фреймворком на стороне клиента уже после загрузки страницы, для них невидимы, поэтому теги Open Graph должны находиться в серверном или статическом HTML.
Twitter/X Cards: один тег, а дальше откат к Open Graph
X использует собственные мета-теги Twitter Card, но пересечение с Open Graph означает, что писать приходится куда меньше, чем можно ожидать. На практике добавляют один тег, а остальное берется из отката.
twitter:card — единственный обязательный тег Twitter
X вообще не отрисует карточку без twitter:card — даже при полном наборе тегов Open Graph. Это единственный обязательный тег Twitter Card:
<meta name="twitter:card" content="summary_large_image">Значение выбирает раскладку. summary_large_image дает крупную баннерную карточку, рассчитанную на изображение 1200×630. summary дает компактную карточку с маленькой квадратной миниатюрой рядом с текстом:
<meta name="twitter:card" content="summary">Обратите внимание на атрибут name. Теги Twitter Card используют name, а не property, как Open Graph.
Как X откатывается к og:* для заголовка, описания и изображения
Для заголовка, описания и изображения X читает ваши og:title, og:description и og:image, когда соответствующего тега twitter:* нет. Именно поэтому twitter:title или twitter:image вообще пишут редко. Задайте twitter:card, держите теги Open Graph в порядке — и X соберет карточку из них.
Ловушка пустого twitter:image
У отката есть одна острая грань: пустой тег считается присутствующим. Если вы выведете twitter:image с пустым значением, X использует это пустое значение вместо отката к og:image — и карточка потеряет изображение.
<!-- Wrong: blocks the fallback and leaves the card imageless -->
<meta name="twitter:image" content="">
<!-- Right: omit the tag entirely and X reads og:image -->Правило простое: никогда не выводите пустой социальный тег. Нет значения — не выводите тег вовсе.
Особенности Slack и Discord
Slack сначала читает Twitter Card, затем Open Graph и может показать два дополнительных поля через twitter:label и twitter:data:
<meta name="twitter:label1" content="Reading time">
<meta name="twitter:data1" content="11 minutes">
<meta name="twitter:label2" content="Written by">
<meta name="twitter:data2" content="Ada Lovelace">Они появляются как небольшие подписанные детали под разворотом ссылки в Slack. Discord читает Open Graph и добавляет один штрих, которым не пользуется больше никто: он окрашивает левую акцентную полосу встраивания в theme-color вашей страницы.
<meta name="theme-color" content="#5865F2">Как превью ссылок отображаются на каждой платформе
Одни и те же теги дают разные превью ссылок в соцсетях в зависимости от того, кто их читает. Каждая платформа выбирает собственное подмножество тегов, кеширует на свой срок и добавляет пару причуд. Эта таблица — быстрая справка.
| Платформа | Какие теги читает | Кеш | Заметное поведение |
|---|---|---|---|
| Open Graph | ~30 дней | Игнорирует изображения меньше 200×200; показывает маленький квадрат при размере ниже 600×315 | |
| Open Graph | ~7 дней | Сбросить устаревшее превью можно через Post Inspector | |
| X (Twitter) | twitter:card + откат к og:* | короткий | Без twitter:card карточки нет вовсе |
| Slack | Twitter Card, затем Open Graph | на каждое сообщение | Отображает twitter:label/twitter:data как дополнительные поля |
| Discord | Open Graph | на каждое сообщение | Использует theme-color для акцентной полосы встраивания |
og:title + og:image | на каждое сообщение | Хочет метаданные ближе к началу; держите изображение меньше 300 KB | |
| Telegram | Open Graph | на каждое сообщение | Надежно отображает только из JPEG или PNG |
| Open Graph или Schema.org | — | Article Rich Pins требуют og:type=article |
Столбец с кешем объясняет частую неожиданность: вы правите теги, публикуете заново, а Facebook неделями показывает старый заголовок. Facebook хранит данные Open Graph около 30 дней, а LinkedIn — около 7, так что правка не появится, пока кеш не истечет или вы не запросите обновление принудительно. Отладчики ниже делают именно это.
Частые ошибки Open Graph (и как их поймать)
Большинство сломанных превью сводится к короткому списку ошибок. Каждая выглядит нормально локально и проявляется только тогда, когда краулер запрашивает живую страницу.
Относительный путь в og:image
Относительный путь отрисуется в вашем браузере и сломается при репосте, потому что у краулера нет базового URL, относительно которого его разрешить.
<!-- Blank when shared -->
<meta property="og:image" content="/cover.png">
<!-- Renders everywhere -->
<meta property="og:image" content="https://example.com/cover.png">Отсутствие og:url или канонический адрес, который с ним расходится
Без og:url счетчики репостов и вовлеченность рассыпаются по вариантам URL (с www и без, с параметрами отслеживания, с завершающим слешем). Направьте и каноническую ссылку, и og:url на один и тот же URL, чтобы сигналы не разбегались.
Слишком маленькое изображение или неверное соотношение сторон
Изображение меньше 200×200 игнорируется полностью, а далекое от 1.91:1 обрезается так, как вы не планировали. Отдавайте 1200×630 — и кадрирование предсказуемо на каждой платформе.
Забытый twitter:card
Даже полный набор тегов Open Graph не дает карточки на X без twitter:card. Это самая частая причина, по которой ссылка отлично выглядит в LinkedIn и не показывает ничего в X.
Теги, отрисованные на клиенте, которых краулер не видит
Если одностраничное приложение вставляет теги Open Graph после загрузки, краулеры, не выполняющие JavaScript, их никогда не увидят. Отрисовывайте теги на сервере или предварительно рендерите HTML.
charset после первых 1024 байт
Объявление <meta charset="utf-8"> должно появиться в пределах первых 1024 байт документа, иначе браузер его проигнорирует и может исказить символы вне ASCII в заголовке и описании. Поставьте его первым внутри <head>:
<head>
<meta charset="utf-8">
<!-- everything else follows -->
</head>Как тестировать и отлаживать теги Open Graph
Никогда не доверяйте превью, которое вы не проверили на живом URL. Три инструмента покрывают платформы, которые важны, и каждый из них умеет принудительно обновлять кеш.
Facebook Sharing Debugger
Facebook Sharing Debugger запрашивает ваш живой URL, показывает, что именно разобрал Facebook, и перечисляет отсутствующие или неправильно оформленные теги. Его самая полезная кнопка — «Scrape Again»: она обновляет ~30-дневный кеш Facebook по требованию, и это самый быстрый способ показать исправление, не дожидаясь месяца.
LinkedIn Post Inspector
LinkedIn Post Inspector делает то же самое для LinkedIn. Вставьте URL — и он заново запросит страницу и сбросит ~7-дневный кеш LinkedIn, так что обновленный заголовок или изображение появятся при следующем репосте, а не через несколько дней.
Проверка карточек X переехала в портал для разработчиков
X закрыл свой отдельный Card Validator. В 2026 году проверка карточек живет внутри портала для разработчиков X, а не по публичному URL, поэтому большинство команд проверяют карточки X иначе: поскольку X откатывается к og:*, отладчики Facebook и LinkedIn уже подтверждают теги, которые прочитает X, а сторонний инструмент превью закрывает пробел для самой раскладки twitter:card.
Смотрите превью до деплоя
Отладчики могут проверить только уже опубликованный URL — неудачный момент, чтобы обнаружить пустое изображение. Смотрите превью карточки, пока еще редактируете. Генератор Open Graph и мета-тегов отрисовывает превью для Google, Facebook, X, LinkedIn, Slack и Discord из значений, которые вы вводите, считывает реальные размеры вашего og:image прямо в браузере, чтобы поймать неверное соотношение, и умеет импортировать существующий <head>, так что сломанный репост можно диагностировать еще до выкатки.
Короткий чек-лист
Вот минимум, который должна нести каждая страница. Скопируйте его, подставьте свои значения — и у вас есть превью, которое отрисуется повсюду:
<meta charset="utf-8">
<title>Your page title</title>
<meta name="description" content="Your 150-character summary.">
<link rel="canonical" href="https://example.com/page">
<meta property="og:title" content="Your page title">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/og/page.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:description" content="Your 150-character summary.">
<meta name="twitter:card" content="summary_large_image">Пройдитесь по основам перед выкаткой: абсолютный HTTPS og:image в 1200×630, og:url, совпадающий с каноническим адресом, наличие twitter:card и теги, отрисованные на сервере. Если хочется полнее познакомиться с утилитами, которые это ускоряют, Базовые инструменты разработчика собирают остальное. А когда вы готовы сгенерировать и просмотреть весь блок сразу, Генератор Open Graph и мета-тегов напишет его, проверит и покажет каждую карточку до деплоя.
Часто задаваемые вопросы
Чем отличаются теги Open Graph и Twitter Card?
Open Graph — кроссплатформенный протокол, который читают Facebook, LinkedIn, Slack и другие; теги Twitter Card (twitter:*) специфичны для X. X откатывается к вашим тегам OG, когда соответствующего тега twitter:* нет, так что обычно нужны теги OG плюс одно значение twitter:card.
Влияют ли теги Open Graph на ранжирование в поиске Google?
Нет. Теги Open Graph и Twitter Card не влияют на ранжирование в Google — они управляют тем, как ссылки выглядят при репосте, и приводят трафик из соцсетей. Для SEO важны классические <title> и канонические теги; meta description формирует ваш сниппет и кликабельность, но не является прямым фактором ранжирования.
Где в HTML размещаются теги Open Graph?
Внутри элемента <head>, в серверном или статическом HTML. Краулеры Facebook, LinkedIn, WhatsApp и Telegram не выполняют JavaScript, поэтому теги, вставленные на стороне клиента, останутся незамеченными. Поставьте <meta charset> первым, чтобы он попал в пределы первых 1024 байт.
Может ли одно изображение подойти для Facebook, X и LinkedIn?
Да. Одно изображение 1200×630 (1.91:1) корректно отображается в Facebook, LinkedIn, Slack, Discord и в карточке summary_large_image у X. Отдавайте его по HTTPS с публичного URL и объявляйте og:image:width/og:image:height, чтобы первый репост не был пустым.
Почему в превью моей ссылки нет изображения?
Частые причины: относительный путь в og:image вместо абсолютного HTTPS-URL, изображение меньше 200×200, отсутствие twitter:card на X или теги, вставленные через JavaScript, который краулер не может выполнить. После исправления запустите повторный сбор в Facebook Sharing Debugger.
Нужны ли всем страницам собственные теги Open Graph?
В идеале да — у каждой страницы должны быть og:title, og:description, og:image и канонический og:url, отражающие именно эту страницу, чтобы репосты показывали релевантные превью. Общий для всего сайта запасной вариант лучше, чем ничего, но отдельные теги для каждой страницы приносят куда больше кликов из соцсетей.