Загрузка...
Загрузка...
Пошаговое руководство по настройке превью ссылок в VK, Telegram, Facebook и других соцсетях. Open Graph, размеры изображений, решение типичных проблем.
AIПрактическое руководство по генерации постов для Telegram, VK, Instagram с помощью нейросетей. Структура промптов, примеры для разных платформ, как избежать шаблонности.
SEOПодробное руководство по созданию и оптимизации мета-тегов для поисковой оптимизации. Title, description, Open Graph, Twitter Cards и другие важные теги. Практические примеры и лучшие практики.
SEOРуководство по FAQ Schema разметке: формат JSON-LD, требования Google, генерация FAQPage, проверка и типичные ошибки.
Поделитесь с коллегами или изучите другие материалы блога
Open Graph (OG) — протокол разметки, который определяет, как страница отображается при публикации в социальных сетях. Без OG-тегов платформы сами выбирают заголовок, описание и картинку, часто неудачно. В этой статье — полное руководство по настройке Open Graph для всех популярных соцсетей.
Open Graph был создан Facebook в 2010 году. Теги og:* размещаются в <head> страницы и задают:
Сейчас OG поддерживают Facebook, VK, Telegram, LinkedIn, WhatsApp и многие другие платформы. Twitter использует свои теги twitter:*, но при их отсутствии fallback на OG.
Минимальный набор для корректного отображения:
<meta property="og:title" content="Заголовок страницы для соцсетей">
<meta property="og:description" content="Краткое описание, 1-2 предложения">
<meta property="og:image" content="https://example.com/images/og-image.jpg">
<meta property="og:url" content="https://example.com/page/">
<meta property="og:type" content="website">
Заголовок карточки. Может отличаться от <title> страницы — в соцсетях допустимы более длинные и эмоциональные формулировки.
Рекомендации: до 60 символов для Facebook, до 70 для VK. Более длинные обрезаются.
Описание под заголовком. Должно дополнять заголовок и побуждать к клику.
Рекомендации: 150–200 символов. Избегайте дублирования title.
Изображение для превью. Критически важный элемент — от него зависит, заметят ли пост.
Требования по платформам:
| Платформа | Минимум | Рекомендуемый размер | Соотношение |
|---|---|---|---|
| 200×200 | 1200×630 | 1.91:1 | |
| VK | 537×240 | 1200×630 | 1.91:1 |
| Telegram | 320×320 | 1200×630 | 1.91:1 |
| 1200×627 | 1200×627 | 1.91:1 | |
| 300×157 | 1200×628 | 1.91:1 |
Универсальный размер 1200×630 px подходит для всех платформ. Формат — JPG или PNG, до 8 МБ (Facebook), до 5 МБ (VK).
Канонический URL страницы. Должен быть абсолютным, с протоколом.
<meta property="og:url" content="https://example.com/article/">
Тип контента. Влияет на отображение и доступные дополнительные поля.
| Тип | Когда использовать |
|---|---|
| website | Главная, лендинги, общие страницы |
| article | Статьи блога, новости |
| product | Карточки товаров |
| video.other | Видео |
| profile | Страницы людей |
<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-03-07T10:00:00+03:00">
<meta property="article:modified_time" content="2026-03-07T12:00:00+03:00">
<meta property="article:author" content="https://example.com/author/oleg/">
<meta property="article:section" content="Технологии">
<meta property="article:tag" content="SEO">
<meta property="article:tag" content="Open Graph">
<meta property="og:type" content="product">
<meta property="product:price:amount" content="29990">
<meta property="product:price:currency" content="RUB">
<meta property="product:availability" content="in stock">
<meta property="og:locale" content="ru_RU">
<meta property="og:locale:alternate" content="en_US">
<meta property="og:site_name" content="Название сайта">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Описание изображения для доступности">
Twitter при отсутствии twitter:* использует OG, но для лучшего контроля добавьте:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Заголовок">
<meta name="twitter:description" content="Описание">
<meta name="twitter:image" content="https://example.com/og-image.jpg">
<meta name="twitter:site" content="@username">
VK использует OG. Дополнительно можно указать vk:image для переопределения, но обычно og:image достаточно.
Telegram использует OG. Важно: изображение должно быть доступно по HTTPS без редиректов. Telegram кэширует превью надолго — при смене картинки может потребоваться время на обновление.
После настройки проверьте отображение:
| Ошибка | Решение |
|---|---|
| Относительный URL в og:image | Использовать абсолютный URL с https:// |
| Изображение слишком маленькое | Минимум 200×200, лучше 1200×630 |
| 403/404 на изображении | Проверить доступность, CORS, robots.txt |
| Старая карточка в кэше | Использовать отладочные инструменты для сброса кэша |
| Дублирование og и twitter | Дублирование допустимо, twitter переопределяет при конфликте |
Для CMS и статических сайтов OG-теги генерируются динамически:
// PHP пример
<meta property="og:title" content="<?= htmlspecialchars($page->title) ?>">
<meta property="og:description" content="<?= htmlspecialchars($page->description) ?>">
<meta property="og:image" content="<?= htmlspecialchars($page->absoluteUrl . $page->image) ?>">
<meta property="og:url" content="<?= htmlspecialchars($page->absoluteUrl) ?>">
// Next.js пример
export const metadata = {
openGraph: {
title: 'Заголовок',
description: 'Описание',
images: ['/og-image.jpg'],
url: 'https://example.com/page',
},
}
Некоторые платформы поддерживают несколько изображений через og:image:
<meta property="og:image" content="https://example.com/image1.jpg">
<meta property="og:image" content="https://example.com/image2.jpg">
<meta property="og:image" content="https://example.com/image3.jpg">
Платформа выберет одно. Обычно достаточно одного изображения 1200×630.
VK использует OG полностью. Дополнительно можно указать vk:image для переопределения. Рекомендуемый размер — 1200×630. В ленте отображается обрезка 537×240.
Telegram кэширует превью надолго. При смене изображения добавьте query-параметр к URL: ?v=2. Изображение должно быть доступно по HTTPS без редиректов.
ОК поддерживает OG. Требования аналогичны VK.
Дзен использует OG для превью при публикации ссылок на статьи.
Open Graph — обязательный минимум для контроля отображения ссылок в соцсетях. Универсальный размер изображения 1200×630, обязательные теги — title, description, image, url, type. Проверяйте результат в OG Preview и проверке мета-тегов. Дополнительно — руководство по мета-тегам и настройка превью при шеринге.