![Open Graph: что это, как правильно настроить и проверить разметку в [current_year]](https://selcdn.checkroi.ru/wp-content/uploads/2026/05/og-cover-59083-1779956211.jpg "Статья: Open Graph: что это, как правильно настроить и проверить разметку в 2026")
Вы написали отличную статью, оформили её, нажали «опубликовать», скинули ссылку в свой Телеграм-канал — и видите там пустую плашку с фавиконкой и адресом сайта. Ни заголовка, ни картинки, ни превью. Так выглядит ссылка, у которой нет Open Graph-разметки.
В этой статье разберём всё: что такое Open Graph (или сокращённо — OG), какие пять тегов нужны обязательно, какой размер картинки правильный, как настроить разметку в WordPress, Tilda и просто в HTML, как проверить превью без программиста и как попросить нейросеть собрать теги за минуту. Если базовые HTML-понятия как-то прошли мимо вас — загляните в наш разбор «Что такое HTML», там подробно про теги и <head>.
Если по ходу встретится непонятный термин — в нашем «Словаре айтишника» собрано 150+ IT-понятий простыми словами, и в «Большом словаре SEO» тоже есть половина того, что встретится в этой статье.
Статья подойдёт владельцам сайтов на любой CMS, блогерам, маркетологам и всем, кто хочет, чтобы ссылка на их материал в соцсетях выглядела как нормальная карточка с картинкой — а не как голая строка с адресом. Уметь программировать не нужно. Большую часть настроек делают плагины и встроенные SEO-блоки CMS.
OG-разметка — это часть технического SEO. Если хочется освоить ремесло системно — загляните в нашу подборку курсов по SEO-продвижению: 144 программы от коротких интенсивов до годовых.
Поехали с самого простого — зачем эта штука вообще нужна.
Зачем вообще нужен Open Graph и что вы теряете без него
Когда вы кидаете ссылку в Telegram, Facebook*, ВКонтакте, LinkedIn, Slack, WhatsApp* или Discord, соцсеть пытается показать не голую строку URL, а маленькую карточку: заголовок, описание, картинка, иногда логотип сайта. Эта карточка называется превью, или unfurl. Именно по ней люди решают, кликнуть на ссылку или пролистать.
Без OG-разметки соцсеть всё равно попытается что-то собрать сама. Возьмёт title из <title> страницы, выдернет первое подходящее изображение, обрежет первый абзац как описание. Результат непредсказуемый: картинка может оказаться логотипом из шапки, описание — куском навигации, заголовок — длинной строкой с названием сайта в конце. У некоторых платформ (X, Telegram, WhatsApp) если ничего внятного не нашлось — превью просто не покажется.
Цифры из исследований агентств цифрового маркетинга: ссылки с нормальной OG-карточкой собирают в 2–3 раза больше кликов, чем «голые» ссылки. Особенно сильно эффект заметен в Telegram, LinkedIn и VK — там карточка с большой картинкой занимает экран целиком и работает как баннер. В Facebook эффект скромнее (там карточка и так маленькая), но всё равно ощутимый.
Open Graph — это, по сути, способ объяснить любой соцсети: «вот мой заголовок, вот описание, вот картинка для превью, вот тип контента (это статья, а не товар), вот канонический адрес». Сделали один раз — дальше все 15+ платформ читают одну и ту же разметку и показывают предсказуемое превью.
Что такое OG-теги простыми словами
OG-теги — это специальные строки в исходном коде вашей страницы, которые соцсети читают, когда кто-то кидает ссылку. Никаких визуальных изменений на самой странице они не делают — человек, который открыл сайт в браузере, их вообще не увидит. Это служебная информация для машин.
Технически OG-тег выглядит так:
<meta property="og:title" content="Open Graph: что это и как правильно настроить" />Конструкция <meta ... /> — это мета-тег (от слова meta, «над»). Мета-теги — стандартный способ положить в страницу какую-то информацию для роботов: про кодировку, viewport, robots, OG. У OG-тегов есть свой признак: атрибут property всегда начинается с og:. По этому префиксу соцсети их и узнают.
Откуда взялся протокол
OG-протокол придумал Facebook в 2010 году. Тогда у соцсети была своя боль: пользователи кидали ссылки на статьи и сайты, но Facebook не понимал, что показать в превью. То заголовок съезжал, то картинка бралась случайная, то описание выходило кривое. Чтобы решить раз и навсегда, инженеры Facebook опубликовали открытый стандарт Open Graph Protocol и предложили: пусть владельцы сайтов сами в коде укажут, какой заголовок, описание и картинку показывать.
Идея зашла. Через пару лет OG поддерживали уже Twitter (с оговорками), LinkedIn, Pinterest, ВКонтакте. К 2026 году OG-теги читают все крупные соцсети и мессенджеры: Facebook, Instagram (в DM), X (бывший Twitter), LinkedIn, Pinterest, ВКонтакте, Одноклассники, Дзен, Telegram, WhatsApp, Viber, Discord, Slack, Microsoft Teams, iMessage, Mastodon.
Кто читает OG-теги сегодня
Базовый набор из пяти OG-тегов покрывает 95% случаев — достаточно расставить их один раз, и превью будет нормально работать везде. У некоторых платформ есть свои нюансы (Twitter любит дополнительный twitter:card, ВКонтакте поддерживает свой vk:image), но это надстройка, а не отдельная разметка с нуля.
Где OG-теги «живут» в коде
Все OG-теги размещаются в разделе <head> HTML-страницы. Это служебная часть документа, которая лежит до видимого содержимого — до <body>. Внутри <head> у вас уже что-то есть: тег <title>, кодировка, ссылки на стили, иконки. OG-теги добавляются туда же, обычно отдельным блоком.
Если у вас сайт на любой современной CMS — WordPress, Tilda, Bitrix, Webflow — вы скорее всего никогда не будете трогать <head> руками. CMS или SEO-плагин впишут OG-теги сами по вашим настройкам в админке. Но знать, где они физически живут, полезно: когда что-то сломается, вы откроете «исходный код страницы» (Ctrl+U в браузере), найдёте поиском og: и увидите, какие теги на самом деле отдаёт сайт.
Если вы на WordPress с Rank Math, Yoast или AIO SEO — у вас базовая OG-разметка уже работает «из коробки». Эта статья пригодится, чтобы понять, что внутри, и подкрутить тонкие места — дефолтную картинку, og:type, og:locale. Полностью игнорировать тему не стоит даже на готовых плагинах: в дефолтах часто стоит og:image заглушка с логотипом, и пока вы её не поменяете, в Телеге все ваши статьи показываются с одной и той же картинкой.
Пять обязательных тегов, без которых превью сломается
Базовый набор, который должен быть на каждой странице, превью которой вы хотите контролировать. Их пять, разберём по очереди.
og:title — заголовок карточки
Тег og:title задаёт заголовок, который соцсеть покажет в превью. Это НЕ обязательно тот же текст, что в <title> страницы или в <h1> — наоборот, часто их специально разводят. В <title> пишут оптимизированный под поиск вариант («Open Graph: настройка в 2026 — гайд checkroi»), а в og:title — тот, который лучше работает в соцсетях: короче, эмоциональнее, без бренда в конце.
Длина: рекомендуется укладываться в 60 символов. Facebook режет на 88, Telegram — на 95, LinkedIn — на 70. Если хотите, чтобы заголовок целиком читался везде — ориентируйтесь на самый строгий лимит.
<meta property="og:title" content="Open Graph: что это и как правильно настроить" />og:description — короткое описание
Тег og:description — это подзаголовок в карточке, мелким шрифтом под основным. Обычно занимает 1–2 строки. Соцсети режут описание агрессивно: Facebook показывает около 110 символов, X (Twitter) — около 125, Telegram — около 200. Безопасная длина — 110–160 символов.
В og:description идёт суть статьи, продающая фраза с пользой. Не дублируйте заголовок — читатель и так его видит. Лучше дать дополнение: что именно внутри, для кого, какая выгода после прочтения.
<meta property="og:description" content="Большой гайд: 5 главных тегов, размер og:image, настройка в WordPress, проверка превью и чек-лист на 15 пунктов." />og:image — самая важная картинка
Тег og:image задаёт картинку для превью. Это та самая большая прямоугольная плашка, которую видно в Telegram, LinkedIn, ВКонтакте над заголовком. Если у вас ровно один OG-тег на всю страницу — пусть это будет og:image. Без картинки превью практически не работает: Telegram показывает мелкую карточку «как у голой ссылки», Facebook ставит дефолтный серый прямоугольник, LinkedIn вообще иногда отказывается отображать.
Главные правила: размер ровно 1200×630 пикселей (детально про это — ниже в отдельном разделе), формат JPG или PNG, размер файла до 5 МБ, обязательно по HTTPS, без редиректов.
<meta property="og:image" content="https://selcdn.checkroi.ru/wp-content/uploads/og-image.jpg" />og:url — канонический адрес страницы
Тег og:url — это «настоящий» адрес страницы. Зачем он отдельно, если адрес уже есть в браузере? Затем, что один и тот же контент часто доступен по нескольким URL: с www и без, с трейлинг-слешем и без, с UTM-метками от рекламной кампании, с языковыми префиксами. Соцсеть должна понимать, что все эти варианты — одна и та же страница, и не плодить разные карточки.
В og:url кладётся канонический URL (canonical — «единственно верный»). Обычно он же стоит в теге <link rel="canonical">. Без UTM, абсолютный (со схемой https://), с одним вариантом домена.
<meta property="og:url" content="https://checkroi.ru/blog/open-graph/" />og:type — что это за страница
Тег og:type сообщает соцсети тип контента: статья, товар, видео, профиль, главная страница. От значения зависит, какие дополнительные поля можно подвесить и как именно платформа покажет превью. Самые ходовые значения — website и article. Полный список с правилами выбора — в следующем разделе.
<meta property="og:type" content="article" />Готовый базовый сниппет, который можно копировать в <head> любой страницы (поменять значения на свои):
<meta property="og:title" content="Заголовок вашей статьи" />
<meta property="og:description" content="Короткое описание на 110-160 символов." />
<meta property="og:image" content="https://ваш-сайт.ru/og-image.jpg" />
<meta property="og:url" content="https://ваш-сайт.ru/blog/your-post/" />
<meta property="og:type" content="article" />Этих пяти строк хватит, чтобы превью корректно работало в 90% соцсетей. Остальное — улучшения и тонкая настройка.
og:type — какое значение выбрать под ваш сайт
Список допустимых значений og:type описан в официальной спецификации Open Graph Protocol. Большинству сайтов хватит двух: website для общих страниц и article для блог-постов. Остальные значения нужны нишево.
| Тип страницы | og:type | Когда брать |
|---|---|---|
| Главная сайта, лендинг, страница услуги | website |
Универсальный дефолт. Если непонятно — ставьте его |
| Блог-пост, статья, новость, гайд | article |
Любой текстовый материал с автором и датой |
| Карточка товара в интернет-магазине | product |
Когда хочется передать цену, наличие, валюту |
| Видеообзор, страница с одним видео | video.movie |
Если хотите, чтобы Facebook встроил плеер |
| Личная страница, профиль автора | profile |
Для авторских блогов, портфолио |
| Книга | book |
Для книжных магазинов и библиотек |
| Музыкальный альбом, песня | music.album, music.song |
Для музыкальных сервисов |
Если ставите og:type=article — можно подвесить дополнительные свойства, которые соцсети используют по-разному. Самые полезные:
<meta property="article:published_time" content="2026-05-27T10:00:00+03:00" />
<meta property="article:author" content="https://checkroi.ru/author/ivan/" />
<meta property="article:section" content="Базовые понятия" />
<meta property="article:tag" content="SEO" />Facebook и LinkedIn используют эти поля для атрибуции автора и сортировки. На превью большинства платформ они напрямую не отображаются, но влияют на то, как пост попадает в ленты и категории.
Если непонятно, какой og:type ставить — берите article для блога, website для всего остального. Это безопасный выбор, ни одна платформа из-за него ничего не сломает.
Twitter Cards и Open Graph — нужно ли дублировать
Часто новички видят в гайдах две одинаковые разметки рядом: OG-теги с префиксом og: и Twitter Cards с префиксом twitter:. И возникает логичный вопрос: что это, надо ли всё дублировать, и можно ли обойтись чем-то одним.
Fallback-логика на пальцах
X (бывший Twitter) — единственная крупная соцсеть с собственным форматом карточек. Twitter Cards придумали ещё до того, как OG стал стандартом, поэтому исторически у X есть свой набор тегов. Но в X давно встроен fallback (механизм запасного варианта): если на странице нет специальных twitter:* тегов, X читает OG-теги и собирает карточку из них.
Цепочка fallback такая:
twitter:titleотсутствует — X берётog:titletwitter:descriptionотсутствует — X берётog:descriptiontwitter:imageотсутствует — X берётog:image
То есть если у вас уже настроена OG-разметка, X автоматически её подхватит. Дублировать всё — не нужно.
Один обязательный твиттер-тег
Чтобы X показал большую карточку с картинкой (а не маленькую с миниатюрой сбоку), всё-таки нужен один отдельный твиттер-тег:
<meta name="twitter:card" content="summary_large_image" />Без него X по умолчанию выберет summary — компактную карточку, где картинка слева в виде маленького квадратика. С тегом summary_large_image карточка станет большой, как в LinkedIn или Telegram. Этот один тег обязательно стоит добавить, всё остальное X дочитает из OG.
Когда всё-таки нужен отдельный twitter:image
Если вы целенаправленно делаете отдельную картинку для X с другим композитом (например, главная картинка для блога вертикальная, а для X нужна горизонтальная), можно прописать twitter:image отдельно. Если хотите разный заголовок или описание в Telegram и в X (например, в X добавить упоминание@аккаунта) — то же самое. В 90% случаев это не нужно.
Важный нюанс: пустой twitter:image="" ломает fallback. Если тег прописан, но пустой — X не пойдёт читать og:image, а просто покажет карточку без картинки. Либо ставьте полноценный URL, либо не указывайте тег вообще.
og:image — самый сложный для настройки тег
Если выбрать из всех OG-тегов один, который ломается чаще всего — это og:image. Все остальные теги — просто текст, тут сложно ошибиться. А с картинкой ошибиться можно семью разными способами. Разбираем по очереди.
Размер 1200×630px: почему именно столько пикселей?
Рекомендованный размер og:image — ровно 1200×630 пикселей. Это соотношение сторон 1.91:1. Цифра не случайна: именно её задаёт официальная документация Facebook for Developers, и под неё подстроились все остальные платформы — LinkedIn, ВКонтакте, Discord, Slack, WhatsApp, iMessage. Один универсальный размер, который везде показывается без обрезки.
Слишком маленькая картинка (меньше 600×315) не покажется вообще: Telegram отдаст превью без изображения, Facebook — компактную карточку без большой плашки. Слишком большая (например, 2400×1260) — технически допустима, но соцсети всё равно сожмут её до своего внутреннего стандарта, плюс вес файла окажется лишним. Делайте сразу 1200×630, не воюйте с системой.
Safe-zone для текста и лиц — 1080×600
Если на картинке есть текст или важные лица — держите их внутри центральной зоны примерно 1080×600 пикселей. Дело в том, что X (Twitter) и Telegram при отображении в ленте обрезают картинку до 1.91:1 с небольшим сжатием по краям. Если ваш заголовок упирается в край — рискуете тем, что в Телеге половина слова уйдёт за обрезку.
На 1200×630 безопасная зона — это центральный прямоугольник 1080×600 с отступом 60 пикселей по горизонтали и 15 пикселей по вертикали. Внутри — текст, лица, логотип. Снаружи — фоновая графика, которую не страшно потерять.
Что делает X (Twitter) и что Telegram
X показывает og:image в полноразмерной карточке summary_large_image с обрезкой до соотношения 2:1 (то есть из 1200×630 покажет примерно центральную 1200×600). Telegram отдаёт картинку 1.91:1 без обрезки, но иногда сжимает до~600 пикселей по ширине — тонкий шрифт мельче 30 pt становится нечитаемым.
Совет из практики: текст на og:image делайте крупным (от 48 pt и больше), с жирным контурным шрифтом, на однотонной подложке. Это первое, что увидит читатель в ленте — и единственный шанс зацепить его до клика.
Форматы: PNG, JPG, WebP, SVG, GIF
Безопасные форматы — JPG и PNG. Их одинаково хорошо читают все платформы. JPG лучше для фотографий (меньше вес), PNG — для графики с резкими краями и текстом (без артефактов сжатия).
WebP — новый формат от Google, поддерживается большинством браузеров. Но в OG-разметке его лучше не использовать. У Telegram до сих пор регулярные баги с WebP в og:image — иногда показывает, иногда нет. WhatsApp WebP не поддерживает совсем. Если ваш WordPress или CDN автоматически конвертирует все картинки в WebP — настройте исключение для og:image, либо отдавайте отдельный JPG.
SVG (векторная графика) не работает нигде в OG. Соцсети ждут растровое изображение и SVG просто игнорируют — превью отдастся без картинки.
GIF — технически работает, но соцсети возьмут только первый кадр. Анимация в превью не воспроизведётся. Если важна именно анимация — используйте og:video, а в og:image положите статичный кадр.
Вес файла и HTTPS
Лимиты по весу: Facebook принимает до 8 МБ, ВКонтакте — до 5 МБ, Telegram официально лимита не публикует, но картинки тяжелее 5 МБ часто молча режутся. Универсальная отметка — под 5 МБ. На практике хорошая 1200×630 JPG-картинка с качеством 85% весит 150–400 КБ — этого хватает с большим запасом.
HTTPS обязателен. Если ваш сайт ещё работает по HTTP (без буквы S после «http»), современные соцсети og:image просто откажутся загружать — это требование безопасности. И ни в коем случае не должно быть редиректов: если запрос на og:image отвечает 301 или 302 (перенаправление на другой URL), часть соцсетей по редиректу не пойдёт. Кладите картинку сразу на финальный URL.
Дополнительные свойства og:image
К основному og:image можно подвесить ещё четыре свойства, которые помогут соцсетям показать карточку правильно с первого раза:
<meta property="og:image" content="https://selcdn.checkroi.ru/og.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:alt" content="Open Graph: что это и как настроить — гайд checkroi" />Без width/height соцсеть всё равно загрузит картинку и измерит сама. С ними — Facebook показывает превью с первого захода без «зашёл несколько раз, чтобы прогреть». Это особенно важно для Telegram: при первом раскрытии бот успевает сразу собрать карточку, не падая на тайм-аут.
Реальные размеры показа по платформам
Картинка одна и та же (1200×630), а вот как именно её показывает каждая соцсеть — уже разное. Таблица для понимания, где какой safe-zone:
| Платформа | Реальный показ | Кеширует | Особенности |
|---|---|---|---|
| 1200×630, без обрезки | ~7 дней или до Sharing Debugger | Идеальный кейс. Жёсткий лимит по весу 8 МБ | |
| 1200×627, минимальная обрезка | ~7 дней | Любит твёрдый JPG, плохо ест PNG с прозрачностью | |
| Telegram | 1.91:1, сжимает до ~600 px | До нескольких месяцев | WebP — баги. Есть @WebpageBot для сброса кэша |
| X (Twitter) | 2:1, обрезает верх/низ | ~7 дней | Нужен twitter:card |
| ВКонтакте | 1.91:1 в ленте, 537×240 в карточке | До недели, есть pages.clearCache | Поддерживает vk:image, но необязательно |
| 1.91:1 | Долго, сброс только через смену URL | WebP не понимает | |
| Discord | 1.91:1 | ~7 дней | Читает og:image напрямую, аккуратен с превью |
| Slack | 1.91:1 | ~30 минут до ~24 часов | Быстрее всех обновляет кеш |
| 2:3 или 1:1, обрезает агрессивно | Свой Sharing Debugger | Любит вертикальные форматы |
Вывод: 1200×630 покрывает 7 из 9 платформ без боли. Для Pinterest при большом трафике оттуда имеет смысл делать отдельные вертикальные картинки (1000×1500), но это уже отдельная история, ради которой OG-теги не переделывают.
Как добавить OG-теги на свой сайт
Способ зависит от того, на чём у вас сделан сайт. Для 95% случаев работает одна из готовых интеграций — плагин в CMS или встроенный SEO-блок. Руками править <head> нужно только если у вас статика или самописное решение.
WordPress с Rank Math
Самый удобный вариант для WordPress в 2026 году. Rank Math — бесплатный SEO-плагин, который из коробки умеет OG-теги, Twitter Cards и schema.org.
После установки плагина в редакторе любой страницы или поста снизу появится блок «Rank Math». Внутри — вкладка «Social». На ней четыре поля: заголовок, описание и картинка отдельно для Facebook и для X. Если не заполнять — Rank Math берёт значения из обычных SEO-полей (Title, Description) и из «избранного изображения» поста. Если заполнить — переопределит для соцсетей.
Дефолтную картинку (для постов, где забыли поставить избранное изображение) задают в Rank Math → Titles & Meta → Global Meta → Open Graph Thumbnail. Поставьте сразу качественную 1200×630 с логотипом и названием сайта — и забудьте.
WordPress с Yoast SEO
Конкурент Rank Math. Логика та же. После установки в редакторе поста появится блок «Yoast SEO». В нём — раздел «Social» с подразделами Facebook и Twitter. Поля заголовка, описания и картинки — такие же. Дефолты задаются в SEO → Social → Facebook: включите «Add Open Graph meta data», загрузите дефолтную картинку.
Yoast в бесплатной версии чуть менее автоматический — нужно ручками включить тумблер OG (Rank Math делает это сам), но в остальном плагины эквивалентны.
WordPress с AIO SEO
Третий популярный плагин — All in One SEO. Логика идентичная: после установки в AIOSEO → Social Networks → Facebook включается генерация OG, задаётся дефолтная картинка. В редакторе поста под текстом появляется блок с social-полями.
Если выбираете между тремя: Rank Math — самый «умный» из коробки, Yoast — самый старый и стабильный, AIO SEO — между ними. Любой из трёх закроет задачу OG на 95%, дальше уже про нюансы schema.org и редиректов.
Tilda — встроенный SEO-блок
В Tilda OG-разметка зашита в встроенный SEO-блок страницы. Открываете страницу → шестерёнка слева → «SEO». В разделе «Image for previews in social networks» загружаете картинку (Tilda сама ресайзит, но лучше готовить заранее в 1200×630), отдельно заполняете Title и Description для соцсетей.
Лайфхак: если поле «Image for previews» оставить пустым — Tilda подставит первую картинку с самой страницы. Иногда это нормально, иногда — превью получает рандомную иконку из блока «наши преимущества». Лучше всегда задавать вручную.
Битрикс
В Битриксе OG-теги обычно зашиты в шаблон сайта. У типового шаблона из коробки есть автоматическая генерация og:title из заголовка страницы и og:description из мета-описания. Картинку часто берёт первую из инфоблока. Если этого мало — разработчик добавляет в шаблон вызов $APPLICATION->ShowMeta() с нужными свойствами либо подключает решение типа «Аспро Микроразметка».
Без программиста на Битриксе обычно не обойтись. Если страница одна-две и нужно срочно — впишите OG-теги прямо в шаблон header.php вашего темплейта руками. Долгосрочно — делайте через свойства инфоблока и SetMeta().
Чистый HTML — если статика или самописное
Если у вас не CMS, а просто HTML-файлы (лендинг от подрядчика, статичный сайт на Hugo/Jekyll, html-страница из конструктора) — OG-теги добавляются вручную в <head>. Открываете index.html (или нужный файл), находите тег <head>, после <title> вставляете блок из пяти строк:
<meta property="og:title" content="Заголовок страницы" />
<meta property="og:description" content="Описание для соцсетей." />
<meta property="og:image" content="https://ваш-сайт.ru/og.jpg" />
<meta property="og:url" content="https://ваш-сайт.ru/" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />Картинку og.jpg загружаете в корень сайта или в /img/, обязательно по HTTPS. На каждой странице будут одинаковые теги — это нормально для маленьких сайтов. Для большого статичного сайта стоит задуматься о генераторе (Hugo, Eleventy, Astro — все умеют OG из коробки).
Для тех, кто кодит — Next js, Nuxt, Astro
Современные фреймворки умеют OG-теги нативно. В Next.js 14+ есть Metadata API: экспортируете metadata или generateMetadata из page-файла, фреймворк сам рендерит OG-теги в <head>. Astro и Nuxt работают через слот <head> в layout. Документация у каждого фреймворка короткая и понятная — на главную задачу уходит 5 минут.
Дополнительные теги, про которые забывают
Базовых пяти тегов хватит почти всегда. Но есть ещё несколько, которые стоит знать. Польза от них небольшая, но в некоторых сценариях критичная.
og:site_name — название сайта
Тег og:site_name задаёт читаемое название сайта, которое некоторые соцсети показывают над заголовком карточки. Facebook раньше показывал, сейчас — нет. LinkedIn показывает. На превью большинства платформ не виден, но влияет на индексирование и аналитику.
<meta property="og:site_name" content="Блог Checkroi" />og:locale — язык страницы
Тег og:locale — это код языка и региона. По нему соцсети понимают, на каком языке контент, и подсовывают карточку нужной аудитории. Для русского сайта значение — ru_RU. Для англоязычной версии — en_US.
<meta property="og:locale" content="ru_RU" />Если у вас мультиязычный сайт с несколькими языковыми версиями одной страницы, добавьте og:locale:alternate для каждого дополнительного языка:
<meta property="og:locale" content="ru_RU" />
<meta property="og:locale:alternate" content="en_US" />
<meta property="og:locale:alternate" content="es_ES" />fb:app_id — нужен ли он именно вам
Тег fb:app_id — это идентификатор приложения в Facebook for Developers, который привязывает превью к вашему аккаунту разработчика. Зачем: даёт доступ к Facebook Insights (статистика репостов), позволяет регистрировать действия пользователей с превью.
Если у вас личный блог или маленький сайт без рекламной кампании в Facebook — забейте, тег не нужен. Если есть рекламный кабинет, Pixel и какая-то аналитика — зарегистрируйтесь как разработчик на developers.facebook.com, создайте приложение, скопируйте App ID:
<meta property="fb:app_id" content="1234567890123456" />В Rank Math и Yoast для этого есть отдельное поле в настройках, плагин сам впишет.
article:* — детали статьи
Если og:type=article, можно (но не обязательно) добавить четыре дополнительных тега:
<meta property="article:published_time" content="2026-05-27T10:00:00+03:00" />
<meta property="article:modified_time" content="2026-05-27T12:30:00+03:00" />
<meta property="article:section" content="Базовые понятия" />
<meta property="article:tag" content="SEO" />
<meta property="article:tag" content="вёрстка" />Rank Math и Yoast добавляют их сами из метаданных поста. Руками — только на самописных решениях.
vk:image — миф или нужно
В рунете часто видишь рекомендации добавлять vk:image отдельным тегом для ВКонтакте. Это миф из 2017–2018 годов. Сейчас VK полностью читает стандартный og:image и vk:image воспринимает как алиас. Прописывать его отдельно не нужно, если у вас уже есть og:image правильного размера.
Как сгенерировать OG-теги нейросетью за минуту
Самая нудная часть OG-разметки — даже не вёрстка тегов, а написание og:title и og:description. Они должны быть короткие, цепляющие, по-разному формулировать одну и ту же мысль, отличаться от <title> страницы. Сидеть и переписывать одно и то же предложение под разные лимиты символов — скучно.
В 2026 году нейросети с этим справляются за минуту. Самый удобный инструмент — Claude Code, командная утилита от Anthropic, которая работает прямо в терминале и умеет читать URL вашей страницы. Под капотом — Claude Opus 4.7 и Sonnet 4.6, самые точные модели Anthropic на сегодня. Альтернативы — ChatGPT с моделью GPT-5.5, Cursor с встроенными нейросетями, Gemini 3 Pro в веб-интерфейсе. Принцип у всех одинаковый. Подробный разбор Claude Code — в нашей статье «Что такое Claude», а сравнение AI-инструментов для разработки — в обзоре «Cursor AI».
Зачем тут нейросеть. Не для технической вёрстки тегов (это умеет любой плагин), а для копирайтинга внутри них. Хороший
og:description— это маленькая продажа клика. Нейросеть выдаёт 5–10 вариантов за секунду, дальше остаётся выбрать живой.
Пример рабочего промпта
Открываете Claude Code в терминале (или любой AI-чат), копируете промпт и подставляете свой URL:
Открой страницу https://мой-сайт.ru/blog/моя-статья/ и собери для неё
Open Graph-разметку.
Требования:
- og:title — короткий цепляющий заголовок, до 60 символов,
отличный от title страницы, без названия сайта в конце
- og:description — продающее описание, 110-160 символов, с пользой
для читателя, без шаблонных оборотов
- og:type — определи сам (article / website / product / video.movie)
- og:url — каноническая ссылка статьи
- og:image — оставь placeholder со ссылкой на //selcdn.checkroi.ru/og.jpg
Дай 3 варианта на выбор. Финальный HTML — готов к копированию в <head>.Claude Code откроет страницу, прочитает её содержимое, определит тип контента и выдаст готовый набор. С тремя вариантами на выбор — это важно, потому что первый вариант часто звучит слишком формально, а в третьем обычно появляется живая формулировка.
Что нейросеть делает хорошо
- Короткие тексты под лимит символов. Считает символы точно, не выходит за 60 и 160.
- Несколько вариантов формулировок. Помогает сравнить и выбрать лучший.
- Адаптацию под целевую аудиторию. Если в промпте указать «для маркетологов» или «для разработчиков» — подстроит лексику.
- Определение og:type из содержимого. Понимает, что блог-пост — это
article, лендинг услуги —website, страница товара —product.
Что нейросеть делает плохо — и что фактчекать руками
Четыре пункта, которые нейросеть регулярно путает или придумывает. Проверять обязательно:
- Размер картинки. Иногда нейросеть пишет в комментариях «рекомендуемый размер 1200×627» или «1500×800». Правильный — ровно 1200×630, как в официальной спецификации. Размер
og:imageопределяете вы сами, а не нейросеть — просто игнорируйте её комментарии про пиксели. - URL картинки. Нейросеть может подставить вымышленный путь типа
/wp-content/uploads/2024/01/og.jpg, которого у вас на самом деле нет. Поставьте сами рабочую ссылку до публикации. - Даты в article:published_time. Если просили заполнить — перепроверьте: даты могут оказаться вымышленными или в неправильном формате (нужен ISO 8601 с таймзоной).
- Лишние теги. Иногда нейросеть добавляет устаревшие или несуществующие теги типа
og:rich_attachmentилиtwitter:domain, увиденные в каком-то старом гайде. Если тега нет в официальной спеке — удаляйте.
Самый честный подход: нейросеть пишет og:title и og:description (там от неё больше всего пользы), остальные теги вы вписываете руками по шаблону. Это занимает минуту и убирает все четыре риска сразу.
Как проверить разметку — пошагово, без программиста
OG-теги прописали, картинку залили, страницу сохранили. Дальше нужно убедиться, что превью везде показывается как надо. Инструментов много, разберём главные.
Facebook Sharing Debugger
Главный инструмент проверки — developers.facebook.com/tools/debug. Подойдёт любому, не только для проверки в Facebook. Дебаггер показывает все OG-теги, которые видит Facebook на странице, превью карточки и список ошибок (если есть). Открываете, вставляете URL, нажимаете «Debug» — получаете полный отчёт.
Самое полезное в Sharing Debugger — кнопка «Scrape Again». По ней Facebook принудительно перезаходит на страницу и обновляет свой кеш. Если поменяли картинку или заголовок — делайте «Scrape Again», иначе в течение 7 дней лента будет показывать старое.
@WebpageBot в Telegram
Telegram кеширует превью особенно надолго — иногда до нескольких месяцев. Если вы поменяли картинку статьи, а в Телеге всё ещё старое превью — используйте официального бота@WebpageBot. Откройте чат с ним, отправьте команду /start, потом пришлите ссылку, превью которой нужно обновить. Бот ответит «OK» — и через минуту в любом канале или чате превью обновится.
За один заход бот принимает до 10 ссылок. Полезно, если перенесли блог на новый домен и нужно обновить много URL сразу.
Сброс кеша VK через pages clearCache
ВКонтакте предоставляет отдельный сервис для сброса кеша — vk.com/dev/pages.clearCache. Откройте, вставьте URL, нажмите «Запустить» — VK перечитает страницу. Работает только для верифицированных доменов вашего сообщества или для авторизованных приложений.
X Card Validator
Раньше у X (Twitter) был свой публичный валидатор cards-dev.twitter.com/validator. После смены руководства его то закрывают, то открывают, то меняют адрес. Актуальный путь стоит гуглить (запрос «X card validator»). Сторонние — например, opentweet.io — показывают, как карточка будет выглядеть в X на основе текущих OG-тегов.
Яндекс Валидатор микроразметки
На webmaster.yandex.ru/tools/microtest/ есть проверка любой микроразметки, включая Open Graph. Покажет все теги, которые видит Яндекс, и подсветит ошибки. Полезно проверить перед запуском, особенно если сайт ориентирован на Дзен и поиск Яндекса.
View Source — проверка вручную
Самый базовый способ — открыть страницу в браузере, нажать Ctrl+U (Cmd+Option+U на Mac), увидеть исходный код, поиском найти og:. Если теги есть и значения правильные — технически всё нормально. Если нет — разметка не зашла, дальше уже разбираться, какой плагин или шаблон её не сгенерил.
Что делать, если поменял картинку, а превью старое
Универсальный лайфхак — инвалидация через query-параметр. Если ваш og:image был https://сайт.ru/og.jpg, поменяйте файл (или загрузите новый под тем же именем) и в OG-теге укажите https://сайт.ru/og.jpg?v=2. Соцсеть увидит «новый» URL и перечитает картинку с нуля, минуя свой кеш.
Telegram отдельный случай. Его кеш живёт дольше всех. Сначала прогоняем ссылку через @WebpageBot, потом отправляем её в тестовый канал — и только потом постим в основной канал. Если сразу запостить в основной — Telegram кеширует старое превью на месяц, и менять его придётся с боями.
Чек-лист из 15 пунктов перед запуском
Когда настройка кажется готовой — пробегите по чек-листу. Все 15 пунктов должны быть выполнены, иначе превью где-нибудь да сломается:
og:titleпрописан, длиной до 60 символов, без названия сайта в концеog:descriptionпрописан, длина 110–160 символов, не дублирует заголовокog:imageпрописан, ровно 1200×630 пикселей, формат JPG или PNG- Картинка весит меньше 5 МБ
- Картинка по HTTPS, без редиректов
- Лицо и важный текст внутри центральной зоны 1080×600
- Картинка НЕ в формате WebP / SVG / GIF-анимация
og:urlпрописан, абсолютный, с HTTPS, совпадает с canonicalog:typeсоответствует контенту страницы (articleдля блога,websiteдля главной)og:image:widthиog:image:heightпрописаны, помогают Telegram- Тег
twitter:cardсо значениемsummary_large_imageдобавлен - На странице нет дублей
og:image(только один тег с одним URL) - Страница проверена в Facebook Sharing Debugger — нет ошибок
- Ссылка отправлена @WebpageBot для инвалидации кеша Telegram
- Контрольный пост в тестовый канал/чат сделан, превью выглядит правильно
Сохраните себе и пробегайте перед публикацией каждой важной страницы — занимает 3 минуты и спасает от «я почему-то весь день в Телеге публикую без картинки».
Частые ошибки и как их избежать
Восемь ошибок, которые встречаются у 7 из 10 сайтов при первой настройке OG. Разбираем причину и фикс.
WebP в og:image. Symptом: в Telegram превью без картинки, в WhatsApp вообще не отрисовывается, в Facebook работает через раз. Причина: WebP несовместим с частью краулеров соцсетей. Фикс: отдавайте JPG или PNG. Если плагин WordPress (типа WebP Express, ShortPixel) автоматически конвертирует все картинки в WebP — настройте исключение для og:image либо отдавайте JPG напрямую с другого URL.
Редирект на картинке. Symptom: превью работает в 1 соцсети из 5, в остальных пусто. Причина: ваш сервер на запрос og:image отвечает 301 или 302 (перенаправление). Часть соцсетей по редиректу не идёт. Фикс: положите картинку сразу на финальный URL без редиректов. Проверка — через curl -I <ваш URL> в терминале, ответ должен быть HTTP/2 200, а не 301/302.
Дубли og:image. Symptom: разные соцсети показывают разные картинки на одной странице. Причина: на странице несколько тегов og:image — один от темы, один от SEO-плагина, один от шаблона. Каждая соцсеть выбирает по-своему. Фикс: открыть исходный код, найти все og:image, оставить один. Часто помогает отключить лишний плагин или почистить шаблон.
og:url не совпадает с canonical. Symptom: соцсеть кеширует превью для одного URL, а посты публикуются с другим. Картинка обновляется, ссылка в посте — нет. Причина: og:url жёстко прописан, а реальная ссылка отличается (с UTM, с www, без слеша на конце). Фикс: og:url = значению из <link rel="canonical">, всегда абсолютный, всегда HTTPS, всегда один и тот же вариант.
Картинка на CDN с CORS-ограничением. Symptom: на сайте картинка отображается, но Facebook Sharing Debugger пишет «не могу загрузить изображение». Причина: ваш CDN или сервер режет запросы по HTTP-заголовкам (User-Agent, Origin) и блокирует Facebook-краулер. Фикс: проверьте настройки CDN, разрешите запросы от User-Agent facebookexternalhit, TelegramBot, WhatsApp, Twitterbot, LinkedInBot.
Кеш соцсети. Symptom: поменяли картинку, в Sharing Debugger всё новое, а в реальной ленте всё ещё старое. Причина: соцсеть отдельно кеширует превью на уровне ленты, ещё нужно время или принудительный rescrape. Фикс: «Scrape Again» в Sharing Debugger, @WebpageBot в Telegram, vk.com/dev/pages.clearCache в VK. Дальше — подождать 5–30 минут.
Превью работает в WhatsApp, не работает в Telegram. Symptom: вроде всё одинаковое, а ведёт себя по-разному. Причина: чаще всего — картинка WebP (Telegram её не любит), или картинка тяжелее 5 МБ, или нет og:image:width/og:image:height и Telegram не успел измерить за тайм-аут. Фикс: JPG, размер 1200×630, добавить width/height в OG-разметку.
Большой og:image (> 5 МБ). Symptom: ВКонтакте режет превью или не показывает. Причина: лимит VK — 5 МБ на картинку. Фикс: сжать JPG до 200–500 КБ. Этого достаточно для качества при показе.
Где научиться SEO и техническим основам сайта целиком
Open Graph — это лишь одна маленькая часть технического SEO. За ней стоит огромный мир: оптимизация скорости загрузки, грамотный canonical, sitemap, robots.txt, schema.org, ускоренные мобильные версии, поведенческие факторы. Если хочется освоить ремесло системно, а не собирать обрывки гайдов — проще один раз сесть на нормальный курс. Подборка ниже — 144 программы по SEO-продвижению с честными отзывами и прозрачным рейтингом школ.
| Курс | Школа | Стоимость со скидкой | В рассрочку | Длительность | Обзор курса от Checkroi |
|---|---|---|---|---|---|
| Performance-маркетинг в SEO Перейти на сайт курса |  Skillbox | 54 600 ₽ | 4550 ₽/мес. | 4 месяца | Обзор курса |
| Профессия «SEO-специалист с нуля до PRO» Перейти на сайт курса | Skillbox | 100 733 ₽ | 4579 ₽/мес. | 12 месяцев | Обзор курса |
| SEO-специалист PRO Перейти на сайт курса |  Нетология | 116 820 ₽ | 4867 ₽/мес. | 4 месяца | Обзор курса |
| SEO-специалист: базовый курс Перейти на сайт курса | Нетология | 44 700 ₽ | 2483 ₽/мес. | 4 месяца | Обзор курса |
| SEO-специалист: курс от AMDG Перейти на сайт курса | Skillbox | 55 245 ₽ | 4597 ₽/мес. | 4 месяца | Обзор курса |
| Профессия «SEO-специалист» Перейти на сайт курса | Skillbox | Бесплатно | 3320 ₽/мес. | 12 месяцев | Обзор курса |
| SEO-специалист Перейти на сайт курса | Нетология | 92 500 ₽ | 3084 ₽/мес. | 12 месяцев | Обзор курса |
| SEO-продвижение Перейти на сайт курса |  DSA | 27 500 ₽ | 2291 ₽/мес. | 1 месяц | Обзор курса |
| Факультет SEO-продвижения Перейти на сайт курса |  GeekBrains | 104 700 ₽ | 2908 ₽/мес. | 12 месяцев | Обзор курса |
| Международное SEO Перейти на сайт курса | Skillbox | 67 937 ₽ | 4199 ₽/мес. | 3 месяца | Обзор курса |
Больше программ — в полном каталоге курсов по поисковой оптимизации (seo)
Дальше по теме SEO у нас есть несколько разборов, которые хорошо дополняют этот гайд: «SEO для начинающих» (что вообще входит в техническую и контентную оптимизацию), «SEO-специалист» (если хотите понять, кому пригодится эта работа), «Оптимизация карточки товара» (соседняя тема про микроразметку для интернет-магазинов) и «Факторы ранжирования Яндекса» (что вообще учитывает поисковик).
Open Graph настраивается один раз и работает годами. Аккуратная настройка с самого начала экономит часы дебага потом: размер картинки 1200×630, заполненный og:type, проверка в Sharing Debugger — три действия, которые закрывают 90% проблем с превью. Дальше каждая ссылка на ваш сайт в соцсетях работает как маленькая реклама, а вы не ловите еженедельное «опять в Телеге без картинки».
