Open Graph: что это такое и как с ним работать в 2026 году

Q: Можно ли использовать разные изображения для Facebook и Twitter?

Да. Для Twitter/X используйте отдельный тег twitter:image, который имеет приоритет над og:image. Это позволяет оптимизировать изображение под разные соотношения сторон: 1200×630 для Facebook (1.91:1) и 1200×600 для Twitter (2:1). Yoast SEO и RankMath поддерживают раздельные изображения для разных платформ.

Автор Валерій | 08 Июн 2026 | 7 мин чтения 0 просмотров

Open Graph — протокол от Meta, который определяет, как ваши ссылки выглядят при публикации в Facebook, LinkedIn, Telegram и других платформах. Правильно настроенные OG теги увеличивают CTR ссылок на 20–40%, превращая обычный URL в визуально привлекательную карточку с заголовком, описанием и изображением.

Что такое Open Graph

Open Graph — это протокол разметки веб-страниц, разработанный Facebook (сейчас Meta) в 2010 году. Он позволяет веб-сайтам управлять тем, как их страницы отображаются при расшаривании в социальных сетях и мессенджерах. По сути, open graph теги — это специальные HTML-метатеги в секции <head>, которые говорят платформам: «покажи пользователям вот это название, вот это изображение и вот это описание».

До появления Open Graph каждая платформа по-своему «угадывала» контент страницы: брала первое изображение, первый абзац текста или вообще показывала пустую карточку. Протокол Open Graph стандартизировал этот процесс и сегодня поддерживается всеми крупными платформами — Facebook, LinkedIn, Telegram, Viber, Twitter/X, WhatsApp, Slack.

Для бизнеса это критически важно: каждый раз, когда клиент или партнёр делится ссылкой на ваш сайт, именно og теги определяют первое впечатление о странице. Красивая карточка с чётким заголовком и качественным изображением — это доверие, узнаваемость бренда и выше кликабельность.

Как работает предпросмотр ссылок

Когда пользователь вставляет URL в публикацию или сообщение, платформа запускает своего скрапера (бота), который посещает страницу, читает её HTML и находит OG-метатеги. Этот процесс называется «парсинг метаданных». Данные сохраняются в кеше платформы и используются для формирования карточки предпросмотра.

Важный нюанс: данные кешируются. Это значит, что после изменения OG-тегов на сайте карточка в социальных сетях не обновится мгновенно. Facebook хранит кеш от нескольких часов до нескольких суток. Для принудительного обновления нужно использовать специальные инструменты отладки (об этом ниже).

Последовательность работы скрапера:

Пользователь вставляет URL в пост или сообщение.
Платформа отправляет запрос к URL через своего бота (Facebook: facebookexternalhit, LinkedIn: LinkedInBot).
Бот читает HTML секции <head> и извлекает OG-теги.
Платформа формирует карточку предпросмотра на основе найденных данных.
Данные сохраняются в кеше и переиспользуются при повторном шаринге.

Если OG-теги не заданы, платформа пытается самостоятельно определить заголовок (из <title>), описание (из <meta name="description">) и изображение (первая картинка на странице). Результат часто непредсказуемый и некрасивый.

7 основных OG-тегов: полный справочник

Протокол Open Graph включает десятки тегов, но для большинства сайтов достаточно семи ключевых. Все OG-теги размещаются в секции <head> HTML-документа и начинаются с префикса og:.

1. og:title — заголовок страницы

Главный заголовок, который отображается в карточке. Должен быть чётким, конкретным, до 60–70 символов. Может отличаться от <title> страницы — например, быть более «социальным» и эмоциональным.

<meta property="og:title" content="Open Graph: что это такое и как настроить в 2026" />

2. og:description — описание страницы

Краткое описание контента, отображается под заголовком в карточке. Оптимальная длина — 100–150 символов. Важно: не все платформы показывают описание (Twitter/X иногда скрывает его).

<meta property="og:description" content="Разбираем протокол Open Graph: как настроить og:image, og:title, og:description и увеличить CTR ссылок." />

3. og:image — изображение карточки

Самый важный тег — именно изображение привлекает внимание в ленте. Должен содержать абсолютный URL к изображению (не относительный путь). Рекомендованный размер: 1200×630 пикселей.

