Open Graph и превью ссылок в соцсетях для HTML-сайта: полное руководство

Когда кто-то делится ссылкой на ваш сайт в Telegram, ВКонтакте, WhatsApp или X, мессенджер автоматически подгружает превью — картинку, заголовок, описание. Если на сайте не настроены теги Open Graph, превью выглядит грустно: пустая иконка, обрезанный текст, никакой картинки. Это снижает кликабельность в разы. Правильные OG-теги превращают ссылку в красивую карточку, которая привлекает внимание и приносит клики. В статье — полный разбор: что такое OG, какие теги нужны, как сгенерировать превью-картинку, как проверить результат и типичные ошибки.

Содержание

  1. Что такое Open Graph
  2. Зачем настраивать на HTML-сайте
  3. Минимальный набор тегов
  4. Полный набор тегов
  5. Превью-картинка: размер, формат, требования
  6. Twitter Cards
  7. Специфика для ВКонтакте и Telegram
  8. Для многостраничного сайта
  9. Как проверить превью
  10. Частые ошибки
  11. FAQ
  12. Чек-лист настройки

Что такое Open Graph

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

OG-теги размещаются в секции <head> в виде <meta>-тегов с атрибутом property:

<meta property="og:title" content="Заголовок страницы">
<meta property="og:description" content="Описание">
<meta property="og:image" content="https://yourdomain.ru/image.jpg">
<meta property="og:url" content="https://yourdomain.ru/">

Сейчас OG поддерживают практически все площадки: Facebook, ВКонтакте, Telegram, WhatsApp, Viber, Discord, Slack, LinkedIn, Pinterest. Twitter (X) использует свой стандарт Twitter Cards, но при отсутствии его — fallback на OG.

Зачем настраивать на HTML-сайте

  • Кликабельность. Ссылка с превью в Telegram кликается в 3–5 раз чаще, чем «голый» URL.
  • Доверие. Красивое превью с логотипом и описанием — признак серьёзного сайта.
  • Контроль. Без OG соцсеть угадывает данные из заголовка и первого абзаца — часто неудачно.
  • Брендинг. Превью с фирменными цветами и шрифтом — бесплатная реклама.
  • SEO косвенно. Лучшая кликабельность из соцсетей → больше трафика → лучше для ранжирования.

Это микро-настройка, которая делается за 30 минут и приносит результат на годы вперёд.

Минимальный набор тегов

Четырёх тегов хватает для рабочего превью:

<meta property="og:title" content="Натяжные потолки в Москве за 1 день">
<meta property="og:description" content="От 350 ₽/м². Гарантия 15 лет. Замер бесплатно. Звоните: +7 (495) 123-45-67">
<meta property="og:image" content="https://yourdomain.ru/og-image.jpg">
<meta property="og:url" content="https://yourdomain.ru/">

Вставляется в <head> вашего HTML-документа.

Полный набор тегов

Расширенный вариант с дополнительными параметрами:

<!-- Open Graph -->
<meta property="og:title" content="Натяжные потолки в Москве за 1 день">
<meta property="og:description" content="От 350 ₽/м². Гарантия 15 лет. Замер бесплатно.">
<meta property="og:image" content="https://yourdomain.ru/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Натяжной потолок в гостиной">
<meta property="og:url" content="https://yourdomain.ru/">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Натяжные потолки Москва">
<meta property="og:locale" content="ru_RU">

Что значит каждый тег

  • og:title — заголовок (60–90 символов оптимально).
  • og:description — описание (150–200 символов).
  • og:image — URL картинки (абсолютный, не относительный).
  • og:image:width/height — размер картинки в пикселях.
  • og:image:alt — альтернативный текст картинки.
  • og:url — канонический URL страницы.
  • og:type — тип контента: website, article, product, video.movie и т.д.
  • og:site_name — название сайта целиком.
  • og:locale — язык и регион (ru_RU, en_US).

Превью-картинка: размер, формат, требования

Самый важный элемент превью. От картинки зависит, бросится ли в глаза ссылка.

