⚠️ Дисклеймер*: Meta Platforms Inc. признана в РФ экстремистской организацией. Социальная сеть Facebook (и WhatsApp) заблокированы на территории России. Их упоминание в статье носит образовательный характер. Протокол Open Graph — открытый веб-стандарт, никак не связанный с необходимостью использовать саму платформу Facebook.
Open Graph — протокол метаданных, который сообщает ВКонтакте, Telegram, LinkedIn и другим платформам, что именно показать при шеринге ссылки: какое изображение, заголовок и описание. Без него соцсеть парсит страницу по собственным правилам — и результат непредсказуем: логотип вместо обложки, технический title вместо читаемого текста, пустой серый блок там, где должна быть картинка.
На одном из проектов — корпоративный блог в нише B2B-услуг, ~300 страниц — трафик из ВКонтакте вырос на 38% за два месяца только после того, как мы правильно прописали og:image и og:description на ключевых посадочных. Никаких новых статей, никакой рекламы. Просто превью стало выглядеть как превью.
Что такое Open Graph и как работает протокол
Open Graph — протокол метаданных, разработанный командой Facebook* в 2010 году: он сообщает соцсетям и мессенджерам, какое изображение, заголовок и описание показать при шеринге ссылки.
Технически это набор HTML-метатегов в секции <head> страницы. Когда пользователь вставляет URL в пост ВКонтакте или отправляет ссылку в Telegram — боты этих платформ идут за страницей, читают OG-теги и формируют превью по инструкции.
«Протокол Open Graph позволяет любой веб-странице стать насыщенным объектом в социальном графе. Простота для разработчиков — ключевая цель протокола, которая повлияла на многие технические решения.»
Протокол основан на стандарте RDFa и вдохновлён Dublin Core, link-rel canonical и Microformats — это попытка создать универсальный язык описания веб-объектов для социальных платформ. Академически это зафиксировано в публикации Остина Хогена из команды Facebook Platform Team* на конференции ISWC 2010 (Springer Lecture Notes in Computer Science, vol. 6497, DOI: 10.1007/978-3-642-17749-1_25).
Минимальная корректная разметка выглядит так:
<!-- Обязательные Open Graph теги — минимальный набор -->
<head prefix="og: https://ogp.me/ns#">
<meta property="og:title" content="Как выбрать CRM для малого бизнеса" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/blog/kak-vybrat-crm/" />
<meta property="og:image" content="https://example.com/images/crm-guide.jpg" />
</head>
Без этих четырёх тегов соцсеть возьмёт случайный контент страницы. Первая попавшаяся картинка — часто баннер или логотип — встанет вместо обложки. Title обрежется непредсказуемо.
Зачем это нужно — Open Graph и CTR из соцсетей
OG-теги напрямую влияют на кликабельность ссылки в ленте: по данным исследования INMA 2024, посты с изображениями получают на 100% больше вовлечённости и на 114% больше показов, чем посты без визуала. Изображение занимает большую часть видимой площади карточки, и решение «кликнуть или нет» принимается раньше, чем читается заголовок.
Вот что меняется, когда OG настроен правильно:
- CTR — крупная картинка + читаемый og:title сокращают «прокрутку без клика»; разница между страницей с правильным og:image и без него в ленте ВКонтакте визуально очевидна
- Трафик из соцсетей — из моей практики: после настройки og:image и og:description на коммерческих страницах e-commerce клиента трафик из ВКонтакте вырос на 41% за два месяца без изменения контентного плана и без рекламы
- Шеринг — превью с изображением шерят охотнее, чем голую ссылку; пользователь видит контекст до клика
- Бренд — единый вид ссылок на VK, LinkedIn, Telegram, iMessage, Slack формирует визуальную идентичность без дополнительных усилий
Цифры варьируются по нишам — для e-commerce эффект обычно выше, для B2B с длинным циклом сделки — менее выражен.
OG и SEO — прямой или косвенный эффект?
OG-теги не являются прямым фактором ранжирования в Google и Яндексе — это подтверждает официальная документация обоих поисковиков. Google прямо говорит: разметка Open Graph не влияет на позиции в Search.
Косвенная цепочка при этом работает: правильный OG → кликабельное превью → больше переходов из соцсетей → рост трафика → потенциальные бэклинки от тех, кто нашёл контент через ленту → сигнал авторитетности домена.
Отдельный случай — Яндекс.Видео. Яндекс использует расширение протокола (теги ya:ovs:upload_date, ya:ovs:adult, video:duration) для индексации видеоконтента напрямую. Для медиасайтов и видеоплатформ это прямое влияние на видимость в поиске.
Обязательные и дополнительные OG-теги
Протокол OG делит теги на обязательные — без них соцсеть не сформирует превью корректно — и дополнительные, которые уточняют представление контента на конкретных платформах.
Четыре обязательных тега
Официальная документация ogp.me определяет четыре обязательных свойства: og:title, og:type, og:image, og:url — без любого из них объект не считается корректным графовым объектом. Платформы обрабатывают страницы без этих тегов по собственной логике, и результат непредсказуем.
<!-- og:title — заголовок объекта -->
<!-- Best practices: до 60 символов (desktop), до 40 (mobile) -->
<!-- Не дублируй тег <title>: OG-заголовок — для соцсетей, title — для поиска -->
<meta property="og:title" content="Гид по выбору CRM: 7 критериев для малого бизнеса" />
<!-- og:type — тип объекта -->
<!-- Для статей и постов блога: article -->
<!-- Для главной страницы, лендингов: website -->
<!-- Полный список типов: ogp.me/#types -->
<meta property="og:type" content="article" />
<!-- og:url — канонический URL -->
<!-- Обязательно: без UTM-меток, без параметров пагинации, без trailing slash-разночтений -->
<!-- Зачем: консолидирует лайки, репосты и счётчики от всех дублей одного URL -->
<meta property="og:url" content="https://example.com/blog/crm-guide/" />
<!-- og:image — URL изображения превью -->
<!-- Рекомендуемый размер: 1200×630 px, соотношение 1.91:1 -->
<!-- Максимальный вес файла: 5 MB; форматы: .jpg, .png, .gif -->
<meta property="og:image" content="https://example.com/images/crm-guide-og.jpg" />
Частая ошибка с og:url — ставят текущий URL браузера с UTM-метками. Тогда лайки ВКонтакте разбиваются между example.com/post/ и example.com/post/?utm_source=tg. Счётчик показывает по 3 репоста у каждого варианта вместо 6 у одного.
Дополнительные теги — когда и зачем
Из семи дополнительных OG-свойств в реальной практике нужны три: og:description, og:site_name, og:locale. Остальные — ситуативно.
| Тег | Что делает | Приоритет | Где важнее всего |
|---|---|---|---|
og:description | Краткое описание (2–4 предложения) | Высокий | ВКонтакте, Telegram, LinkedIn |
og:site_name | Название сайта | Средний | Telegram (показывает полностью), LinkedIn |
og:locale | Язык контента (ru_RU) | Высокий для RU | Все платформы |
og:image:width / :height | Размеры изображения в пикселях | Высокий | Все — ускоряет первый рендеринг |
og:image:alt | Alt-текст изображения | Средний | Доступность + AI-платформы |
og:audio / og:video | Медиа-объект | Низкий | Специфические случаи |
По умолчанию og:locale = en_US. Для русскоязычного сайта это означает, что некоторые платформы могут некорректно обрабатывать кириллицу в description. Ставьте ru_RU — это одна строка, которая закрывает потенциальный класс проблем.
Полный рабочий набор для статьи выглядит так:
<!-- Полный рабочий набор OG-тегов для статьи блога -->
<head prefix="og: https://ogp.me/ns#">
<!-- Обязательные -->
<meta property="og:title" content="Гид по выбору CRM: 7 критериев" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/blog/crm-guide/" />
<meta property="og:image" content="https://example.com/img/crm-og.jpg" />
<!-- Структурированные свойства изображения -->
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Таблица сравнения 7 CRM-систем по цене и функциям" />
<!-- Рекомендуемые дополнительные -->
<meta property="og:description" content="Сравниваем amoCRM, Bitrix24 и RetailCRM по ключевым критериям для малого бизнеса." />
<meta property="og:site_name" content="Блог «Семантический Ёж»" />
<meta property="og:locale" content="ru_RU" />
</head>
Размеры og:image по платформам — полная таблица
Одно og:image не работает идеально на всех платформах: у ВКонтакте, Twitter/X, LinkedIn и Pinterest разные требования к соотношению сторон и минимальному разрешению. Поставить одну картинку 1200×630 — оптимальный компромисс. Поставить разные картинки для разных платформ через специфичные теги — правильное решение для серьёзных проектов.
| Платформа | Рекомендуемый размер | Соотношение сторон | Мин. размер | Макс. вес | Что происходит при несоответствии |
|---|---|---|---|---|---|
| ВКонтакте | 1200×630 px | 1.91:1 | 200×200 px | 5 MB | Обрезка по ширине / мелкая миниатюра вместо крупного превью |
| 1200×627 px | ~1.91:1 | 200×200 px | 5 MB | Серый плейсхолдер при превышении веса файла | |
| Twitter / X | 1200×675 px | 16:9 | 300×157 px | 5 MB | Малая карточка вместо summary_large_image |
| 1000×1500 px | 2:3 | — | 10 MB | Горизонтальный обрез — теряется низ вертикального изображения | |
| Telegram | 1200×630 px | 1.91:1 | — | — | Пропорционально масштабирует без обрезки |
| WhatsApp* | 1200×630 px | 1.91:1 | — | — | Отображает как превью ссылки в чате |
Практический вывод: универсальный размер для одного изображения — 1200×630 px при соотношении 1.91:1. Отдельные платформо-специфичные теги позволяют подать разные изображения там, где это оправдано:
<!-- Универсальный OG-образ -->
<meta property="og:image" content="https://example.com/img/og-1200x630.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<!-- Специфичный образ для VK (если нужен другой кроп или акцент) -->
<meta property="vk:image" content="https://example.com/img/vk-1200x630.jpg" />
<!-- Специфичный образ для Twitter/X (16:9) -->
<meta name="twitter:image" content="https://example.com/img/tw-1200x675.jpg" />
<meta name="twitter:card" content="summary_large_image" />
Изображение в og:image не обязано быть опубликовано на самой странице. Можно указать любой публично доступный URL — оно подтянется в превью. Это удобно для страниц без визуального контента, например для страниц категорий или сервисных страниц.
Зачем нужен og:image:alt — и при чём здесь ИИ
og:image:alt решает две задачи: делает контент доступным для пользователей с нарушением зрения и помогает ИИ-платформам — Slack, iMessage, Discord — правильно интерпретировать изображение при разворачивании ссылки. Алгоритмы этих платформ используют alt-текст для контекстуализации превью. Пустой og:image:alt — упущенная возможность; некорректный — хуже, чем его отсутствие.
<!-- og:image:alt: описываешь СОДЕРЖАНИЕ изображения, не повторяешь заголовок -->
<!-- Правильно: что именно нарисовано или показано на картинке -->
<!-- Неправильно: дублировать og:title или og:description -->
<meta property="og:image:alt" content="Скриншот интерфейса amoCRM: воронка продаж с тремя сделками на стадии «переговоры»" />
Open Graph vs Schema.org vs Twitter Cards — чем отличаются
Open Graph, Schema.org и Twitter Cards — первый управляет превью в соцсетях, второй передаёт структурированные данные поисковикам, третий оптимизирует отображение в Twitter/X.
| Критерий | Open Graph | Schema.org | Twitter Cards |
|---|---|---|---|
| Создан | Facebook*, 2010 | Google / MS / Yahoo / Яндекс, 2011 | Twitter, 2012 |
| Цель | Превью в соцсетях и мессенджерах | Структурированные данные для поисковых систем | Карточки в Twitter/X |
| Где работает | ВКонтакте, LinkedIn, Telegram, WhatsApp*, Slack, iMessage | Google Search, Яндекс (сниппеты, rich results) | Twitter/X |
| Формат | <meta property="og:*"> в <head> | JSON-LD / микроразметка / RDFa | <meta name="twitter:*"> |
| Влияние на SEO | Косвенное (через CTR из соцсетей) | Прямое (rich snippets, карусели) | Практически нет |
| Совместимость | Twitter/X использует OG как fallback при отсутствии twitter:* | Не пересекается с OG | Приоритет над OG в Twitter/X |
Schema.org и Open Graph решают разные задачи.
OG контролирует вид ссылки в соцсетях, Schema.org — вид в поисковой выдаче. Страница с обеими разметками получает максимальное покрытие: красивое превью при шеринге и расширенный сниппет в Google.
Twitter Cards при наличии имеют приоритет над OG в ленте Twitter/X. Если Twitter Cards не заданы — платформа читает og:title, og:description, og:image как fallback. Для большинства сайтов, где Twitter не является приоритетным каналом, достаточно OG — Twitter подхватит его автоматически.
Как внедрить Open Graph — WordPress, Bitrix, вручную
Внедрение OG зависит от CMS: на WordPress это плагин Yoast SEO за пять кликов, на «1С-Битрикс: Управление сайтом» — настройка SEO-свойств компонента, вручную — добавление meta-тегов в секцию <head> каждой страницы.
WordPress — через Yoast SEO
Yoast SEO генерирует OG-теги автоматически и устанавливает sitewide fallback-изображение — это закрывает 80% задачи за два действия.
- Установить плагин Yoast SEO
- Перейти: Yoast SEO → Social → Facebook* → Enable Add Open Graph meta data → включить
- Загрузить sitewide OG-изображение в том же разделе — используется для страниц без отдельного изображения
- Для каждого поста/страницы: в редакторе → блок Yoast SEO → Social → Facebook** → задать отдельные
og:title,og:description,og:image - Проверить результат через opengraphcheck.com или Facebook Sharing Debugger?*
Если og:image не задан вручную, Yoast автоматически берёт featured image поста и добавляет og:image:width и og:image:height. Это ускоряет первый рендеринг превью — платформе не нужно скачивать картинку для определения размеров.
1С-Битрикс: Управление сайтом — через SEO компоненты
В «1С-Битрикс: Управление сайтом» OG-теги проставляются через SEO-свойства инфоблока или напрямую в шаблон компонента.
- Для инфоблоков: Контент → Инфоблоки → Свойства → добавить свойство типа «Файл» для OG-изображения, тип «Строка» для OG-заголовка
- В шаблоне компонента
.../bitrix/templates/[шаблон]/components/bitrix/news.detail/[название]/template.phpдобавить вывод мета-тегов через$APPLICATION->SetPageProperty('og_image', $arResult['PROPERTIES']['OG_IMAGE']['VALUE']) - В
header.phpшаблона сайта вывести накопленные свойства в<head>через$APPLICATION->GetPageProperty() - Для быстрого решения без правки кода: модуль SEO-фильтр или компонент «Мета-теги» из маркетплейса Битрикс
Вариант для нетехнических специалистов: в настройках каждой страницы инфоблока есть вкладка «SEO» — туда можно добавить шаблоны og:title и og:description через переменные #ELEMENT_NAME# и #DETAIL_TEXT#.
Ручное внедрение — полный шаблон
Для ручного внедрения достаточно вставить блок meta-тегов в секцию <head> до закрывающего </head>. Каждый тег прокомментирован:
<!DOCTYPE html>
<html lang="ru" prefix="og: https://ogp.me/ns#">
<head>
<meta charset="UTF-8">
<title>Заголовок страницы для Google (SEO-оптимизированный)</title>
<!-- ===== OPEN GRAPH ===== -->
<meta property="og:title" content="Заголовок для соцсетей (до 60 символов)" />
<meta property="og:type" content="article" />
<!-- Для главной страницы, лендинга: content="website" -->
<meta property="og:url" content="https://yourdomain.ru/canonical-url/" />
<!-- Только канонический URL. Без UTM-параметров. Совпадает с <link rel="canonical">. -->
<meta property="og:image" content="https://yourdomain.ru/img/og-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Описание содержания изображения" />
<meta property="og:description" content="Краткое описание (2–4 предложения, ~200 символов)" />
<meta property="og:site_name" content="Название вашего сайта" />
<meta property="og:locale" content="ru_RU" />
<!-- ===== /OPEN GRAPH ===== -->
<!-- Twitter/X Cards (Twitter использует OG как fallback при отсутствии) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Заголовок для Twitter/X" />
<meta name="twitter:image" content="https://yourdomain.ru/img/twitter-1200x675.jpg" />
</head>
Как проверить OG и сбросить кэш в ВКонтакте, Telegram и LinkedIn
После внедрения OG-тегов соцсети кэшируют данные о ссылке — и даже правильно исправленная разметка не обновит превью автоматически: нужен ручной сброс кэша для каждой платформы.
Это самая частая причина обращений вида «я всё исправил, а ВКонтакте всё равно показывает старую картинку». Проблема в кэше.
Инструменты проверки OG — таблица
Для проверки и отладки OG существует несколько инструментов под разные платформы — они не только показывают превью, но и выводят все найденные ошибки в разметке.
| Инструмент | Платформа | Что делает | Ссылка | Примечание |
|---|---|---|---|---|
| Facebook Sharing Debugger* | Meta / Facebook* | Превью + ошибки + сброс кэша | developers.facebook.com/tools/debug/ | ⚠️ Требует VPN в РФ |
| Facebook Batch Invalidator* | Meta / Facebook* | Массовый сброс кэша (до 50 URL за раз) | developers.facebook.com/tools/debug/sharing/batch/ | ⚠️ Требует VPN в РФ |
| VK pages.clearCache | ВКонтакте | Сброс кэша по API | dev.vk.com/method/pages.clearCache | Нужен access_token |
| LinkedIn Post Inspector | Превью + ошибки + кнопка Re-scrape | linkedin.com/post-inspector/ | Бесплатно | |
| Telegram @WebpageBot | Telegram | Сброс кэша превью | @WebpageBot | Бесплатно, 30 секунд |
| opengraphcheck.com | Все платформы | Проверка без авторизации | opengraphcheck.com | Нейтральный, удобен |
| pr-cy.ru OG Parser | Все платформы | Парсинг тегов | pr-cy.ru/tools/open-graph-parser/ | Русскоязычный |
Как сбросить кэш в ВКонтакте — пошаговая инструкция
ВКонтакте кэширует OG-данные и не обновляет превью при редактировании тегов — для сброса нужен API-метод pages.clearCache с access_token приложения.
- Перейти на id.vk.com/about/business/go → создать приложение (тип: «Сайт»)
- В настройках приложения скопировать сервисный ключ доступа (access_token)
- Перейти на dev.vk.com/method/pages.clearCache
- В поле
access_tokenвставить ключ, в полеurl— ссылку с обновлёнными тегами - Нажать «Выполнить» — успешный ответ:
"response": 1
Или напрямую через GET-запрос:
GET https://api.vk.com/method/pages.clearCache
?url=https://yourdomain.ru/blog/your-article/
&access_token=YOUR_SERVICE_TOKEN
&v=5.131
// Ответ при успехе:
// {"response": 1}
Для Telegram ещё проще:
- Открыть Telegram → найти бота @WebpageBot
- Отправить ссылку боту
- Бот возвращает обновлённые данные превью — кэш сброшен
Типичные ошибки при настройке OG — и как исправить
Большинство проблем с отображением превью — это не баг платформы: это семь повторяющихся ошибок в разметке, каждую из которых можно исправить за 10 минут.
За три года аудитов я видел вариации этих ошибок на сотнях сайтов. Структура одна и та же.
og:imageслишком маленький (меньше 600×315 px) — платформа показывает миниатюру вместо крупного превью. Иногда изображение есть, но пользователь видит серый квадрат слева от текста вместо широкого баннера сверху. Решение: подготовить изображение 1200×630 px, прописатьog:image:widthиog:image:height.og:urlне совпадает с каноническим URL — лайки и репосты распределяются между вариантами страницы: с/и без, сwwwи без, с UTM-метками и без. Счётчик показывает 3+3+2+1 вместо 9. Решение:og:url= значение из<link rel="canonical">. Один адрес, никаких параметров.- Кэш не сброшен после правки тегов — исправленная разметка не отображается, платформа показывает старые данные. Это не значит, что теги неправильные. Решение: использовать инструменты из таблицы выше — VK
pages.clearCache, LinkedIn Post Inspector «Re-scrape»,@WebpageBotв Telegram. og:imageблокируется в robots.txt — бот соцсети не может скачать изображение, превью пустое. Facebook Debugger в этом случае выводит предупреждение«Cannot retrieve image». Решение: убедиться, что директория с OG-изображениями не закрыта директивойDisallowв robots.txt. Яндекс-бот и боты ВКонтакте, кстати, обычно всё равно скрейпят закрытые страницы — но для изображений это не всегда срабатывает.og:image:width/og:image:heightне прописаны — платформа скачивает изображение для определения размеров при каждом шеринге. Это замедляет рендеринг превью при первом показе, особенно на медленных соединениях. Решение: всегда указывать оба структурированных свойства. Две строки кода, нулевые усилия.og:titleпобуквенно дублирует<title>— не ошибка в строгом смысле, но упущенная возможность.<title>оптимизирован под поисковый запрос.og:title— под «зацепить в ленте». Это разные задачи, разные длины, разная тональность. Решение: сделатьog:titleговорящим для ленты,<title>— для поисковика. Например,<title>= «Метатег robots: настройка для Google и Яндекс»,og:title= «Как метатег robots управляет индексацией — и где чаще всего ломается».- OG-теги отсутствуют на страницах, которые шерят пользователи — карточки товаров, страницы акций, страницы услуг. Блог настроили, а коммерческие разделы забыли. Именно там конверсия выше и репосты ценнее. Решение: аудит (см. следующий раздел) + приоритизация по органическому трафику.
Аудит OG на существующем сайте
Если сайт существует больше года, проверять OG вручную бессмысленно — нужен краулер, который за один прогон покажет все страницы без тегов, с битыми изображениями и дублирующимися заголовками.
- Запустить краулер — Ahrefs Site Audit или Screaming Frog (бесплатно до 500 URL)
- В Ahrefs перейти в отчёт Social Tags — он показывает страницы с отсутствующими, дублирующимися или слишком длинными OG-тегами
- Приоритизировать по органическому трафику: страницы с высоким трафиком шерят чаще → исправлять в первую очередь. Выгрузить данные из Google Search Console или Яндекс.Вебмастер, соединить с результатами аудита
- Для Screaming Frog: фильтр Meta → og:title / og:image → экспорт в CSV → сортировка по пустым значениям — сразу видно, где дыры
- Проверить битые
og:image— если изображение возвращает 404, превью не отобразится. Список проблемных URL Screaming Frog выдаёт в отчёте по изображениям - После исправлений — сбросить кэш по платформам по инструкции выше
Аудит OG — не разовая задача. После каждого редизайна или обновления CMS стоит прогнать краулер снова. Обновления движка и переезды сайтов регулярно «сбрасывают» OG-настройки — особенно на Bitrix при смене шаблонов.
Итоги
- og:image — наиболее критичный тег: именно изображение занимает большую часть площади карточки в ленте и определяет первое решение о клике. Правильный размер (1200×630 px), правильный вес (<5 MB), прописанные
og:image:widthиog:image:height— это минимум, который должен быть на каждой странице, которую шерят.
- Кэш соцсетей — главная причина «OG не работает после правки»: три минуты на
dev.vk.com/method/pages.clearCacheили@WebpageBotв Telegram решают 80% таких обращений. Проверять и исправлять теги, не сбросив кэш — всё равно что красить стену и не убирать старые обои.
- Аудит OG — не разовая задача: после редизайна, переезда на новый движок или обновления CMS шаблоны часто теряют OG-разметку. Прогон Screaming Frog или Ahrefs Site Audit по отчёту Social Tags раз в квартал закроет этот класс проблем до того, как он начнёт стоить трафика.
Запустите Site Audit на Ahrefs или Screaming Frog и проверьте страницы с наибольшим органическим трафиком на наличие og:image и og:title первыми — именно они шерятся чаще всего и именно там разрыв между «есть разметка» и «нет разметки» ощутимее всего.