SiteTools
Ко всем статьям

Микроразметка Open Graph: полное руководство по тегам, проверке и настройке

Опубликовано: 06.03.2026 18:45

Что такое Open Graph, зачем нужны теги og, как проверить open graph онлайн, валидаторы, настройка для Битрикс, Telegram, примеры meta open graph, изображения и карточки ссылок.

Основы Open Graph: зачем это нужно

Когда пользователь делится ссылкой в Facebook, Telegram, ВКонтакте или LinkedIn, платформа формирует карточку страницы: заголовок, описание и изображение. За это отвечает микроразметка Open Graph. Без корректных OG-тегов соцсети часто подтягивают случайный текст и неподходящую картинку, что снижает CTR.

Open Graph — это стандарт мета-тегов, который помогает контролировать внешний вид ссылки в социальных сетях и мессенджерах. Для проектов, которые получают трафик из репостов, настройка OG обязательна.

Ключевые теги Open Graph

Базовые теги open graph размещаются в секции <head>. Минимальный набор:

Тег Назначение Пример
og:title Заголовок карточки <meta property="og:title" content="Заголовок" />
og:description Описание карточки <meta property="og:description" content="Описание" />
og:image Изображение превью <meta property="og:image" content="https://site.com/cover.jpg" />
og:url Канонический URL <meta property="og:url" content="https://site.com/page" />
og:type Тип контента <meta property="og:type" content="article" />

Open graph image — самый важный тег для визуала. Рекомендуемый размер: 1200x630 пикселей, формат JPG/PNG/WebP, доступный по абсолютному HTTPS URL.

Пример полного блока meta open graph

<meta property="og:title" content="Микроразметка Open Graph: полное руководство" />
<meta property="og:description" content="Как проверить open graph, настроить теги и исправить ошибки" />
<meta property="og:image" content="https://sitetools.online/images/og-cover.jpg" />
<meta property="og:url" content="https://sitetools.online/articles/open-graph" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="SiteTools" />
<meta property="og:locale" content="ru_RU" />

Open Graph проверка: как валидировать теги

После внедрения нужна open graph проверка. Если этого не сделать, можно не заметить, что бот соцсети не видит нужные поля.

  • Facebook Sharing Debugger — основной валидатор Open Graph.
  • OpenGraph.xyz — быстрый open graph checker для предпросмотра карточки.
  • Twitter Card Validator — проверка карточек для X/Twitter.
  • Инструменты VK — проверка отображения ссылки во ВКонтакте.

Если валидатор пишет «отсутствуют данные open graph», проверьте, что теги действительно находятся в <head>, не ломаются шаблоном и доступны до выполнения JS.

Open Graph для Telegram

Open graph telegram использует те же базовые поля: og:title, og:description, og:image. Telegram кэширует предпросмотр, поэтому после обновления картинки может показываться старый вариант.

  • Используйте абсолютные ссылки на изображение (https).
  • Минимальный размер изображения: от 300x200, оптимально 1200x630.
  • При необходимости сбрасывайте кэш карточки через боты/перепубликацию ссылки.

Настройка Open Graph в CMS

Open Graph в 1С-Битрикс

В Битрикс OG можно выводить через шаблоны компонентов или в header.php с динамической подстановкой заголовка, URL и изображения карточки.

<?php
$APPLICATION->AddHeadString('<meta property="og:title" content="'.$title.'" />');
$APPLICATION->AddHeadString('<meta property="og:image" content="'.$image.'" />');
?>

WordPress

В WordPress теги проще всего внедрять через плагины Yoast SEO, Rank Math или All in One SEO. Они автоматически формируют данные open graph на основе контента страницы.

OpenCart, Tilda, Joomla

Для этих CMS используют модули/расширения или ручной вывод OG-тегов в шаблоне. Ключевое требование — уникальные og:title и og:image для каждой страницы.

Типичные ошибки Open Graph

  • Неверный атрибут: нужно property="og:...", а не только name.
  • Закрытая картинка: файл запрещен robots.txt или требует авторизации.
  • Слишком маленькое изображение: соцсети игнорируют миниатюру.
  • Кэш платформы: изменения внесены, но не обновлен предпросмотр.
  • Одинаковые OG-теги на всех страницах: теряется релевантность карточек.

Open Graph schema и дополнительные поля

Open graph schema поддерживает дополнительные типы и свойства. Для ecommerce можно добавить цену и валюту:

<meta property="og:type" content="product" />
<meta property="product:price:amount" content="1990.00" />
<meta property="product:price:currency" content="RUB" />

Такая детализация улучшает карточки товаров при репостах и повышает конверсию социального трафика.

Итог

Микроразметка open graph — обязательная часть технической оптимизации для социальных сетей и мессенджеров. Правильные теги дают контролируемый вид карточки, увеличивают кликабельность и улучшают восприятие бренда.

После внедрения регулярно выполняйте проверку open graph онлайн и контролируйте, как отображается страница в Facebook, Telegram и других платформах.

Ключевые темы: микроразметка open graph, теги open graph, open graph image, open graph title, open graph description, open graph telegram, open graph validator, проверка микроразметки open graph.