Не отображается превью ссылки в WhatsApp? Исправляем og:image

Отсутствие превью ссылки в WhatsApp почти всегда сводится к одной из пяти причин: на странице нет тега og:image, URL изображения недоступен публично, изображение имеет неправильную форму, из-за чего WhatsApp обрезает его, обрезка в порядке, но превью устарело, или SEO-плагин магазина выводит конкурирующий тег. Это руководство охватывает каждую причину, объясняет, почему вы не можете принудительно обновить превью в WhatsApp, и что изменить в магазине на WooCommerce.

Краткий ответ

WhatsApp формирует превью ссылки на основе Open Graph-тегов страницы. Если og:image отсутствует, недоступен или не имеет формата карточки 1200×630, публикация отображается как голая ссылка, серая плитка или плохо обрезанное фото товара. Большинство магазинов на WooCommerce вообще не задают og:image для страниц товаров — SEO-плагин использует статическое изображение обложки, и квадратное или вытянутое фото товара обрезается по бокам или сверху.

1. На странице отсутствует тег og:image

Это самая распространённая причина в магазине. WordPress и WooCommerce по умолчанию не выводят og:image для страниц товаров, категорий или магазина, а тема, которая не поддерживает Open Graph, вообще не добавляет этот тег.

Исправление: просмотрите исходный код страницы и убедитесь, что тег og:image присутствует, имеет абсолютный путь (полный https://… URL, а не относительный) и отдаётся сервером — а не подставляется JavaScript после загрузки. WhatsApp не выполняет ваш JavaScript.

curl -s https://your-store.com/product/example | grep -i 'og:image'

Пустой результат — это и есть ответ: WhatsApp нечего показать в качестве изображения.

2. URL изображения недоступен публично

Краулер WhatsApp загружает изображение так же, как любой анонимный клиент. URL за логином, на localhost, на «сыром» IP-адресе или на пути, заблокированном robots.txt, не сработает.

Исправление: убедитесь, что URL возвращает изображение без учетных данных.

curl -I https://your-store.com/wp-content/uploads/product.jpg

Вам нужны 200 OK и Content-Type со значением image/png или image/jpeg.

Ловушка robots.txt. Социальные краулеры соблюдают robots.txt, поэтому правило, блокирующее путь, на котором находятся ваши изображения, ломает превью — и ломает так, что это легко неверно диагностировать. Отладчик Meta затем сообщает «could not be processed as an image. It may be corrupted or may have an invalid format», что выглядит в точности как поврежденный рендер. curl никогда не воспроизводит эту проблему, потому что curl игнорирует robots.txt. Если ваши изображения обслуживаются с пути, покрытого правилом Disallow:, превью не сработает, каким бы валидным ни был файл. Мы сами столкнулись с этим на пути рендера FastOG и исправили это с помощью переопределения Allow: по самому длинному совпадению.

3. WhatsApp обрезает изображение товара — и правка самой фотографии не поможет

Именно этот симптом продавцы описывают как «мои изображения товаров обрезаются в WhatsApp», и именно его стоит понять правильно.

Платформа обрезает любое переданное ей изображение до рамки 1200×630. Квадратное или вытянутое по вертикали фото товара лишается боковых сторон или верхней части; логотип-плитка растягивается. Ручная обрезка исходного фото в Photoshop — проигрышная стратегия, потому что WhatsApp определяет кадрирование исходя из пропорций карточки, а не из выбранной вами композиции, — а следующее фото товара снова будет иметь другую форму.

Решение — изменить изображение, которое вы отдаёте, а не фотографию, которой владеете. Отправляйте карточку, уже скомпонованную в формате 1200×630, с фотографией товара, вписанной в неё. Тогда платформе нечего будет обрезать.

4. Правильный размер изображения для превью ссылки в WhatsApp

Стандартный размер изображения Open Graph — 1200×630 пикселей с соотношением сторон 1.91:1. Именно такой формат ожидают все крупные платформы, включая WhatsApp. Если использовать изображение 1200×630, превью отобразится корректно; если загрузить квадрат 1000×1000, WhatsApp обрежет его, чтобы заполнить кадр.

Следите, чтобы размер файла не превышал 5 МБ. Карточка с текстом и товаром размером 1200×630 в формате PNG обычно весит от 200 до 500 КБ.

Подробнее о том, почему именно это соотношение стало стандартом, см. в статье OG Image Size: 1200×630 Explained.

5. Превью устарело — и вы не можете заставить WhatsApp обновить его

Если тег, URL и структура корректны, а превью по-прежнему неверное, вы имеете дело с кэшем.

WhatsApp кэширует превью. Оно хранится в приложении получателя, а это значит, что ни один инструмент не может попросить WhatsApp обновить его — ни отладчик, ни API, ни мы. WhatsApp не предоставляет никакого программного способа обновления, поэтому нажать не на что. Любой, кто утверждает обратное, описывает поведение Facebook, а не WhatsApp.

Что вы можете сделать — это убедиться, что правильное изображение ожидает следующего обращения WhatsApp к странице. Именно поэтому URL обложек FastOG адресуются по содержимому: измените название товара, цену или изображение — и URL изменится вместе с ними, так что следующее обращение не сможет подхватить старую карточку. Когда это обращение произойдет, решает WhatsApp.

Две смежные платформы ведут себя так же — LinkedIn и X также не предоставляют API для инвалидации и обычно повторно считывают страницу в течение примерно недели. Их собственные инспекторы могут ускорить этот процесс, если вы торопитесь:

Использование отладчика Facebook для проблемы с WhatsApp. Всё же стоит вставить URL в Sharing Debugger, даже если он не может обновить WhatsApp, потому что он загружает страницу так же, как это сделает WhatsApp, и сообщает, что именно он нашёл — отсутствующие теги, недоступные изображения, неверные форматы. Относитесь к нему как к валидатору тегов, а не как к способу исправить кэш WhatsApp.

6. Исправление этой проблемы в магазине на WooCommerce

В WooCommerce порядок действий стоит описать точно, потому что типичная причина сбоя — это SEO-плагин, а не тема:

• Тега по умолчанию не существует. WooCommerce не включает og:image для product, product_cat или страницы магазина.
• Ваш SEO-плагин заполняет этот пробел плохо. Yoast, Rank Math, All in One SEO и SEOPress выведут og:image — но для товара они берут статическое избранное изображение. Это квадратное или портретное фото, то есть именно то изображение, которое WhatsApp затем обрезает.
• Следите за дублирующимися тегами. Если два плагина выводят og:image, платформа выбирает один из них, и это может быть не тот, который вы ожидаете. Просмотрите исходный код страницы и посчитайте, сколько тегов og:image она генерирует.

FastOG для WooCommerce идет другим путем: он формирует карточку 1200×630 из живых данных каталога (название, цена, значок скидки, рейтинг, фотографии товара) на собственном сервисе рендеринга, а затем передает эту обложку тому SEO-плагину, который вы уже используете, вместо вывода конкурирующего тега. Так на странице остается один og:image, и это карточка, созданная под формат 1.91:1, а не исходное фото товара.

Поскольку обложки формируются из живых данных каталога, цена на карточке совпадает с ценой на странице, а товар со скидкой получает значок распродажи. Когда вы сохраняете товар, плагин также запрашивает у Facebook повторное чтение страницы — Facebook — единственная платформа, предлагающая программное обновление. WhatsApp, LinkedIn и X работают по собственному расписанию, и плагин прямо сообщает об этом, а не обещает обновление, которое не может выполнить.

• Установка: FastOG для WooCommerce на WordPress.org
• Подробности и FAQ: Страница интеграции с WooCommerce

Проверьте, что на самом деле увидит WhatsApp

Прежде чем что-либо менять, посмотрите на страницу так, как её видит краулер. Вставьте URL любого товара в See Your Links The Way Buyers Do — сервис загружает страницу, считывает текущие Open Graph-теги и показывает итоговый превью так, как его отображают WhatsApp, X и Messenger, рядом с обложкой FastOG, созданной из тех же данных о товаре. Регистрация не требуется.

Предпочитаете проверять исходные теги вручную? Воспользуйтесь Open Graph Meta Tag Generator, чтобы увидеть разметку, или обратитесь к справочнику в статье og:image Not Showing? How to Fix It.

FAQ

Почему мое изображение товара обрезается в WhatsApp?

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

Можно ли принудительно обновить превью ссылки в WhatsApp?

Нет. WhatsApp не предоставляет API для обновления или отладчика, а кэшированное превью хранится в приложении получателя. Вы можете лишь убедиться, что правильное изображение ожидает следующего чтения. Исключением является Facebook, который предлагает программный повторный сбор данных.

Почему Facebook Sharing Debugger показывает мое изображение, а WhatsApp — ничего?

Потому что это отдельные кэши, и отладчик сообщает о тегах страницы, которые читают обе платформы. Если отладчик показывает корректное изображение, а WhatsApp — ничего, значит, теги в порядке, и вы видите необновленный кэш WhatsApp. Если отладчик тоже ничего не показывает, тег отсутствует или изображение недоступно — проверьте причины 1 и 2.

Использует ли WhatsApp og:image или twitter:image?

og:image. Задайте теги Open Graph. twitter:image предназначен для X.

Нужен ли мне плагин, или я могу просто добавить тег самостоятельно?

Вы можете сами добавить статический тег og:image в свою тему — это работает и намного лучше, чем ничего. Но он не сможет создавать отдельную карточку для каждого товара без ручного создания изображения для каждого товара, и он будет устаревать при каждом изменении цены. Именно в этот момент динамическая обложка становится оправданной.

Мой сайт не на FastOG. Это все равно поможет?

Да — пять причин связаны с поведением платформ, а не FastOG. Проработайте их по порядку с помощью curl, исходного кода страницы и отладчика.

Связанные материалы

• og:image не отображается? Как это исправить
• Мгновенное обновление изображения WhatsApp для WooCommerce
• Синхронизация цен WooCommerce в превью WhatsApp
• Принудительное обновление кэша Open Graph в Facebook
• Размер OG-изображения: объяснение 1200×630
• Как кэшировать OG-изображения
• Подписанные URL-адреса OG-изображений
• Генератор метатегов Open Graph