<meta property="og:image" content="https://spilnoagency.com.ua/wp-content/uploads/2026/06/open-graph-cover.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Open Graph — настройка OG-тегов для социальных сетей" />

4. og:url — канонический URL

Размеры OG-изображений для соцсетей 2026

Указывает каноническую ссылку на страницу. Помогает платформам правильно агрегировать статистику расшариваний (лайки, комментарии) независимо от варианта URL (с трейлинг-слешем, с UTM-метками и т.д.).

<meta property="og:url" content="https://spilnoagency.com.ua/ru/open-graph-chto-eto-takoe-i-kak-s-nim-rabotat-v-2026/" />

5. og:type — тип объекта

Определяет тип контента. Для большинства страниц используется website, для статей — article, для видео — video.movie. Тип article открывает доступ к дополнительным тегам: article:published_time, article:author, article:section.

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-06-08T10:00:00+03:00" />
<meta property="article:author" content="https://www.linkedin.com/in/anastasiya-zakharina-b41093389" />

6. og:locale — язык и регион

Указывает язык контента в формате язык_РЕГИОН. Для русскоязычной аудитории: ru_RU. Если сайт мультиязычный — используется og:locale:alternate для указания доступных версий.

<meta property="og:locale" content="ru_RU" />
<meta property="og:locale:alternate" content="uk_UA" />
<meta property="og:locale:alternate" content="pl_PL" />

7. og:site_name — название сайта

Название вашего сайта или бренда. Отображается в карточке под заголовком и помогает пользователям идентифицировать источник контента.

<meta property="og:site_name" content="Spilno Agency" />

Требования к og:image: размеры, форматы, безопасные зоны

Изображение — ключевой элемент карточки. Некачественный или неправильно обрезанный OG-образ сводит к нулю все усилия по настройке протокола. Вот актуальные требования на 2026 год по платформам.

Универсальные требования к og:image

