Влияют ли теги Open Graph на SEO?

Не напрямую — поисковые системы, такие как Google, не используют метки OG для ранжирования. Однако они влияют на кликабельность в социальных платформах и мессенджерах, что может привести к трафику, который косвенно указывает на релевантность. Считайте их оптимизацией конверсии для обменных ссылок.

Сколько раз платформы перескребают метки Open Graph?

Варируется. Facebook кэширует данные до 30 дней. LinkedIn может кэшировать данные на неделю или больше. Slack перезагружает ссылку каждый раз, когда она добавляется в канал, поэтому обычно данные свежие. Всегда используйте инструмент отладки платформы для принудительного перезагрузки после обновления меток.

Могу ли я использовать другое изображение для Twitter, чем для других платформ?

Да. Укажите og:image для Facebook, LinkedIn, Discord и Slack. Затем укажите отдельное twitter:image для Twitter/X. Они могут указывать на разные файлы — это полезно, если вы хотите использовать квадратную обрезку для Twitter и широкий формат 1200×63 0 для всех остальных.

Что будет, если я совсем не добавлю тегов OG?

Платформа забирает вашу страницу и делает предположения. Она может извлечь заголовок страницы из тега <title>, взять первый абзац текста как описание и выбрать случайное изображение с страницы — часто логотип, рекламная единица или иконку. Результат обычно неверен и редко кликабелен.

Работают ли теги Open Graph в одностраничных приложениях (SPAs)?

Только если метки OG присутствуют в серверно-рендеренном HTML. Платформы не выполняют JavaScript при извлечении данных — они читают исходный HTML-ответ. Если ваша SPA отображает содержимое только на клиентской стороне, метки OG в этом содержимом не будут видны. Используйте серверную рендеринг (SSR) или статическую генерацию, чтобы гарантировать, что метки находятся в первоначальном HTML-файле.

Реклама мешает? Идти Без рекламы Сегодня 

Метки Open Graph — прекратите делать ссылки ужасными в Slack

Опубликовано 23 мая 2026 года

Метки Open Graph управляют изображением, заголовком и описанием, которые отображаются при делении ссылок в Slack, LinkedIn, Twitter и Discord. Изучите 6 основных меток, как правильно настроить размер og:image и как проверить, что ваши предварительные изображения действительно работают.

Метки Open Graph — прекратите выглядеть ужасно в Slack 1

Реклама · УДАЛИТЬ?

Вы вставляете URL в Slack. Вместо расширенного предварительного просмотра с крупным изображением, заголовком и двумя строками описания, вы получаете просто ссылку — или случайный абзац из середины страницы. Ваши коллеги всё равно кликают, но не знали, что им предстоит увидеть.

Метки Open Graph решают эту проблему. Они — это несколько строк в коде вашей страницы <meta> которые сообщают Slack, LinkedIn, Twitter, Discord и каждому другому платформе, что именно показывать при обмене ссылкой на вашу страницу. Если их не указывать, платформа делает предположения — плохо. <head> Что такое метки Open Graph?

Open Graph (OG) — это протокол, который Facebook внедрил в 2010 году, чтобы веб-страницы могли управлять тем, как они отображаются при делении на платформе. Идея была простой: добавить структурированные метаданные в HTML

и платформы смогут извлечь правильный заголовок, описание и изображение, вместо того чтобы делать предположения. <head> Это сработало настолько хорошо, что все основные платформы начали использовать его. Сегодня Slack, LinkedIn, Twitter/X, Discord, iMessage, WhatsApp и Telegram все читают метки OG при генерации предварительных просмотров ссылок. Facebook также использует их.

Шесть основных меток Open Graph

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

og:title

<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="One or two sentences that explain what this page is about." />
<meta property="og:image" content="https://yoursite.com/images/og-image.jpg" />
<meta property="og:url" content="https://yoursite.com/your-page/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Your Site Name" />

— Заголовок, который отображается в предварительном просмотре. Держите его под 70 символами. Не копируйте просто свой тег — заголовки OG могут быть более сильными, так как не обязаны включать название сайта. <title> og:description
— Двухстрочное описание под заголовком. Оптимальный диапазон — 150–200 символов. Сделайте его полезным, а не размытым. og:image
— Изображение, которое отображается в карточке предварительного просмотра. Эта метка делает или разрушает внешний вид вашей ссылки. Более подробно о размерах ниже. og:url
— Канонический URL для этой страницы. Всегда используйте полный URL включая . Это предотвращает дублирование предварительных просмотров, когда один и тот же контент ссылается с разных URL. https://og:type
— Используйте для большинства страниц. Используйте website для блогов, в сочетании с article og:site_name article:published_time и article:author.
— Название вашей бренда. Некоторые платформы отображают его отдельно от заголовка, поэтому держите его коротким. Метки Twitter/X Cards

Twitter имеет собственную систему, называемую Twitter Cards. Хорошее известно: если отсутствуют метки Twitter Cards, система автоматически использует метки OG. Недостаток: этот механизм не идеален, и Twitter не отображает большие карточки изображений, если вы не явно включите это.

