How your store links look on WhatsApp: Open Graph tags and image size

When a customer shares one of your products on WhatsApp, the preview under the link, with its title, short description and image, comes from Open Graph tags in the page's <head>. Facebook and other apps read the same tags. If the tags are missing, or the image doesn't meet WhatsApp's limits, the preview may show without an image, with the wrong text, or not at all. When a product is shared in a chat, that preview is the first thing the buyer sees of it.

What WhatsApp and Facebook need

Meta's WhatsApp documentation says:

og:title, og:description and og:url are required. og:image is optional, but without it the preview has no picture.
The image must be under 600 KB, at least 300 px wide, and no wider than 4:1.
The page's <head> must fall within the first 300 KB of the HTML. Large inline scripts or styles placed before the tags can push them past that point.
Use a clean URL in og:url, without tracking parameters.
The title shows on up to two lines and the description on one or two; Meta says "80 characters will suffice" for the description.

For Facebook, Meta recommends an image of at least 1200 × 630 px (a 1.91:1 ratio), with a minimum of 200 × 200 px and a maximum of 8 MB. Adding og:image:width and og:image:height lets its crawler "render the image immediately". A 1200 × 630 JPEG compressed below 600 KB works for both.

The Open Graph protocol itself requires og:title, og:type, og:image and og:url, uses property= rather than name=, and sets the language with og:locale in language_TERRITORY form:

<meta property="og:title" content="Oud perfume, 50 ml">
<meta property="og:description" content="Long-lasting oud, delivered across Saudi Arabia.">
<meta property="og:url" content="https://example.com/products/oud-50ml">
<meta property="og:type" content="website">
<meta property="og:image" content="https://example.com/share/oud-50ml-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Oud perfume bottle, 50 ml">
<meta property="og:locale" content="en_US">
<meta property="og:locale:alternate" content="ar_SA">
<meta name="twitter:card" content="summary_large_image">

The last line is the X (Twitter) card tag, which X uses to choose the card layout.

How to check

View the source of your homepage and one product page, and search for og:.
Open the og:image address in a browser, then check its file size and dimensions.
Paste the link into a WhatsApp chat and look at the preview before sending.
Use Meta's Sharing Debugger to see which tags Facebook's crawler reads.
Run the free audit. Store Audit by Ahmed Fayed checks that og:title, og:description and og:image exist and that the image loads, and it also checks the twitter:card tag and your favicon.

How to fix

Salla, Zid and Shopify

On hosted platforms, the platform or the theme writes these tags from your store name, descriptions and images. I haven't confirmed which setting feeds the homepage image on each platform, so find the og:image address in your homepage source and match it to the logo, banner or sharing-image setting it comes from, then replace that image with a 1200 × 630 version under 600 KB. For product pages, put the most useful words at the start of product names and descriptions, since the preview shows only a line or two.

WordPress/WooCommerce

SEO plugins usually add Open Graph tags and a social image field for each page. Make sure only one source prints og: tags: one plugin, or the theme, not both.

Custom-coded

Add the tags above to every page template, fill them from the product data, and place them near the top of <head>.

Bilingual stores

On any platform, if your store has Arabic and English versions, each version should carry its own tags in its own language: Arabic title, description and image alt text with og:locale set to ar_SA on Arabic pages, English with en_US or another English locale on English pages, and the other language listed in og:locale:alternate. Someone sharing the Arabic link then gets an Arabic preview.

Favicon

Google shows your favicon next to your pages in search results. Add a <link rel="icon"> to the homepage, use an icon larger than 48 × 48 px, and make sure robots.txt doesn't block Googlebot or Googlebot-Image from fetching it.

Common mistakes

A 3 MB PNG as og:image, far over WhatsApp's 600 KB limit.
A relative path in og:image instead of a full https:// address.
Writing name="og:title" instead of property="og:title".
Tracking parameters in og:url.
Duplicate og: tags from a plugin and the theme.
A description whose first 80 characters say nothing useful.

Run the free Store Audit by Ahmed Fayed to check how your store's links are set up for sharing. If you'd like help fixing this, contact me on WhatsApp +20 102 702 0701 or at ahmed-fayed.com.