Рекомендуемый размер: 1200×630 пикселей (соотношение сторон 1.91:1)
Минимальный размер: 600×315 пикселей (меньше — карточка может не отображаться)
Максимальный вес файла: 8 МБ (рекомендуется до 1 МБ для быстрой загрузки)
Форматы: JPG, PNG, GIF, WebP (JPG предпочтителен для фото, PNG — для графики с текстом)
URL: только абсолютный (начинается с https://)
Кеш-бастинг: при обновлении изображения меняйте URL или добавляйте параметр версии

Безопасные зоны по платформам

Разные платформы по-разному обрезают изображение. Чтобы текст и логотип на OG-образе не попали под обрезку, соблюдайте безопасные зоны:

Facebook / Meta: показывает 1200×630 без обрезки в десктопе; на мобильных может обрезать до квадрата (600×600) — держите ключевые элементы в центре
LinkedIn: отображает 1200×627 в десктопе; безопасная зона — центральные 80% изображения
Twitter/X: при summary_large_image показывает 2:1 (обрезает по высоте); безопасная зона — центральные 300×157 px при 600×314 px
Telegram: показывает изображение в соотношении 1.91:1, иногда обрезает до квадрата в предпросмотре чата
WhatsApp: обрезает до квадрата, центрируя изображение

Практический совет: размещайте логотип, заголовок и ключевые визуальные элементы в центральных 70% изображения (отступ 15% с каждой стороны). Это гарантирует корректное отображение на всех платформах без исключения.

Поведение Open Graph на разных платформах

Facebook / Meta

Facebook — создатель протокола, поэтому поддерживает все OG-теги в полном объёме. Платформа показывает карточку с изображением, заголовком, описанием и именем сайта. Facebook кеширует данные агрессивно: после изменения OG-тегов обновление может занять до 24 часов без использования Facebook Sharing Debugger. Важно: для корректной работы аналитики привяжите сайт к Facebook App ID через тег fb:app_id.

LinkedIn читает OG-теги и дополнительно проверяет структурированные данные Schema.org. Платформа особенно требовательна к качеству изображения: слишком маленькое или некорректное изображение приведёт к отображению карточки без визуала. LinkedIn кешировует данные на 7 дней — для обновления используйте LinkedIn Post Inspector. Особенность: LinkedIn хорошо отображает теги article:author, показывая автора публикации.

Twitter/X

Twitter/X имеет собственную систему — Twitter Cards, которая частично дублирует Open Graph. Платформа читает как Twitter Card теги (приоритет), так и OG-теги (запасной вариант). Поддерживает два основных типа карточек: summary (маленькое квадратное изображение) и summary_large_image (большой горизонтальный баннер). Без специфических Twitter Card тегов платформа использует OG-данные.

Telegram читает OG-теги для формирования предпросмотра ссылок в сообщениях и каналах. Бот Telegram (TelegramBot) посещает страницу при каждой отправке ссылки без агрессивного кеширования. Telegram хорошо поддерживает og:image, og:title и og:description. Особенность: Telegram показывает предпросмотр даже в личных сообщениях, что делает OG-теги важными для любого вирусного распространения контента.

Twitter Cards и Open Graph: как они работают вместе

Twitter Cards — это собственный формат метатегов Twitter/X, аналогичный Open Graph, но с расширенными возможностями для самой платформы. Главное отличие: Twitter Cards используют атрибут name, а не property.

Минимальный набор Twitter Card тегов для статей:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@spilnoagency" />
<meta name="twitter:title" content="Open Graph: что это такое и как с ним работать в 2026" />
<meta name="twitter:description" content="Разбираем протокол Open Graph: как настроить og:image, og:title, og:description." />
<meta name="twitter:image" content="https://spilnoagency.com.ua/wp-content/uploads/2026/06/open-graph-cover.jpg" />
<meta name="twitter:image:alt" content="Open Graph — настройка OG-тегов" />

Стратегия «двойного покрытия»: прописывайте оба набора тегов. Twitter/X будет использовать Twitter Card теги (если они есть), все остальные платформы — OG-теги. Yoast SEO и RankMath делают это автоматически. Если вы настраиваете теги вручную — добавьте оба набора.

Типы Twitter Cards:

summary — маленькая карточка с квадратным изображением (подходит для главной страницы, профилей)
summary_large_image — большая карточка с горизонтальным баннером (идеально для статей и лендингов)
app — карточка для мобильных приложений
player — карточка для видео и аудио контента

Как настроить Open Graph в WordPress

WordPress сам по себе не генерирует OG-теги. Для их настройки используются SEO-плагины. Два самых популярных — Yoast SEO и RankMath.

Yoast SEO: настройка Open Graph

Включите Open Graph: Yoast SEO → Social → Facebook → поставьте галочку «Add Open Graph meta data».
Настройте общие данные сайта: на той же вкладке укажите URL страницы Facebook и Twitter/X вашей компании.
Настройте изображение по умолчанию: добавьте OG-изображение для страниц, у которых нет featured image — это запасной вариант для всего сайта.
Для каждого поста/страницы: в редакторе WordPress откройте Yoast SEO → Social → Facebook. Там можно задать отдельный заголовок, описание и изображение именно для социальных сетей (отличный от SEO-заголовка).
Twitter Cards: вкладка Social → Twitter. Выберите тип карточки (summary_large_image для статей) и при необходимости задайте отдельное изображение для Twitter.

Yoast автоматически генерирует OG-теги на основе ваших настроек SEO-заголовка и метаописания, если вы не задали отдельные значения в Social-вкладке. Featured image поста используется как og:image по умолчанию.

RankMath: настройка Open Graph

Активируйте модуль: RankMath → Dashboard → активируйте модуль «Social Meta».
Глобальные настройки: RankMath → General Settings → Social Networks — добавьте URL всех социальных профилей компании.
Настройки по типу контента: RankMath → Titles & Meta → выберите тип записи (Posts, Pages и т.д.) — вкладка «Social» позволяет задать шаблоны OG-тегов.
Для конкретного поста: в редакторе блоков найдите панель RankMath → вкладка «Social» → задайте Facebook и Twitter изображения, заголовки и описания.

Ручная реализация OG-тегов в HTML

Если вы работаете не на WordPress или хотите полный контроль над разметкой, OG-теги добавляются напрямую в секцию <head> HTML-страницы. Вот полный пример корректной разметки для статьи:

<!-- Основные Open Graph теги -->
<meta property="og:type" content="article" />
<meta property="og:url" content="https://spilnoagency.com.ua/ru/open-graph-chto-eto-takoe-i-kak-s-nim-rabotat-v-2026/" />
<meta property="og:title" content="Open Graph: что это такое и как с ним работать в 2026" />
<meta property="og:description" content="Разбираем протокол Open Graph: как настроить og:image, og:title, og:description и увеличить CTR ссылок." />
<meta property="og:site_name" content="Spilno Agency" />
<meta property="og:locale" content="ru_RU" />

<!-- OG Image -->
<meta property="og:image" content="https://spilnoagency.com.ua/wp-content/uploads/2026/06/open-graph-cover.jpg" />
<meta property="og:image:secure_url" content="https://spilnoagency.com.ua/wp-content/uploads/2026/06/open-graph-cover.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Open Graph — настройка OG-тегов для социальных сетей" />

<!-- Article-специфичные теги -->
<meta property="article:published_time" content="2026-06-08T10:00:00+03:00" />
<meta property="article:modified_time" content="2026-06-08T10:00:00+03:00" />
<meta property="article:author" content="https://www.linkedin.com/in/anastasiya-zakharina-b41093389" />
<meta property="article:section" content="Маркетинг" />

<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@spilnoagency" />
<meta name="twitter:title" content="Open Graph: что это такое и как с ним работать в 2026" />
<meta name="twitter:description" content="Разбираем протокол Open Graph: как настроить og:image, og:title, og:description." />
<meta name="twitter:image" content="https://spilnoagency.com.ua/wp-content/uploads/2026/06/open-graph-cover.jpg" />
<meta name="twitter:image:alt" content="Open Graph — настройка OG-тегов" />

Инструменты для проверки OG-тегов

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

1. Facebook Sharing Debugger

Официальный инструмент Meta: developers.facebook.com/tools/debug. Показывает, как Facebook видит вашу страницу, какие OG-теги он считывает, и предупреждает об ошибках. Кнопка «Scrape Again» принудительно обновляет кеш Facebook. Незаменим при изменении OG-образа или заголовка страницы.

2. LinkedIn Post Inspector

Инструмент LinkedIn: linkedin.com/post-inspector. Показывает предпросмотр карточки в LinkedIn и позволяет принудительно обновить кеш (важно, так как LinkedIn кешировует данные на 7 дней). Доступен только для авторизованных пользователей.

3. OpenGraph.xyz

Универсальный бесплатный инструмент: opengraph.xyz. Показывает предпросмотр карточки сразу для нескольких платформ (Facebook, Twitter, LinkedIn, Slack), отображает все считанные OG-теги и ошибки. Подходит для быстрой проверки без авторизации.

4. Twitter Card Validator

Официальный инструмент Twitter: cards-dev.twitter.com/validator. Показывает, как Twitter/X отображает карточку вашей страницы. Проверяет как Twitter Card теги, так и OG-теги (как запасной вариант).

5. Metatags.io

Инструмент для генерации и предпросмотра мета-тегов: metatags.io. Позволяет генерировать OG-теги в интерактивном режиме и сразу видеть результат для разных платформ. Удобен для прототипирования перед внедрением.

Распространённые ошибки с Open Graph и как их избежать

Относительный URL в og:image. Платформы не умеют обрабатывать относительные пути. Всегда используйте полный абсолютный URL, начинающийся с https://.
Изображение меньше 600×315 px. Facebook и другие платформы могут не отображать карточку с изображением, если оно слишком маленькое. Используйте минимум 1200×630 px.
Дублирование заголовков. og:title не должен быть идентичен <title> — для социальных сетей лучше использовать более «человеческий» и привлекательный заголовок.
Отсутствие og:image:alt. Атрибут alt важен для доступности и иногда отображается вместо изображения при ошибке загрузки.
Кеш не очищен после обновления. После изменения OG-тегов обязательно используйте Facebook Sharing Debugger (кнопка «Scrape Again») и LinkedIn Post Inspector для принудительного обновления.
Одинаковые OG-теги для всего сайта. Каждая важная страница должна иметь уникальные og:title, og:description и og:image. Глобальное изображение по умолчанию — только для страниц без индивидуальных настроек.
Текст на OG-образе слишком мелкий или близко к краям. Учитывайте, что платформы обрезают изображения по-разному. Держите текст и логотип в безопасной центральной зоне.
Отсутствие og:url. Без этого тега платформы используют текущий URL, который может содержать UTM-метки или другие параметры, что искажает статистику расшариваний.

Open Graph в 2026 году: тренды и будущее

Протокол Open Graph существует с 2010 года и не планирует уходить. Но в 2026 году его роль расширяется за счёт новых точек соприкосновения с контентом.

AI-предпросмотры и GEO

Искусственный интеллект всё активнее использует структурированные метаданные страниц. ChatGPT при поиске в интернете, Perplexity AI, Microsoft Copilot и Google AI Overview считывают OG-теги как сигналы качества и релевантности контента. Правильно заполненные og:title и og:description помогают AI-системам корректно цитировать и представлять ваш контент пользователям — это ключевой аспект GEO (Generative Engine Optimization).

Социальные сигналы и SEO

Хотя Google официально не использует лайки и репосты как прямой SEO-фактор, качественный OG-образ и заголовок увеличивают CTR при расшаривании, что приводит к большему количеству переходов на сайт и, соответственно, к росту поведенческих сигналов. Это косвенно влияет на ранжирование.

Структурированные данные + Open Graph

В 2026 году лучшая практика — использовать OG-теги и Schema.org разметку совместно. OG-теги работают на социальных платформах, Schema.org — в поисковых системах и AI-агентах. Данные должны быть консистентными: если в Schema.org прописан один заголовок статьи, а в og:title другой — это сигнал несогласованности.

Мессенджер-маркетинг и OG

Telegram-каналы, Viber-рассылки и WhatsApp Business стали значимыми каналами дистрибуции контента. Все они читают OG-теги для формирования предпросмотра. Инвестиции в качественный OG-образ окупаются в каждом из этих каналов одновременно.

Часто задаваемые вопросы об Open Graph

Влияют ли OG-теги на SEO напрямую?

Нет, Google не использует OG-теги как прямой ранжировочный сигнал. Однако косвенное влияние есть: хорошо настроенные OG-теги увеличивают кликабельность ссылок при расшаривании, что приводит к большему трафику и лучшим поведенческим метрикам. Также AI-системы (ChatGPT с поиском, Perplexity) используют метаданные страниц для GEO-цитирования.

Что делать, если после изменения OG-тегов карточка не обновилась?

Используйте инструменты принудительного обновления кеша. Для Facebook — Facebook Sharing Debugger (кнопка «Scrape Again»). Для LinkedIn — LinkedIn Post Inspector. Для Twitter/X — Twitter Card Validator. После использования этих инструментов подождите 1–2 часа — новые публикации будут показывать обновлённую карточку.

Нужно ли задавать OG-теги для каждой страницы сайта?

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

Можно ли использовать разные изображения для Facebook и Twitter?

Да. Для Twitter/X используйте отдельный тег twitter:image, который имеет приоритет над og:image. Это позволяет оптимизировать изображение под разные соотношения сторон: 1200×630 для Facebook (1.91:1) и 1200×600 для Twitter (2:1). Yoast SEO и RankMath поддерживают раздельные изображения для разных платформ.

Как работает Open Graph на мультиязычном сайте?

Для каждой языковой версии страницы OG-теги должны быть на соответствующем языке. Используйте og:locale с правильным языковым кодом (например, ru_RU, uk_UA, pl_PL) и og:locale:alternate для указания доступных версий. При использовании Polylang или WPML в сочетании с Yoast SEO это происходит автоматически.

Какой размер og:image считается оптимальным в 2026 году?

Стандартом остаётся 1200×630 пикселей (соотношение 1.91:1). Этот размер корректно отображается во всех крупных платформах без обрезки. Для максимальной качества на Retina-дисплеях можно использовать 2400×1260 px при сохранении пропорций. Минимальный допустимый размер — 600×315 px, но с таким размером карточка может выглядеть размыто на современных экранах.

Отображается ли Open Graph в мессенджерах — Viber, Telegram, WhatsApp?

Да, все три мессенджера читают OG-теги для формирования предпросмотра ссылок. Telegram и Viber поддерживают og:title, og:description и og:image практически полностью. WhatsApp обрезает изображение до квадрата, поэтому ключевые элементы OG-образа должны быть в центре. Это делает OG-теги обязательным элементом для бизнесов, активно использующих мессенджер-маркетинг.

Валерій Spilno Agency Все статьи автора →

← Вернуться к блогу