Добавьте эти метки вместе с вашими метками OG:

Критическая метка —

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title Here" />
<meta name="twitter:description" content="One or two sentences about this page." />
<meta name="twitter:image" content="https://yoursite.com/images/og-image.jpg" />

. Установите её на twitter:cardи вы получите большую карточку. Установите на summary_large_image и вы получите маленькую миниатюру. Без этой метки Twitter по умолчанию использует summary и ваша тщательно продуманная метка OG исчезает. summary og:image — Метка, которая делает большую работу

Если есть одна метка, которую нужно правильно настроить, это

. Пустой предварительный просмотр может всё равно быть кликнут, но предварительный просмотр с размытым, растянутым или отсутствующим изображением не будет. og:imageРекомендуемые размеры

1200 × 630 пикселей

— универсальный стандарт, который работает на Facebook, LinkedIn, Twitter и Slack Минимальный размер: 600 × 315 пикселей
— если размер меньше, некоторые платформы полностью пропускают изображение Размер файла: менее 8 МБ
— Facebook и большинство платформ отклоняют файлы большего размера Формат: JPG или PNG
— JPG для фотографий, PNG для графики с текстом Держите ключевой контент вне краёв

Платформы обрезают изображения OG по-разному. Slack показывает широкую карточку, LinkedIn обрезает до квадрата в некоторых контекстах, а мобильные приложения делают своё. Держите ваш логотип, текст и фокусную точку в центре безопасной зоны — примерно в середине 80% изображения — чтобы избежать того, что важное исчезает.

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

Простые HTML-сайты

Вставьте метки внутрь

тега вашего HTML, до закрывающего <head> тега: </head> Если вы используете WordPress, вам не нужно вмешиваться в код. Плагины, такие как Yoast SEO, Rank Math или All in One SEO, автоматически обрабатывают метки OG. После установки найдите раздел «Социальные» в редакторе поста/страницы — вы можете задать кастомный заголовок, описание и изображение для каждого контента отдельно от SEO-заголовка и мета-описания.

<head>
  <!-- your existing tags -->
  <meta property="og:title" content="Page Title" />
  <meta property="og:description" content="Page description." />
  <meta property="og:image" content="https://yoursite.com/og.jpg" />
  <meta property="og:url" content="https://yoursite.com/page/" />
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="Site Name" />
  <meta name="twitter:card" content="summary_large_image" />
</head>

WordPress

Next.js и React-приложения

В Next.js App Router используйте встроенный

экспорт в вашем metadata Как проверить ваши метки Open Graph page.tsx:

export const metadata = {
  openGraph: {
    title: 'Page Title',
    description: 'Page description.',
    images: ['https://yoursite.com/og.jpg'],
    url: 'https://yoursite.com/page/',
    type: 'website',
    siteName: 'Site Name',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Page Title',
    description: 'Page description.',
    images: ['https://yoursite.com/og.jpg'],
  },
};

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

Редактор дележа Facebook

— показывает, что именно читает Facebook, и позволяет очистить кэш и перескачать Инспектор поста LinkedIn
— LinkedIn кэширует данные очень сильно, поэтому это единственный надёжный способ принудительно обновить данные Проверщик карточек Twitter
— предварительно показывает, как будет выглядеть карточка на Twitter/X — проверьте любую ссылку на метки OG напрямую из браузера без входа в платформу
Проверка Open Graph at IO Tools полезен для быстрых проверок — вставьте любую ссылку, и он получит все метки OG и Twitter Cards в одном просмотре, чтобы вы могли быстро обнаружить отсутствующие метки, не переходя между специализированными редакторами.

The Проверка Open Graph Если вам нужно сгенерировать чистые, правильно сформированные метки OG с нуля, то

выдаёт точный код, который вам нужен для любой страницы. Генератор мета-тегов HTML 5 распространённых ошибок с метками Open Graph

Использование относительного URL изображения

должен быть абсолютным URL ( — og:image ). Относительные пути, такие какhttps://yoursite.com/image.jpgне работают и изображение не загружается. /images/og.jpg Одно изображение для всего сайта
— Одно изображение-резерв работает для главной страницы, но блоги, страницы товаров и лендинг-страницы каждый deserve своё. Общее изображение для всего сайта уничтожает контекст, который делает предварительные просмотры кликабельными. Забыть о
— Без этого Twitter по умолчанию использует маленькую миниатюру, даже если у вас есть идеальное изображение 1200×630. Всегда добавляйте его явно. twitter:card Опубликовать изменения без обновления кэша
— Платформы активно кэшируют данные OG. После обновления меток используйте редактор платформы для принудительного пересканирования, или старый предварительный просмотр будет отображаться в течение дней. Написать описание og:description, которое читается как заголовок
— Используйте поле описания для добавления информации, которая не содержится в заголовке: что читатель узнает, для кого это, какое проблема решается. Метки Open Graph — остановите плохой внешний вид ссылок в Slack 2