Размер

  • Рекомендованный: 1200×630 px (соотношение 1.91:1).
  • Минимальный: 600×315 px.
  • Максимальный: 5 МБ файл, по возможности меньше 1 МБ для скорости.

Картинки меньше 600×315 могут не загружаться или показываться маленькими «бейджами» сбоку.

Формат

  • JPG — для фотографий, лучшее сжатие.
  • PNG — для текста и графики (логотипы, инфографика).
  • WebP — поддерживается не всеми площадками, лучше избегать.

Что нарисовать на картинке

  • Логотип компании;
  • Заголовок-офер крупными буквами;
  • Главное преимущество («Бесплатная доставка», «Гарантия 15 лет»);
  • Фотография продукта;
  • Контрастные цвета — превью должно быть заметным в ленте.

Инструменты для создания

  • Canva — готовые шаблоны OG-картинок.
  • Figma — для дизайнеров.
  • Bannerbear, Placid — генерация по шаблону.
  • Photoshop, GIMP — классика.
  • OG Image Maker (метатег на старте) — простые превью.

Куда положить файл

Загружаете картинку в корень сайта или в папку /images/og/. В теге указываете полный URL:

<meta property="og:image" content="https://yourdomain.ru/og-image.jpg">

Важно: URL должен быть полный с https://, а не /og-image.jpg.

Twitter Cards

Twitter (X) использует свой набор тегов. Они дублируют OG, но с префиксом twitter::

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Натяжные потолки в Москве за 1 день">
<meta name="twitter:description" content="От 350 ₽/м². Гарантия 15 лет.">
<meta name="twitter:image" content="https://yourdomain.ru/og-image.jpg">
<meta name="twitter:site" content="@yourcompany">

Тип карточки summary_large_image — самый красивый, с большой картинкой.

Специфика для ВКонтакте и Telegram

ВКонтакте

VK поддерживает стандартные OG-теги. Дополнительно понимает специальные теги для статей:

<meta property="vk:image" content="https://...">

При публикации поста VK кэширует превью. Если поменяли картинку, а старая всё ещё показывается — используйте сервис очистки кэша VK.

Telegram

Telegram использует строго OG-теги. Особенности:

  • Поддерживает GIF в og:image — может работать как анимированное превью;
  • Кэширует агрессивно — превью обновляется не сразу;
  • Для обновления отправьте ссылку боту @WebpageBot, он принудительно перечитает.

WhatsApp

Использует OG. Картинку показывает квадратной — даже если оригинал 1200×630, превью будет обрезано до квадрата. Учитывайте, что важная информация должна быть в центре.

Для многостраничного сайта

Если у вас не один лендинг, а несколько страниц (главная, услуги, контакты), на каждой должны быть свои уникальные OG-теги:

<!-- index.html -->
<meta property="og:title" content="Натяжные потолки в Москве">
<meta property="og:url" content="https://yourdomain.ru/">

<!-- prices.html -->
<meta property="og:title" content="Цены на натяжные потолки от 350 ₽/м²">
<meta property="og:url" content="https://yourdomain.ru/prices.html">

<!-- contacts.html -->
<meta property="og:title" content="Контакты — Натяжные потолки Москва">
<meta property="og:url" content="https://yourdomain.ru/contacts.html">

Картинка может быть одна общая для всех страниц или своя для каждой важной страницы.

Как проверить превью

Официальные дебаггеры

  • Facebook Sharing Debugger — developers.facebook.com/tools/debug/
  • Twitter Card Validator — cards-dev.twitter.com/validator
  • LinkedIn Post Inspector — linkedin.com/post-inspector/
  • VK Tag Verifier — vk.com/dev.php?method=articles.getNews&type=tagverifier

Универсальные сервисы

  • opengraph.xyz — показывает превью для разных платформ сразу.
  • metatags.io — генератор и проверка.
  • socialsharepreview.com — превью для Facebook, Twitter, LinkedIn.

Telegram

