Когда вы делитесь ссылкой в WhatsApp, приложение загружает вашу страницу, читает несколько мета-тегов из HTML и собирает карточку превью с заголовком, описанием и изображением ещё до того, как получатель коснётся ссылки. Если эти теги неверны, превью незаметно исчезает. В этом руководстве рассказано, какие именно теги Open Graph читает WhatsApp, почему og:image должен использовать абсолютный URL, какие размеры изображения действительно работают и как проверить и исправить превью перед отправкой.
Как WhatsApp читает превью ссылок
Каждый раз, когда кто-то вставляет URL в чат WhatsApp, встроенный сканер приложения, иногда называемый WhatsApp Link Preview Bot, отправляет HTTP-запрос GET на этот URL. Он разбирает HTML-ответ в поисках тегов <meta property="og:..."> в <head>. Если нужные теги найдены, он собирает карточку превью. Если нет — ссылка отображается как обычный текст без визуального контекста.
WhatsApp — не единственный сканер, работающий так: Facebook, LinkedIn, Slack, Telegram, iMessage и Twitter/X следуют одному и тому же протоколу Open Graph, разработанному Facebook в 2010 году. Спецификация находится на ogp.me и определяет набор тегов <meta>, которые любой сайт может добавить, чтобы управлять тем, как его страницы выглядят при публикации в социальных сетях.
Когда происходит сканирование?
WhatsApp сканирует URL, когда вы впервые вставляете его в чат и загружается превью. Результат агрессивно кэшируется: WhatsApp будет отдавать ту же карточку превью ещё дни или даже недели после первой загрузки. Именно поэтому обновление тегов OG на сервере не исправляет сломанное превью сразу — закэшированная версия продолжает появляться. Подробнее о сбросе кэша в следующем разделе.
Примечание
Превью в групповых чатах и личных сообщениях
WhatsApp создаёт превью и в личных сообщениях, и в групповых чатах. Поведение одинаковое: в обоих случаях используются одни и те же теги OG. Однако есть нюанс: если отправитель отключил превью ссылок в настройках WhatsApp (Настройки → Чаты → Создавать превью ссылок), превью не появятся независимо от того, насколько правильно настроены ваши теги. Это клиентская настройка, а не проблема сервера.
Требование абсолютного URL для og:image
Это самая частая причина сломанных превью в WhatsApp: относительный путь в теге og:image. Спецификация протокола Open Graph однозначна: og:image должен быть полным абсолютным URL. Не путь относительно корня, не URL относительно протокола, не фрагмент пути. Полный URL со схемой, доменом и путём.
| Формат | Пример | Работает в WhatsApp? |
|---|---|---|
| ✓ Абсолютный URL (правильно) | https://вашдомен.com/images/share.jpg | ✓ Да |
| ✗ Путь от корня | /images/share.jpg | ✗ Нет — незаметно не работает |
| ✗ URL относительно протокола | //вашдомен.com/images/share.jpg | ✗ Ненадёжно |
| ✗ Относительный путь | images/share.jpg | ✗ Нет |
| ✗ Data URI | data:image/jpeg;base64,... | ✗ Нет |
Структурированные свойства можно задать, поставив двоеточие после имени свойства и используя ещё один тег og:image с абсолютным URL.
Почему относительные пути незаметно не работают
Когда сканер WhatsApp загружает вашу страницу, он разбирает HTML изолированно — он не «знает» ваш базовый URL так, как его знает браузер. Относительный путь вроде /images/share.jpg не имеет контекста, поэтому сканер либо игнорирует его, либо пытается разрешить его относительно базового URL, который мог определить неверно. Результат — отсутствующее изображение без сообщения об ошибке: превью появляется без картинки или не появляется вовсе.
Всегда используйте полный абсолютный URL, включая https://. Если ваш сайт поддерживает и HTTP, и HTTPS, всегда используйте https://: многие социальные сканеры из соображений безопасности отказываются загружать не-HTTPS изображения в превью.
Внимание
CDN и сторонние хостинги изображений
Если ваши изображения отдаются с CDN или стороннего хостинга (например, Cloudinary, Imgix или бакета облачного хранилища), требование абсолютного URL сохраняется — просто используйте полный URL CDN. Единственное дополнительное обстоятельство — заголовки CORS: убедитесь, что ваш CDN разрешает кросс-доменные запросы, так как некоторые сканеры это проверяют. Также проверьте, что в URL CDN нет истекающих токенов аутентификации: подписанный URL с ограниченным сроком действия сломает превью всем, кто нажмёт ссылку после истечения токена.
Оптимизатор текста превью Open Graph
Проверьте, оптимизированы ли длины og:title и og:description одновременно для WhatsApp, Facebook, LinkedIn и Twitter.
Правила размера и формата og:image
Правильный URL изображения — это только половина дела. У WhatsApp есть и требования к размеру и формату, которые определяют, будет ли изображение показано крупно или полностью пропущено.
Рекомендуемые размеры
Спецификация Open Graph рекомендует 1200×630 пикселей при соотношении сторон 1,91:1. Это ориентир, который хорошо отображается одновременно в WhatsApp, Facebook, LinkedIn и Slack, так что нет причин не использовать его по умолчанию.
| Платформа | Минимальный размер | Рекомендуемый размер | Соотношение сторон |
|---|---|---|---|
| 300×200 px | 1200×630 px | 1,91:1 | |
| 200×200 px | 1200×630 px | 1,91:1 | |
| 200×200 px | 1200×630 px | 1,91:1 или 1:1 | |
| Twitter/X | 280×150 px | 1200×628 px | 2:1 (summary_large_image) |
| Slack | 500×300 px | 1200×630 px | 1,91:1 |
WhatsApp покажет изображения вплоть до примерно 300×200 пикселей, но всё меньшее обычно отображается как крошечная миниатюра, а не крупное изображение, и очень маленькие картинки могут быть полностью пропущены. Изображения ниже минимального порога или с экстремальными пропорциями (например, очень высокие портреты) иногда отклоняются.
Поддерживаемые форматы файлов
- JPEG (.jpg, .jpeg) — лучший выбор для фотографий и изображений с градиентами. Широко поддерживается всеми социальными сканерами.
- PNG (.png) — лучший выбор для графики, логотипов и изображений с прозрачностью. Также универсально поддерживается.
- WebP — нестабильная поддержка сканерами. Избегайте WebP для og:image, даже если ваш сайт в остальном использует изображения WebP.
- GIF — широко поддерживается, но показывается только первый кадр (без анимации). Редко подходит для превью.
- SVG — не поддерживается большинством социальных сканеров, включая WhatsApp. Используйте вместо него растровый PNG или JPEG.
Соображения о размере файла
Держите файл og:image меньше 300 КБ. Сканер WhatsApp работает на серверах Meta и оптимизирован под скорость: очень большие изображения загружаются дольше и повышают вероятность тайм-аута, из-за чего превью останется без картинки. Хорошо оптимизированный JPEG размером 1200×630 px должен спокойно укладываться в 200 КБ.
Совет
Частые причины неработающих превью
Даже при корректных тегах OG превью ссылок в WhatsApp иногда не отображаются. Вот самые частые причины.
Относительный URL в og:image
Уже разобрано выше, но стоит повторить, потому что это самая частая ошибка. Всегда используйте https://вашдомен.com/path/to/image.jpg, никогда /path/to/image.jpg. Используйте валидатор тегов OG, чтобы поймать это до публикации.
Теги OG рендерит JavaScript (их нет в серверном HTML)
Сканер WhatsApp не выполняет JavaScript. Если ваши мета-теги вставляет клиентский фреймворк после загрузки страницы — обычная ситуация для одностраничных приложений на React, Vue или Angular без серверного рендеринга, — сканер увидит пустой <head> и не создаст превью. Теги OG должны присутствовать в первоначальном HTML-ответе сервера. Используйте серверный рендеринг (SSR) или статическую генерацию (SSG), чтобы теги были в исходном HTML.
Сервер блокирует сканер WhatsApp
Инструменты безопасности вроде Bot Fight Mode от Cloudflare, собственные правила WAF или агрессивные настройки robots.txt иногда блокируют сканер WhatsApp. Проверьте robots.txt, чтобы убедиться, что он не блокирует все сканеры через `User-agent: * Disallow: /`. Также посмотрите логи безопасности сервера при тестировании — возможно, сканер блокируется со статусом 403 или 429.
og:image возвращает статус, отличный от 200
Если URL изображения возвращает 404, 403, перенаправление 301 или любой ответ, отличный от 200, WhatsApp незаметно убирает изображение из превью. Убедитесь, что URL изображения доступен напрямую (без перенаправлений и запросов аутентификации), открыв его в приватном окне браузера и проверив статус. Используйте инспектор HTTP-заголовков, чтобы проверить заголовки ответа для любого URL изображения.
og:image размещён по HTTP (не HTTPS)
Социальные сканеры обычно требуют HTTPS из соображений безопасности. Изображение, отдаваемое по обычному HTTP, часто пропускается, даже если остальная страница работает по HTTPS. Всегда следите, чтобы URL og:image начинался с https://.
og:image превышает лимит размера или имеет недопустимый формат
Очень большие изображения (более 5 МБ) или неподдерживаемые форматы (SVG, WebP в некоторых сканерах) незаметно пропускаются. Остановитесь на JPEG или PNG до 300 КБ при 1200×630 px.
Внимание
Сброс кэша превью WhatsApp
WhatsApp кэширует превью ссылок по URL. Как только URL просканирован, одно и то же превью отдаётся всем получателям этой ссылки — независимо от того, обновляли ли вы с тех пор теги OG. Срок жизни кэша публично не документирован, но на практике он может составлять от нескольких дней до недели.
Метод строки запроса
Самый надёжный обходной путь — добавить строку запроса к URL при публикации. WhatsApp считает https://вашдомен.com/page?v=2 отдельным URL от https://вашдомен.com/page, поэтому просканирует страницу заново и создаст новое превью. Строка запроса может быть любой (?v=2, ?ref=wa, ?share=1), главное, чтобы она отличалась от ранее использованной.
Совет
Использование Sharing Debugger от Facebook для прогрева кэша
Sharing Debugger от Facebook (developers.facebook.com/tools/debug) — инструмент, который одновременно проверяет ваши теги OG и принудительно пересканирует URL в инфраструктуре Meta. Поскольку WhatsApp и Facebook используют одну и ту же инфраструктуру Open Graph внутри Meta, сканирование через Sharing Debugger иногда может прогреть (или очистить) кэш превью WhatsApp для того же URL. Его стоит запускать после любого изменения тегов вместе с методом строки запроса.
Итог: порядок работ по сбросу кэша
- Обновите теги OG на сервере и убедитесь, что исходный HTML-ответ содержит новые значения.
- Прогоните URL через валидатор тегов OG, чтобы подтвердить корректность тегов.
- Отправьте URL в Sharing Debugger от Facebook, чтобы вызвать повторное сканирование.
- При публикации в WhatsApp добавьте новую строку запроса (например, ?v=2), чтобы гарантировать свежее сканирование.
Продвинутые приёмы с тегами OG
Когда основы работают, несколько продвинутых приёмов дают больше контроля над тем, как ваш контент выглядит в WhatsApp и других социальных платформах.
Несколько тегов og:image
Спецификация Open Graph допускает несколько тегов og:image на одной странице. Каждый дополнительный тег изображения считается альтернативой: сканеры обычно используют первое корректное изображение, которое встретят. Это удобно для резервного варианта:
<!-- Primary: large landscape (WhatsApp, Facebook, LinkedIn) -->
<meta property="og:image" content="https://yourdomain.com/share-1200x630.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<!-- Fallback: square (some LinkedIn contexts, Instagram) -->
<meta property="og:image" content="https://yourdomain.com/share-1200x1200.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="1200" />Использование og:image отдельно от twitter:image
Twitter/X сначала читает twitter:image и обращается к og:image только если теги Twitter Card отсутствуют. Это значит, что можно задать другое изображение для Twitter, не затрагивая WhatsApp. Рекомендуемый Twitter размер изображения для карточки summary_large_image — 1200×628 px (соотношение 2:1), а не 1200×630 px. Разница невелика, но если хотите идеальную попиксельную передачу на обеих платформах, укажите оба:
<!-- Used by WhatsApp, Facebook, LinkedIn, Slack -->
<meta property="og:image" content="https://yourdomain.com/share-1200x630.jpg" />
<!-- Used by Twitter/X specifically -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yourdomain.com/share-1200x628.jpg" />Динамические OG-изображения
Многие современные сайты генерируют OG-изображения динамически — для постов блога, страниц товаров или профилей пользователей — с помощью сервисов или серверного рендеринга. Если вы создаёте изображения программно, помните, что URL всё равно должен быть абсолютным и общедоступным. URL динамических OG-изображений часто выглядят так: https://вашдомен.com/api/og?title=Мой+Заголовок — это вполне корректно, если эндпоинт возвращает реальное изображение с правильным заголовком Content-Type (image/jpeg или image/png), а не HTML-страницу.
Проверка структурированных данных вместе с тегами OG
Теги Open Graph работают вместе со структурированными данными JSON-LD, а не вместо них. Для статей, товаров и локального бизнеса структурированные данные включают расширенные результаты Google, а теги OG отвечают за превью при публикации в соцсетях. Эти две системы дополняют друг друга — нужны обе. Используйте валидатор структурированных данных для проверки схемы JSON-LD, а валидатор тегов OG — для реализации Open Graph. Генератор мета-тегов может создать полный раздел <head> с тегами OG и Twitter Card в одном выводе.
Полный рекомендуемый раздел head
Для справки: вот полный готовый к продакшену раздел <head>, охватывающий Open Graph (WhatsApp, Facebook, LinkedIn), Twitter Card и стандартные SEO-мета-теги:
<head>
<!-- Standard SEO -->
<title>Your Page Title | Site Name</title>
<meta name="description" content="A concise 150-160 character page description." />
<link rel="canonical" href="https://yourdomain.com/your-page" />
<!-- Open Graph (WhatsApp, Facebook, LinkedIn, Slack) -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://yourdomain.com/your-page" />
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A concise summary for social sharing." />
<meta property="og:image" content="https://yourdomain.com/images/share-1200x630.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Descriptive alt text for the preview image." />
<meta property="og:site_name" content="Your Site Name" />
<meta property="og:locale" content="en_US" />
<!-- Twitter Card (Twitter/X) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A concise summary for Twitter." />
<meta name="twitter:image" content="https://yourdomain.com/images/share-1200x628.jpg" />
</head>Генератор мета-тегов
Создайте полный набор мета-тегов Open Graph, Twitter Card и SEO за один раз — без ручного написания.
Ключевые выводы
- WhatsApp читает четыре тега Open Graph, чтобы построить превью ссылки: og:title, og:description, og:image и og:url.
- og:image должен быть полным абсолютным HTTPS-URL: относительные пути незаметно не работают в WhatsApp и всех других социальных сканерах.
- Используйте JPEG или PNG 1200×630 px размером до 300 КБ как og:image для лучшего отображения на всех платформах.
- Указывайте теги og:image:width и og:image:height, чтобы сканеры могли построить макет превью до загрузки изображения.
- Теги OG должны быть в серверном HTML — мета-теги, вставленные JavaScript, WhatsApp не читает.
- WhatsApp кэширует превью по URL на дни. Добавляйте строку запроса (?v=2) при публикации обновлённой ссылки.
- Используйте валидатор тегов OG для проверки всех тегов перед публикацией и Sharing Debugger от Facebook, чтобы принудительно пересканировать после изменений.