On-Page SEO
Open Graph и Twitter Cards: полное руководство
Open Graph и Twitter Cards управляют тем, как ваши страницы выглядят при шеринге в социальных сетях. Правильная разметка увеличивает CTR ссылок в 2–3 раза. Разбираем все теги, требования платформ и типичные ошибки.
Когда пользователь делится ссылкой в Facebook, Telegram, LinkedIn или WhatsApp, платформа не берёт данные с вашего сайта произвольно — она читает специальные мета-теги в <head> страницы. Это и есть Open Graph Protocol, разработанный Facebook в 2010 году.
Без OG-разметки социальные сети сами «угадывают» заголовок, описание и картинку — результат непредсказуем. С правильной разметкой вы полностью контролируете внешний вид превью и максимизируете 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 изображения превью (min 200×200, рек. 1200×630) |
| og:url | Да | Канонический URL страницы |
| og:type | Да | Тип объекта: website, article, product |
| og:site_name | Рекомендован | Название сайта (например, «seohead.tech») |
| og:locale | Рекомендован | Язык страницы: ru_RU, en_US |
| og:image:width | Рекомендован | Ширина изображения в пикселях |
| og:image:height | Рекомендован | Высота изображения в пикселях |
| og:image:alt | Рекомендован | Alt-текст для изображения превью |
Пример реализации в коде:
HTML
<!-- Полный набор OG-тегов для статьи -->
<head>
<meta property="og:title" content="Open Graph и Twitter Cards: полное руководство" />
<meta property="og:description" content="Как настроить разметку Open Graph для максимального CTR при шеринге в социальных сетях" />
<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 и Twitter Cards руководство" />
<meta property="og:url" content="https://seohead.tech/blog/open-graph" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="seohead.tech" />
<meta property="og:locale" content="ru_RU" />
<meta property="og:locale:alternate" content="en_US" />
<!-- Дополнительно для article -->
<meta property="article:published_time" content="2026-05-17T00:00:00Z" />
<meta property="article:author" content="https://seohead.tech/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:-теги, затем fallback на 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 разметка -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@seohead_tech" />
<meta name="twitter:creator" content="@pavelbarushka" />
<meta name="twitter:title" content="Open Graph и Twitter Cards: полное руководство" />
<meta name="twitter:description" content="Настройка OG-разметки для максимального CTR при шеринге" />
<meta name="twitter:image" content="https://seohead.tech/images/blog/open-graph.webp" />
<meta name="twitter:image:alt" content="Open Graph руководство" />Типы 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/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.titleRu,
description: article.leadRu,
openGraph: {
title: article.titleRu,
description: article.leadRu,
url: `https://seohead.tech/blog/${params.slug}`,
siteName: 'seohead.tech',
images: [
{
url: `https://seohead.tech${article.coverImage}`,
width: 1200,
height: 630,
alt: article.coverImageAltRu,
},
],
locale: 'ru_RU',
type: 'article',
publishedTime: article.date,
authors: ['https://seohead.tech/about'],
section: article.tag,
},
twitter: {
card: 'summary_large_image',
title: article.titleRu,
description: article.leadRu,
images: [`https://seohead.tech${article.coverImage}`],
creator: '@pavelbarushka',
},
};
}Валидация и отладка
| Инструмент | Платформа | 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 кэш обновляется автоматически; для принудительного сброса добавьте параметр
?v=2 к URL.Частые вопросы
Напрямую — нет. Google не использует OG-теги для ранжирования. Косвенно — да: привлекательное превью увеличивает шеринг, что может приводить к росту ссылок и брендового трафика.
Для поиска —
<title>. Для социальных сетей — og:title. Они могут отличаться: для поиска заголовок оптимизируют под ключевые слова (50–60 симв.), для социальных сетей — под клик и эмоцию (до 70 симв.). Оба тега должны присутствовать.Три основные причины: 1) Изображение недоступно по HTTPS или заблокировано для ботов. 2) og:image не указан или URL некорректен. 3) Страница закрыта от краулеров (noindex, robots.txt, Cloudflare Bot Fight Mode). Проверьте доступность изображения через
curl -A 'TelegramBot' URL.Twitter поддерживает OG как fallback, но собственные twitter:-теги имеют приоритет и дают больше контроля — например, тип карточки (summary vs summary_large_image). Рекомендую указывать оба набора: это 5 дополнительных строк, которые гарантируют корректное отображение.
Next.js поддерживает динамическую генерацию OG-изображений через
ImageResponse из next/og. Изображение генерируется на сервере в формате PNG/WebP на основе JSX-шаблона. Это позволяет создавать уникальные превью для каждой статьи без ручной подготовки изображений.