Отправьте ссылку в любой чат — превью сразу появится. Для обновления — боту @WebpageBot.

Через консоль браузера

Откройте сайт, F12 → Elements → найдите в <head> теги meta property="og:*". Должны быть на месте.

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

  1. Относительный URL картинки. content="/og.jpg" вместо content="https://yourdomain.ru/og.jpg". Соцсети не могут загрузить.
  2. Картинка слишком маленькая. Меньше 600×315 — может не показаться вовсе.
  3. Картинка не оптимизирована. 5 МБ → долго грузится, у пользователя успевает уйти лента.
  4. Картинка с прозрачным фоном. При вставке в чёрный фон Telegram текст становится нечитаемым. Делайте фон.
  5. Текст превью обрезается. Слишком длинный og:title (>90 символов) или og:description (>200).
  6. Атрибут name вместо property. Для OG нужно именно property, иначе не работает. Для Twitter — наоборот, name.
  7. Картинка хранится на чужом домене. Лучше на своём, чтобы не зависеть от третьих сервисов.
  8. Кэш не обновляется. После изменения OG-тегов надо «прогнать» через дебаггер, чтобы соцсети перечитали.
  9. Одинаковые OG на всех страницах сайта. Многостраничник должен иметь уникальные превью.
  10. Нет fallback на og:image. Если основная картинка не загрузилась — превью пустое. Делайте небольшой запасной вариант.

FAQ

Обязательно ли использовать Open Graph?

Технически — нет. Сайт работает и без OG. Но без них превью в соцсетях выглядит ужасно или вовсе пустое, что снижает кликабельность ссылок в 3–5 раз. Для серьёзного проекта — обязательно.

Какой размер картинки выбрать?

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

Как обновить превью, если ничего не меняется?

Соцсети кэшируют OG-данные. Для обновления: Facebook — Sharing Debugger → Scrape Again, Telegram — отправить ссылку @WebpageBot, VK — сервис очистки кэша. Для надёжности добавьте к URL ?v=2 временно — это сбросит кэш.

Можно ли использовать GIF или видео в og:image?

GIF — да, поддерживается в Telegram и некоторых других платформах. Видео — отдельные теги og:video, og:video:type и т.д. Поддержка ограниченная, не везде работает.

Чем OG отличается от title и description в ?

Title и description — для поисковиков (Google, Яндекс). OG — для соцсетей и мессенджеров. Нужны оба набора. Иногда они совпадают по тексту, иногда — разные (title чаще длинный с ключами, og:title короче и эмоциональнее).

Что лучше — JPG или PNG для og:image?

JPG для фотографий (меньше вес), PNG для графики с текстом и логотипом (лучше качество). Размер файла важнее формата — старайтесь держать под 500 КБ.

Можно ли менять превью под разные источники?

Можно делать разные картинки для Facebook (og:image) и Twitter (twitter:image). Под отдельных пользователей или ботов — невозможно.

Чек-лист настройки Open Graph

  • ☐ Создана превью-картинка 1200×630 px
  • ☐ Картинка оптимизирована (под 500 КБ)
  • ☐ Картинка загружена на сервер
  • ☐ В <head> добавлен og:title
  • ☐ Добавлен og:description
  • ☐ Добавлен og:image с полным URL (https://...)
  • ☐ Добавлен og:url
  • ☐ Добавлен og:type = "website"
  • ☐ Добавлен og:site_name
  • ☐ Добавлен og:locale = "ru_RU"
  • ☐ Добавлены Twitter Cards теги
  • ☐ Для многостраничного сайта — свои теги на каждой странице
  • ☐ Превью проверено в Facebook Debugger
  • ☐ Превью проверено в Telegram (отправка ссылки в чат)
  • ☐ Превью проверено в WhatsApp
  • ☐ После изменений сброшен кэш через дебаггеры

Заключение

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

Большинство современных HTML-шаблонов из подборки Zettabyte уже имеют заготовки OG-тегов — остаётся подставить свои данные и картинку. А для размещения сайта — сравните тарифы в подборщике хостингов.