Микроразметка Open Graph: как контролировать отображение контента в соцсетях
Опубликовано вПоисковое продвижение (SEO)

Микроразметка Open Graph: как контролировать отображение контента в соцсетях

Что такое Open Graph и зачем он нужен

Open Graph (OG) — это стандарт микроразметки, разработанный Facebook для контроля отображения веб‑страниц при публикации в социальных сетях.

Основная задача: задать, как именно ваш контент будет выглядеть в постах, репостах и превью в соцсетях (Facebook, ВКонтакте, LinkedIn, Pinterest и др.).

Без OG‑разметки соцсети автоматически вытягивают:

  • случайное изображение с страницы;
  • обрезанный фрагмент текста;
  • не всегда корректный заголовок.

С OG вы полностью контролируете:

  • заголовок поста;
  • описание;
  • изображение превью;
  • тип контента (статья, видео, продукт);
  • ссылку для перехода.

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

Основные мета‑теги размещаются в <head> HTML‑страницы. Каждый начинается с префикса property=»og::

  1. og:title — заголовок поста.
    Максимум 60–90 символов (зависит от соцсети).
    Пример:
<meta property="og:title" content="Как выбрать ноутбук в 2026 году">
  • og:description — описание/аннотация.
    • 150–300 символов.
    • Должно дополнять заголовок, а не дублировать его.
    • Пример:
<meta property="og:description" content="Руководство по выбору ноутбука: критерии, ТОП‑5 моделей, ошибки покупателей">
  • og:image — изображение для превью.
    • Укажите полный URL (с https://).
    • Оптимальный размер: 1200×630 px (для Facebook), 1080×1080 px (для ВК).
    • Формат: JPG, PNG.
    • Пример:
<meta property="og:image" content="https://example.com/images/laptop-guide.jpg">
  • og:url — каноническая ссылка на страницу.
    • Должна совпадать с текущей URL (без редиректов).
    • Пример:
<meta property="og:url" content="https://example.com/guide/laptop-2026">
  • og:type — тип контента.
    • Основные значения:
      • article — статья;
      • website — обычная страница;
      • video — видео;
      • product — товар.
    • Пример:
<meta property="og:type" content="article">
  • og:site_name — название сайта/бренда.
    • Отображается под заголовком в некоторых соцсетях.
    • Пример:
<meta property="og:site_name" content="TechGuide 2026">
  • og:video — ссылка на видео (если контент — видео).
    • Пример:
<meta property="og:video" content="https://example.com/video/tutorial.mp4">

Дополнительные полезные теги

  • og:image:width и og:image:height — размеры изображения.
    • Помогают соцсетям корректно отобразить превью.
    • Пример:
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
  • og:locale — язык контента.
    • Формат: ru_RU, en_US.
    • Пример:
<meta property="og:locale" content="ru_RU">
  • og:updated_time — дата последнего обновления.
    • Формат ISO 8601: YYYY‑MM‑DDTHH:MM:SSZ.
    • Пример:
<meta property="og:updated_time" content="2026-01-15T10:00:00Z">

Как добавить Open Graph на сайт

Шаг 1. Определите, какие страницы требуют разметки (обычно:

  • статьи;
  • товарные карточки;
  • посадочные страницы;
  • видеоматериалы.

Шаг 2. Сформируйте теги для каждой страницы. Используйте динамическую генерацию, если контент меняется (CMS, шаблоны).

Шаг 3. Вставьте теги в <head> HTML:

<head>
<meta property="og:title" content="Ваш заголовок">
  <meta property="og:description" content="Ваше описание">
  <meta property="og:image" content="https://example.com/image.jpg">
  <meta property="og:url" content="https://example.com/page">
  <meta property="og:type" content="article">
  <!-- Другие теги -->
</head>

 

Шаг 4. Проверьте корректность разметки.

Проверка Open Graph

  1. Facebook Sharing Debugger ()
    Вставьте URL — получите отчёт о тегах и превью поста.
    Исправьте ошибки (например, битые изображения).
  2. VK Debugger ()
    Проверка для ВКонтакте.
  3. LinkedIn Post Inspector ()
    Анализирует отображение в LinkedIn.
  4. Ручной тест:
    Скопируйте URL страницы.
    Вставьте в поле поста в соцсети — проверьте превью.

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

  1. Неуказанный og:image → соцсеть берёт случайное изображение или не показывает превью.
  2. Обрезанный og:description → слишком длинный текст.
  3. Некорректный og:url → редирект или ошибка 404.
  4. Дублирование тегов → конфликт данных.
  5. Отсутствие og:type → соцсеть не понимает тип контента.
  6. Битые ссылки на изображения → превью не загружается.
  7. Неверный og:locale → контент может не показываться в нужной языковой версии.

Примеры корректной разметки

Для статьи:

<meta property="og:title" content="5 ошибок при выборе ноутбука">
<meta property="og:description" content="Разбираем частые ошибки покупателей и как их избежать">
<meta property="og:image" content="https://example.com/images/mistakes.jpg">
<meta property="og:url" content="https://example.com/articles/laptop-mistakes">
<meta property="og:type" content="article">
<meta property="og:site_name" content="TechReview">

Для товара:

<meta property="og:title" content="Ноутбук XYZ Pro">
<meta property="og:description" content="Мощный ноутбук с RTX 4060, 16 ГБ ОЗУ, цена — 79 990 руб.">
<meta property="og:image" content="https://example.com/products/xyz-pro.jpg">
<meta property="og:url" content="https://example.com/products/xyz-pro">
<meta property="og:type" content="product">
<meta property="og:price:amount" content="79990">
<meta property="og:price:currency" content="RUB">

Польза для маркетинга и SEO

  1. Контроль визуального восприятия — ваш контент выглядит профессионально в соцсетях.
  2. Повышение CTR постов — привлекательное превью увеличивает клики.
  3. Снижение отказов — пользователь видит, что его ждёт на странице.
  4. Улучшение виральности — красивые посты чаще репостят.
  5. Поддержка бренд‑идентичности — единый стиль заголовков и изображений.
  6. Оптимизация для голосовых помощников — структурированные данные помогают ИИ понимать контент.