Open Graph и SEO

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

Зачем нужно

Когда кто-то делится ссылкой в Telegram, VK, Facebook или Twitter -- мессенджер/соцсеть забирает OG-теги и формирует карточку-превью (заголовок, описание, картинка). Без OG-тегов превью будет пустым или некрасивым.

SEO-теги (title, description, canonical) помогают поисковым системам правильно индексировать страницу и показывать привлекательный сниппет.

Где используется

• Любой публичный сайт
• Landing pages
• Статьи и блоги
• E-commerce (товарные карточки)
• SPA (требуют SSR/SSG для корректного OG)

Предпосылки

• meta теги
• Структура документа

Open Graph

Обязательные OG-теги

<meta property="og:title" content="Руководство по HTML для начинающих">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/html-guide">
<meta property="og:image" content="https://example.com/images/html-guide-og.jpg">

Рекомендуемые OG-теги

<meta property="og:description" content="Полный гайд: теги, атрибуты, семантика, формы, доступность">
<meta property="og:site_name" content="WebDev Blog">
<meta property="og:locale" content="ru_RU">
<meta property="og:locale:alternate" content="en_US">

Типы контента (og:type)

Тип	Когда использовать
website	Главная страница, лендинг
article	Статья, блог-пост, новость
profile	Страница пользователя
product	Товар (с расширениями)
video.other	Видеоконтент
music.song	Музыка
book	Книга

og:image -- требования

<!-- Рекомендуемые размеры: 1200x630 -->
<meta property="og:image" content="https://example.com/og.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:alt" content="Описание изображения">

Требования к og:image:

• Абсолютный URL с https:// (относительный не работает)
• Размер: минимум 200x200, рекомендуется 1200x630
• Формат: JPEG, PNG (избегай SVG -- не все платформы поддерживают)
• Размер файла: до 5 МБ (лучше до 1 МБ)
• Нет важного текста у краёв (могут обрезаться)

OG для статьи (article)

<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-04-06T10:00:00+03:00">
<meta property="article:modified_time" content="2026-04-06T14:00:00+03:00">
<meta property="article:author" content="https://example.com/authors/ivan">
<meta property="article:section" content="Веб-разработка">
<meta property="article:tag" content="HTML">
<meta property="article:tag" content="Frontend">

Twitter Cards

Twitter (X) имеет свою систему карточек, но использует OG как fallback:

<!-- Тип карточки -->
<meta name="twitter:card" content="summary_large_image">

<!-- Специфичные для Twitter (перекрывают OG) -->
<meta name="twitter:title" content="Руководство по HTML">
<meta name="twitter:description" content="Полный гайд по HTML">
<meta name="twitter:image" content="https://example.com/twitter-card.jpg">
<meta name="twitter:site" content="@webdev_blog">
<meta name="twitter:creator" content="@ivan_dev">

Тип карточки	Описание
summary	Маленькая карточка с квадратной картинкой
summary_large_image	Большая карточка с широкой картинкой
app	Карточка мобильного приложения
player	Встроенный видеоплеер

SEO-теги

<title> -- заголовок страницы

<!-- Формат: Тема — Раздел | Сайт -->
<title>Руководство по HTML — Веб-разработка | WebDev Blog</title>

Правила:

• Уникальный для каждой страницы
• 50-60 символов (Google обрезает длинные)
• Ключевое слово ближе к началу
• Разделитель: |, —, -

<meta name="description">

<meta name="description" content="Пошаговое руководство по HTML: от базовых тегов до семантики, форм и доступности. С примерами кода и практическими заданиями.">

Правила:

• 120-160 символов
• Уникальное для каждой страницы
• Содержит ключевые слова естественным образом
• Призыв к действию повышает CTR

Canonical URL

<!-- Каноническая версия страницы (предотвращает дубли) -->
<link rel="canonical" href="https://example.com/html-guide">

Когда нужен canonical:

• Страница доступна по нескольким URL (/page, /page/, /page?ref=twitter)
• HTTP и HTTPS версии
• www и без www
• Мобильная и десктопная версии
• Пагинация

Structured Data (Schema.org)

JSON-LD -- рекомендуемый Google формат структурированных данных:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Руководство по HTML для начинающих",
  "author": {
    "@type": "Person",
    "name": "Иван Петров",
    "url": "https://example.com/authors/ivan"
  },
  "datePublished": "2026-04-06",
  "dateModified": "2026-04-06",
  "image": "https://example.com/html-guide.jpg",
  "publisher": {
    "@type": "Organization",
    "name": "WebDev Blog",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  },
  "description": "Полный гайд по HTML"
}
</script>

Другие полезные теги

<!-- Язык альтернативных версий -->
<link rel="alternate" hreflang="en" href="https://example.com/en/html-guide">
<link rel="alternate" hreflang="ru" href="https://example.com/ru/html-guide">
<link rel="alternate" hreflang="x-default" href="https://example.com/html-guide">

<!-- RSS-лента -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="/feed.xml">

<!-- Предзагрузка для ускорения -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://analytics.example.com">

Полный production-шаблон

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- SEO -->
  <title>Руководство по HTML — WebDev Blog</title>
  <meta name="description" content="Пошаговое руководство по HTML с примерами кода.">
  <meta name="robots" content="index, follow">
  <link rel="canonical" href="https://example.com/html-guide">

  <!-- Open Graph -->
  <meta property="og:type" content="article">
  <meta property="og:title" content="Руководство по HTML">
  <meta property="og:description" content="Пошаговое руководство по HTML с примерами кода.">
  <meta property="og:image" content="https://example.com/og/html-guide.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:url" content="https://example.com/html-guide">
  <meta property="og:site_name" content="WebDev Blog">
  <meta property="og:locale" content="ru_RU">

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Руководство по HTML">
  <meta name="twitter:description" content="Пошаговое руководство по HTML с примерами кода.">
  <meta name="twitter:image" content="https://example.com/og/html-guide.jpg">

  <!-- Structured Data -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "Руководство по HTML",
    "datePublished": "2026-04-06",
    "author": { "@type": "Person", "name": "Иван Петров" }
  }
  </script>

  <!-- Favicons -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!-- Стили -->
  <link rel="stylesheet" href="/css/main.css">
</head>

Частые ошибки

Ошибка	Почему плохо	Как правильно
og:image с относительным URL	Не загрузится в соцсетях	Абсолютный URL с https://
og:image маленькая	Размытое превью	Минимум 1200x630
Одинаковый title на всех страницах	Плохо для SEO	Уникальный title на каждой странице
Нет canonical	Поисковик может выбрать неправильный URL	Указывай canonical
OG-теги на SPA без SSR	Краулеры не выполняют JS -- OG пустые	Используй SSR/SSG
description > 160 символов	Обрезается в поиске	120-160 символов

Практика

1. Добавь OG-теги к своей странице и проверь на opengraph.xyz
2. Проверь Twitter Card на cards-validator.twitter.com
3. Добавь JSON-LD structured data и проверь на Rich Results Test
4. Скинь ссылку на свою страницу в Telegram и посмотри на превью
5. Проверь любой крупный сайт через DevTools: какие OG-теги и structured data используются

Связанные темы

• meta теги -- все meta-теги
• Структура документа -- контекст head
• Заголовки h1-h6 -- SEO и заголовки

Ресурсы

• Open Graph Protocol
• MDN: Open Graph
• Дока: Open Graph
• Twitter Cards
• Schema.org
• Google: Structured Data
• Google: SEO Starter Guide