Что это
Open Graph (OG) — протокол разметки страниц, разработанный Facebook в 2010 году и принятый как стандарт большинством социальных платформ и мессенджеров. Теги размещаются в секции <head> HTML-документа и сообщают ВКонтакте, Telegram, WhatsApp, Facebook, LinkedIn и другим платформам, как отображать превью ссылки: заголовок, описание, картинку, тип контента. Без этих тегов платформа самостоятельно «угадывает» данные, что почти всегда даёт некорректный результат.
---
Почему это важно для SEO
Прямой влияние на ранжирование в Яндексе и Google — минимальное. Но Open Graph критически влияет на косвенные факторы, которые поисковики учитывают: CTR из социального трафика, поведенческие сигналы, ссылочную массу.
Когда пост во ВКонтакте или Telegram-канале выходит с корректным превью (чёткая картинка 1200×630 px, понятный заголовок), кликабельность ссылки вырастает в 2–3 раза по сравнению с «голым» URL. Больше переходов — больше пользователей на сайте, ниже процент отказов, дольше сессии. Яндекс учитывает поведенческие факторы в ранжировании, а Google — в том числе через Core Web Vitals и вовлечённость аудитории.
Второй аспект: Яндекс.Нейро и Google AI Overviews при формировании ответов опираются на структурированные данные страницы. OG-теги — часть этой экосистемы. Страница с чистой OG-разметкой чаще попадает в сниппеты и карточки нейросетевых ответов, потому что поисковому роботу проще однозначно интерпретировать её содержание.
---
Как проверить вручную
- Исходный код страницы. Откройте любую страницу сайта, нажмите
Ctrl+U(илиCmd+Uна Mac). В коде найдите теги вида<meta property="og:...">. Минимальный набор —og:title,og:description,og:image,og:url,og:type.
- Open Graph отладчик Facebook (Sharing Debugger). Зайдите на developers.facebook.com/tools/debug, введите URL. Инструмент покажет, что именно прочитает платформа, предупреждения об ошибках и кэшированный вариант превью. Здесь же можно принудительно обновить кэш.
- Telegram и ВКонтакте — живая проверка. Вставьте ссылку в черновик поста или в личное сообщение себе. Если превью не появилось или показывает «мусор» — OG-теги отсутствуют или содержат ошибки.
- Screaming Frog SEO Spider. В меню выберите
Configuration → Spider → Extraction, добавьте кастомный XPath для//meta[@property='og:title']/@content. После сканирования получите полный список страниц с заполненными и пустыми OG-тегами по всему сайту.
- Яндекс.Вебмастер не отображает OG-теги напрямую, но в разделе «Структура сайта» можно найти страницы с аномальными метаданными — это косвенный сигнал.
---
Как исправить
Минимальный корректный набор OG-тегов в <head>:
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.ru/stranitsa/" />
<meta property="og:title" content="Заголовок страницы — до 60 символов" />
<meta property="og:description" content="Краткое описание для превью — 120–160 символов" />
<meta property="og:image" content="https://example.ru/images/og-cover.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:locale" content="ru_RU" />
<meta property="og:site_name" content="Название сайта" />WordPress. Установите плагин Yoast SEO или Rank Math. Оба автоматически генерируют OG-теги из заданных SEO-полей. В настройках плагина — раздел «Социальные сети», там загрузите дефолтную OG-картинку для страниц без уникального изображения.
Tilda. В настройках каждой страницы (SEO → Социальные сети) загрузите OG-изображение и заполните заголовок/описание. Tilda автоматически подставляет теги в <head>.
1C-Bitrix. В шаблоне страницы (header.php) добавьте PHP-код, который подтягивает данные из свойств инфоблока. Либо используйте готовый компонент bitrix:seo.meta с параметром SOCIAL_TAGS=Y.
Webflow. В настройках каждой страницы (Page Settings → SEO) есть отдельный блок Open Graph — заполняете заголовок, описание, загружаете картинку. Для CMS-коллекций настройте шаблон один раз через привязку к полям коллекции.
---
Типичные ошибки
- OG-изображение меньше 1200×630 px или в неправильном формате. Telegram и ВКонтакте показывают маленькую или обрезанную картинку. Используйте JPEG или PNG, размер файла — до 5 МБ.
- `og:title` дублирует `<title>` дословно. OG-заголовок — для социального контекста, он может быть более «продающим» и чуть длиннее. Это разные поля с разными задачами.
- Один OG-образ для всего сайта. Главная, блог, карточки товаров — везде одна картинка. Конверсия из социального трафика падает, потому что превью не связано с контентом страницы.
- Кэш старых данных. Изменили OG-теги, но Telegram и Facebook показывают старое превью. Используйте Facebook Sharing Debugger для сброса кэша; для Telegram отправьте ссылку через
@WebpageBot. - Отсутствие `og:url` с каноническим адресом. Если страница доступна по нескольким URL (с
wwwи без, с/и без), платформы могут создавать несколько разных карточек для одного материала, размывая социальный сигнал.
---
Влияние на разные типы сайтов
Для интернет-магазинов Open Graph критичен на карточках товаров: og:type должен быть product, дополнительно прописывают product:price:amount и product:price:currency. Когда покупатель делится ссылкой на товар в мессенджере, корректное превью с фото и ценой напрямую влияет на решение о покупке. Без настройки теряете часть «сарафанного» трафика.
Для контентных сайтов и блогов OG-теги — главный инструмент виральности. Статья с профессионально оформленным превью набирает в 2–4 раза больше репостов, чем та же статья с «угаданным» превью. Для SaaS и лендингов особенно важен og:description: у вас 160 символов, чтобы сформулировать УТП ещё до того, как пользователь перешёл на сайт.