Создавайте и Проверяйте мета-теги Open Graph

✅ Тестер OpenGraph позволяет предварительно просматривать и создавать метатеги в одном месте одним кликом

Пример: https://opengraph.dev
Работает для Facebook, Whatsapp, Twitter, LinkedIn, Wordpress...
Hero Image

Оптимизируйте ваш сайт с помощью тегов Open Graph

Узнайте, как протокол Open Graph улучшает обмен в социальных сетях

Что такое Open Graph (OG)?

Протокол Open Graph, обычно называемый OGP, имеет решающее значение для определения того, как содержимое вашего сайта отображается в социальных сетях. Реализация тегов Open Graph гарантирует, что при онлайн-публикации вашего контента будут отображаться определенные изображения, заголовки и описания.

Оптимальный размер изображения Open Graph

Для максимизации воздействия на устройства с высоким разрешением используйте изображения Open Graph шириной не менее 1200 пикселей. Facebook, лидер в области социальных медиа, рекомендует использовать изображения с соотношением сторон 1.91:1 для отображения полного изображения в ленте без обрезки.

Легкая интеграция тегов Open Graph

Интегрируйте теги Open Graph без усилий, используя такие инструменты, как OpenGraph.dev. Генерируйте и вставляйте метатеги в раздел 'head' вашего сайта, чтобы повысить его видимость в социальных сетях.

Значение Open Graph в SEO

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

Что такое теги Open Graph?

Теги Open Graph — это HTML-элементы <meta>, размещённые внутри <head> веб-страницы, которые описывают, как страница должна отображаться, когда её URL публикуется в другом месте — в ленте Facebook, посте X, обновлении LinkedIn, чате WhatsApp, сервере Discord, переписке iMessage или канале Slack. Протокол Open Graph был впервые представлен Facebook в 2010 году и с тех пор стал фактическим стандартом превью ссылок практически на всех крупных платформах. Полный набор метатегов Open Graph даёт вам полный контроль над заголовком, описанием, изображением, типом и канонической URL, отображаемыми внутри расширенной карточки превью, превращая обычную гиперссылку в привлекательный фрагмент, который стабильно превосходит простую ссылку по показателю кликабельности.

Минимально жизнеспособный набор метатегов Open Graph 

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short, compelling summary of the page." />
<meta property="og:image" content="https://example.com/preview.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://example.com/article" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Example" />
<meta property="og:locale" content="en_US" />

Open Graph на разных социальных платформах

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

Facebook

Крупнейший потребитель данных Open Graph. Использует og:title, og:description и og:image. Рекомендуемое изображение — 1200×630 пикселей с соотношением сторон 1,91:1, чтобы оно отображалось в Ленте без обрезки. Кэш агрессивный — используйте Sharing Debugger для обновления после изменения.

X (Twitter)

Возвращается к тегам Open Graph при отсутствии метатегов Twitter Card, но для получения большой карточки превью также следует объявить twitter:card со значением summary_large_image и twitter:image. Изображение должно весить менее 5 МБ и быть не меньше 300×157 пикселей; 1200×630 — безопасное значение по умолчанию.

LinkedIn

Читает og:title, og:description, og:image и og:type. Изображение должно быть меньше 5 МБ и не меньше 1200×627 пикселей (соотношение 1,91:1). LinkedIn кэширует первый обход примерно на семь дней — используйте Post Inspector, чтобы принудительно повторить запрос после публикации изменений.

WhatsApp & iMessage

Оба мессенджера получают теги Open Graph по HTTPS и имеют жёсткое ограничение на размер изображения. WhatsApp обрезает всё, что больше ~300 КБ, поэтому оптимизируйте изображение и объявляйте og:image:width и og:image:height, чтобы ускорить отрисовку. iMessage предпочитает квадратное изображение 1:1, если оно доступно, поэтому рассмотрите возможность указать оба соотношения через несколько тегов og:image.

Discord, Slack & Telegram

Все три отображают превью из стандартного трио og:title, og:description и og:image. Discord дополнительно учитывает theme-color для акцента боковой панели. Telegram удаляет iframe и JS — убедитесь, что ваши теги присутствуют в исходном HTML, отрисованном на сервере, а не внедряются во время выполнения.

Pinterest & Reddit

Pinterest расширяет Open Graph тегами article:author и типами Rich Pin. Reddit при отправке ссылки забирает og:title и og:image и использует изображение в качестве миниатюры поста. Обе платформы поощряют портретные или квадратные изображения (от 2:3 до 1:1) больше, чем широкие баннеры 1,91:1.

Добавьте метатеги Open Graph в ваш фреймворк

Вставьте эти фрагменты в свой проект, чтобы подключить теги Open Graph в самых распространённых стэках. Каждый пример рендерит один и тот же минимально жизнеспособный набор на сервере, чтобы краулеры увидели его при первой отрисовке.

Next.js (App Router)

