Когда кто-то отправляет ссылку на ваш сайт в мессенджере или публикует в соцсети, платформа подтягивает превью: заголовок, описание и картинку. Что именно она возьмёт, определяют теги Open Graph в <head>.
<meta property="og:type" content="website">
<meta property="og:title" content="Ремонт холодильников в Казани — выезд за 2 часа">
<meta property="og:description" content="Мастер приедет в день обращения. Диагностика бесплатно, гарантия 2 года.">
<meta property="og:image" content="https://example.ru/img/og-image.jpg">
<meta property="og:url" content="https://example.ru/remont-holodilnikov">
<meta property="og:site_name" content="Название компании">
<meta property="og:locale" content="ru_RU">
Обратите внимание: у этих тегов атрибут property, а не name, — частая ошибка при копировании из чужого кода.
Почему это важно
Без разметки платформа собирает превью сама: берёт случайный кусок текста и первую попавшуюся картинку — часто это логотип из шапки или иконка соцсети. Ссылка выглядит как спам, и по ней не переходят.
Разница в кликах между голой ссылкой и аккуратной карточкой с картинкой — кратная. Для сайта, который делится ссылками в рассылках, чатах и соцсетях, это самая дешёвая из возможных оптимизаций.
Требования к картинке
- Размер 1200×630 — стандартная пропорция 1,91:1. Меньше 600×315 многие платформы отвергают и показывают маленькое превью.
- Абсолютный адрес с
https://. Относительный путь не сработает. - Вес до 5 МБ, формат JPEG или PNG.
- Текст на картинке — крупный. В ленте она видна размером с почтовую марку; мелкая подпись не читается.
- Полезно добавить размеры — тогда платформа отрисует карточку до загрузки изображения:
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Мастер ремонтирует холодильник">
Типы контента
og:type меняет вид карточки. website — для обычных страниц, article — для статей (добавляются дата публикации и автор), product — для товаров (цена и наличие).
<meta property="og:type" content="article">
<meta property="article:published_time" content="2025-03-14T10:00:00+03:00">
Как проверить
- Пункт аудита «Open Graph разметка» показывает, сколько из пяти основных тегов заполнено.
- Telegram: отправьте ссылку самому себе в «Избранное» — превью соберётся сразу.
- VK: инструмент
vk.com/dev/pages.clearCacheпоказывает, что видит соцсеть, и сбрасывает кэш. - Facebook Sharing Debugger — самый подробный отчёт, включая ошибки в размерах изображения.
Кэш — важный момент: платформы запоминают превью надолго. Изменили теги — сбросьте кэш через инструмент платформы, иначе будете видеть старую карточку и думать, что ничего не заработало.
Соседние настройки
Для X (бывший Twitter) есть собственная разметка, хотя он умеет читать и Open Graph. А для расширенных сниппетов в поиске нужна микроразметка Schema.org — это другая задача и другой формат.