Why your links look ugly on WhatsApp and social media, and how to fix it

A customer sends a friend the link to a product on WhatsApp. Instead of a card with the photo and the name, what appears is your pixelated logo, a banner image cropped in half or just the address in blue. It is your store's word of mouth, and it arrives looking its worst.

It is almost never WhatsApp's fault. The page simply does not tell it which image to show, or tells it wrongly.

How networks decide what to show

When someone pastes a link, the app downloads the page and looks for some tags in the <head>: those of the Open Graph protocol, created by Facebook and now read by almost all of them (WhatsApp, Facebook, LinkedIn, Telegram, Slack, Discord, Pinterest…). X/Twitter also reads its own twitter: tags, and if it does not find them it uses the Open Graph ones.

The basic ones are:

• og:title: the card's title.
• og:description: the short text underneath.
• og:image: the image. With an absolute URL and HTTPS.
• og:url: the canonical address of the page.
• og:type: the type (for products product or website is often used).

Recommended: og:image:width and og:image:height (they help the image show up first time), og:image:alt and twitter:card with the value summary_large_image for the large card.

The size that works everywhere

The reference size is 1200 × 630 pixels (an aspect ratio of roughly 1.91:1). It is what Facebook recommends for the large preview and what fits best everywhere else. What usually goes wrong:

• Square product photos: the network crops them top and bottom, or shows them as a thumbnail to one side.
• Images that are too small: below a certain size, networks show a thumbnail or nothing.
• Images that are too heavy: WhatsApp in particular may not show very large images. Keeping them light (below a few hundred KB) avoids problems.
• Text right up against the edges: some apps crop the margins. Leave some space around it.

Why PrestaShop does not always solve it

• Many themes do not output Open Graph tags, or only on the home page.
• Some output og:image with the product image in its square size.
• Several modules output their own tags and they end up duplicated, with different images. The network takes the first one it finds, which is not always the right one.
• The tags appear at the end of the <head>, behind a lot of code. Some apps only read the beginning of the page.
• Categories and CMS pages have no image of their own.

Each network's cache: why it “does not change”

Networks store the preview the first time someone shares a link and reuse it for a while. That is why you fix the tags and the card still looks wrong. How to force an update:

• Facebook: the Sharing Debugger shows what it reads and lets you scrape the page again.
• LinkedIn: Post Inspector does the same.
• WhatsApp: it has no public tool. The practical approach is to test with the URL plus a parameter (for example ?v=2) to check that the new version is fine; the link without the parameter will update over time.
• Telegram: its @WebpageBot lets you ask it to update the preview of a URL.

Beyond the photo: an image that sells

A preview does not have to be just the product photo. A composite image with the photo, the name, the price and, if there is one, the discount, communicates at a glance what the friend needs to know to click. The condition is that it is up to date: an image with an old price breeds distrust.

Checklist

1. Every product page, category and CMS page has its og:image, with an absolute URL and HTTPS.
2. The image is 1200 × 630 and lightweight.
3. There is only one set of Open Graph tags per page.
4. The tags are at the beginning of the <head>.
5. og:title and og:description are in the page's language.
6. You have run three URLs through the Facebook debugger and the LinkedIn inspector.
7. You have tried sharing via WhatsApp from a phone.

How to handle it in PrestaShop

RKR Dynamic Image generates on your server, without external services, a 1200 × 630 image for each product, category and CMS page with an image, with the photo, the name, the price in your store's format, a discount badge when there is one (specific prices included) and the rating stars if you use PrestaShop's product comments module. The image updates automatically when a price changes, is generated per language and per store, and can be designed with a visual builder with 23 themes. The module outputs the tags at the beginning of the <head> so that WhatsApp reads them. It works on PrestaShop 1.7.8 to 9.x.