ts
// app/page.tsx
export const metadata = {
  title: 'Your Page Title',
  description: 'A short, compelling summary of the page.',
  openGraph: {
    title: 'Your Page Title',
    description: 'A short, compelling summary of the page.',
    url: 'https://example.com/article',
    siteName: 'Example',
    images: [{ url: 'https://example.com/preview.png', width: 1200, height: 630 }],
    locale: 'en_US',
    type: 'website'
  }
}

Nuxt 3

ts
<script setup lang="ts">
useSeoMeta({
  title: 'Your Page Title',
  description: 'A short, compelling summary of the page.',
  ogTitle: 'Your Page Title',
  ogDescription: 'A short, compelling summary of the page.',
  ogImage: 'https://example.com/preview.png',
  ogUrl: 'https://example.com/article',
  ogType: 'website',
  ogLocale: 'en_US'
})
</script>

Astro

astro
---
const { title, description, image, url } = Astro.props
---
<head>
  <title>{title}</title>
  <meta name="description" content={description} />
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={image} />
  <meta property="og:url" content={url} />
  <meta property="og:type" content="website" />
</head>

WordPress

php
// functions.php — works without an SEO plugin
add_action('wp_head', function () {
  if (!is_singular()) return;
  global $post;
  $img = get_the_post_thumbnail_url($post->ID, 'full') ?: '';
  printf('<meta property="og:title" content="%s" />', esc_attr(get_the_title($post)));
  printf('<meta property="og:description" content="%s" />', esc_attr(wp_trim_words($post->post_excerpt ?: $post->post_content, 30)));
  printf('<meta property="og:image" content="%s" />', esc_url($img));
  printf('<meta property="og:url" content="%s" />', esc_url(get_permalink($post)));
  echo '<meta property="og:type" content="article" />';
});

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

Быстрые ответы на вопросы, которые разработчики и контент-команды задают нам чаще всего при внедрении метатегов Open Graph.

Помогают ли теги Open Graph для SEO?
Теги Open Graph не являются прямым сигналом ранжирования в Google, но они существенно улучшают косвенные SEO-показатели. Более привлекательные превью повышают кликабельность, увеличивают количество репостов и обратных ссылок — всё это в итоге влияет на ранжирование. Они также уточняют для краулеров заголовок, изображение и язык страницы, снижая вероятность того, что Google выберет нерелевантную миниатюру или сгенерирует собственный сниппет.
В чём разница между Open Graph и Twitter Cards?
Open Graph — это межплатформенный стандарт. Twitter Cards — параллельный формат X со своим пространством имён twitter:*. X возвращается к Open Graph при отсутствии специфичных для Twitter тегов, поэтому для большинства сайтов достаточно опубликовать Open Graph плюс одно объявление twitter:card, чтобы включить превью с большим изображением.
Какой рекомендуемый размер изображения Open Graph?
1200×630 пикселей (соотношение 1,91:1) — безопасное значение по умолчанию: подходит для Facebook, LinkedIn, больших карточек X, Slack и Discord без обрезки. Размер файла должен быть менее 1 МБ, чтобы WhatsApp и iMessage его загрузили. Если ваша аудитория преимущественно из Pinterest, добавьте дополнительное портретное изображение 1000×1500.
Почему после смены изображения превью показывает старое?
Все крупные платформы кэшируют данные Open Graph. Facebook, LinkedIn и X обновляются по разному расписанию (от минут до недели). Используйте Sharing Debugger Facebook, Post Inspector LinkedIn и Card Validator X, чтобы принудительно перезапросить страницу, и добавляйте параметр для сброса кэша к og:image, когда заменяете изображение по тому же URL.
Нужен ли SPA-приложениям серверный рендеринг для Open Graph?
Да, почти для всех социальных платформ. WhatsApp, LinkedIn, Slack, Discord и Telegram не выполняют JavaScript при обходе URL, поэтому метатеги, отрисованные только на клиенте, для них невидимы. Используйте SSR (Next.js, Nuxt, Astro), статическую генерацию или специализированный сервис пре-рендеринга, чтобы теги присутствовали в исходном HTML-ответе.
Что произойдёт, если на странице вообще нет тегов Open Graph?
Платформа использует то, что сможет получить: <title>, meta description и первое крупное изображение в документе. Результат непредсказуем — часто это неправильное изображение, обрезанный заголовок или отсутствие превью. Даже три тега (og:title, og:description, og:image) устраняют эту неопределённость.
Чувствительны ли имена тегов Open Graph к регистру?
Да. Используйте строчные буквы точно так, как определено протоколом — og:title, а не OG:Title. Имена свойств в смешанном регистре большинство краулеров молча игнорирует — это одна из самых частых причин, по которой превью внезапно перестаёт работать после рефакторинга.
Какие инструменты можно использовать для отладки тегов Open Graph?
Помимо превью на OpenGraph.dev, у каждой платформы есть собственный валидатор: Facebook Sharing Debugger (developers.facebook.com/tools/debug), LinkedIn Post Inspector (linkedin.com/post-inspector), документация X Cards на developer.x.com, валидатор Rich Pins у Pinterest и @WebpageBot у Telegram для очистки кэша.