Contents
Open Graph и Twitter Cards: полное руководство
Как метаданные Open Graph управляют превью ссылок, чем они отличаются от сниппетов Google и как проверить заголовки, изображения и описания.
Когда пользователь делится ссылкой в Facebook, Telegram, LinkedIn или WhatsApp, платформа не берёт данные с вашего сайта наугад. Она читает специальные мета-теги в <head> страницы. Это Open Graph Protocol, который разработал Facebook в 2010 году.
Без разметки Open Graph соцсети сами угадывают заголовок, описание и картинку, и результат непредсказуем. С правильной разметкой вы сами задаёте, как выглядит превью, и повышаете CTR ссылок, которыми делятся.
<head> превращаются в карточку с заголовком, описанием и картинкой.Open Graph не влияет на позиции в поиске напрямую — это инструмент для социального трафика. Но привлекательное превью расширяет охват публикаций и может косвенно повлиять на ссылочный вес и брендовый трафик.
Что такое Open Graph
Open Graph Protocol (OGP) — это набор мета-тегов в <head> HTML-страницы. Они задают, как страница выглядит при публикации в соцсетях. Протокол использует пространство имён og: и поддерживается всеми крупными платформами: Facebook, LinkedIn, Telegram, WhatsApp, Pinterest, Slack.
Основные OG-теги
| Тег | Обязательный | Описание |
|---|---|---|
| og:title | Да | Заголовок страницы в превью (до 60–70 символов) |
| og:description | Рекомендуется | Описание (до 155–160 символов) |
| og:image | Да | URL картинки для превью (минимум 200×200, рекомендуем 1200×630) |
| og:url | Да | Канонический URL страницы |
| og:type | Да | Тип объекта: website, article, product |
| og:site_name | Рекомендуется | Название сайта (например, «seohead.tech») |
| og:locale | Рекомендуется | Язык страницы: en_US, ru_RU |
| og:image:width | Рекомендуется | Ширина изображения в пикселях |
| og:image:height | Рекомендуется | Высота изображения в пикселях |
| og:image:alt | Рекомендуется | Alt-текст изображения для превью |
Пример реализации в коде:
html
<!-- Full OG tag set for an article -->
<head>
<meta property="og:title" content="Open Graph and Twitter Cards: complete guide" />
<meta property="og:description" content="How to set up Open Graph markup for maximum CTR when sharing on social media" />
<meta property="og:image" content="https://seohead.tech/images/blog/open-graph.webp" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Open Graph and Twitter Cards guide" />
<meta property="og:url" content="https://seohead.tech/en/blog/open-graph" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="seohead.tech" />
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="ru_RU" />
<!-- Additional for article -->
<meta property="article:published_time" content="2026-05-17T00:00:00Z" />
<meta property="article:author" content="https://seohead.tech/en/about" />
<meta property="article:section" content="On-Page SEO" />
</head>og:image — требования и размеры
OG-изображение — самый важный элемент превью. Оно занимает более 80% площади карточки и решает, нажмёт ли пользователь на ссылку. Неверный размер или формат — и Facebook обрежет картинку или не станет её показывать.
| Платформа | Рекомендуемый размер | Минимум | Формат |
|---|---|---|---|
| Facebook / Meta | 1200×630 px | 600×315 px | JPG, PNG, GIF, WebP |
| Twitter / X | 1200×600 px | 300×157 px | JPG, PNG, WebP, GIF |
| 1200×627 px | 200×200 px | JPG, PNG, GIF | |
| Telegram | 1280×720 px (16:9) | любой | JPG, PNG, WebP |
| 1200×630 px | 300×200 px | JPG, PNG |
Универсальное решение: 1200×630 px в WebP. Соотношение 1,91:1 корректно отображается на всех крупных платформах. Размер файла — до 8 МБ (ограничение Facebook), оптимально — до 300 КБ.
Twitter Cards
Twitter (X) поддерживает OG-теги, но у него есть и своя разметка — Twitter Cards. Платформа сначала читает теги twitter:, а при их отсутствии берёт og:. Лучше указать оба набора.
| Тег Twitter Card | Аналог в OG | Описание |
|---|---|---|
| twitter:card | — | Тип карточки: summary, summary_large_image, app, player |
| twitter:title | og:title | Заголовок (до 70 символов) |
| twitter:description | og:description | Описание (до 200 символов) |
| twitter:image | og:image | URL изображения |
| twitter:image:alt | og:image:alt | Alt-текст изображения |
| twitter:site | — | @username аккаунта сайта |
| twitter:creator | — | @username автора контента |
Пример реализации в коде:
html
<!-- Twitter Cards markup -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@seohead_tech" />
<meta name="twitter:creator" content="@seohead_tech" />
<meta name="twitter:title" content="Open Graph and Twitter Cards: complete guide" />
<meta name="twitter:description" content="Setting up OG markup for maximum CTR when sharing" />
<meta name="twitter:image" content="https://seohead.tech/images/blog/open-graph.webp" />
<meta name="twitter:image:alt" content="Open Graph guide" />Типы OG-объектов
| og:type | Когда использовать | Дополнительные теги |
|---|---|---|
| website | Главная страница, страницы услуг, лендинги | — |
| article | Блог-статьи, новости, гайды | article:published_time, article:author, article:section |
| product | Карточки товаров в интернет-магазине | product:price:amount, product:price:currency |
| profile | Страницы авторов, профили пользователей | profile:first_name, profile:last_name |
| video | Страницы с видеоконтентом | video:duration, video:release_date |
Реализация в Next.js
В Next.js 13+ (App Router) OG-теги удобно задавать через Metadata API. Это типизированный подход: не нужно вручную писать HTML-мета-теги.
typescript
// app/[locale]/blog/[slug]/page.tsx
import type { Metadata } from 'next';
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const article = await getArticle(params.slug);
return {
title: article.titleEn,
description: article.leadEn,
openGraph: {
title: article.titleEn,
description: article.leadEn,
url: `https://seohead.tech/en/blog/${params.slug}`,
siteName: 'seohead.tech',
images: [
{
url: `https://seohead.tech${article.coverImage}`,
width: 1200,
height: 630,
alt: article.coverImageAltEn,
},
],
locale: 'en_US',
type: 'article',
publishedTime: article.date,
authors: ['https://seohead.tech/en/about'],
section: article.tagEn,
},
twitter: {
card: 'summary_large_image',
title: article.titleEn,
description: article.leadEn,
images: [`https://seohead.tech${article.coverImage}`],
creator: '@seohead_tech',
},
};
}Валидация и отладка
| Инструмент | Платформа | URL |
|---|---|---|
| Facebook Sharing Debugger | Facebook, Instagram, WhatsApp | developers.facebook.com/tools/debug/ |
| Twitter Card Validator | Twitter / X | cards-dev.twitter.com/validator |
| LinkedIn Post Inspector | linkedin.com/post-inspector/ | |
| Open Graph Checker | Универсальный | opengraph.xyz |
| Telegram | Telegram | Просто вставьте ссылку в чат — превью появится сразу |
Facebook кэширует OG-теги. Если вы обновили разметку, а превью не изменилось, используйте Facebook Sharing Debugger (кнопка «Scrape Again»). Кэш Telegram обновляется автоматически; для принудительного сброса добавьте к URL параметр
?v=2.Частые вопросы
Влияет ли Open Graph на позиции в Google?
Напрямую — нет. Google не использует OG-теги для ранжирования. Косвенно — да: привлекательное превью повышает шеринг, а это может привести к росту ссылок и брендового трафика.
Что важнее: og:title или <title>?
Для поиска —
<title>, для соцсетей — og:title. Они могут отличаться: заголовок для поиска оптимизируют под ключевые слова (50–60 симв.), для соцсетей — под клик и эмоции (до 70 симв.). Оба тега должны присутствовать.Почему Telegram не показывает превью?
Три основные причины: 1) изображение недоступно по HTTPS или закрыто для ботов; 2) og:image не задан или URL некорректен; 3) страница закрыта от краулеров (noindex, robots.txt, Cloudflare Bot Fight Mode). Проверить доступность изображения можно командой
curl -A 'TelegramBot' URL.Нужны ли Twitter Cards, если я уже настроил OG?
Многие платформы могут использовать Open Graph как запасной вариант, а собственные теги там, где они поддерживаются, дают дополнительный контроль. Проверяйте реальную ссылку, которой поделились: ни один набор тегов не гарантирует, как каждая платформа закэширует или отрисует превью.
Как генерировать OG-изображения динамически?
Next.js поддерживает динамическую генерацию OG-изображений через
ImageResponse из next/og. Изображение создаётся на сервере в формате PNG/WebP по JSX-шаблону. Так можно делать уникальные превью для каждой статьи без ручной подготовки картинок.Check it with SpiderHead
Free and local: run the audit on your own machine.
