Посилання 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 зазвичай важить від 200 КБ до 500 КБ у PNG.

Пояснення, чому саме це співвідношення стало стандартом, дивіться у статті Розмір OG-зображення: пояснення 1200×630.

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