How to Make Product Links Show the Right Image in WhatsApp for an Indian Ecommerce Site

To make a product link more likely to show the right image in WhatsApp, add product-specific Open Graph metadata to that product page’s HTML <head>. Set og:image to an absolute image URL that anyone can fetch, and make sure the page and image are available without logging in. Then test the exact product URL in WhatsApp. A correct setup improves the chance of the intended preview, but does not guarantee WhatsApp will display a card for every message. Meta-attributed WhatsApp preview guidance and the Open Graph protocol describe the relevant metadata.

This applies to Indian ecommerce sites just as it does elsewhere: the research found no special India-only preview rule. Make and verify the change on the actual public product URL and domain you share.

1. Add Open Graph tags to each product page

The Open Graph protocol defines og:title, og:type, og:image, and og:url as required properties for a page object. WhatsApp’s cited guidance also calls for a nonempty description. Give each product URL its own accurate values rather than reusing the store homepage’s tags.

<head>
  <title>Everyday Cotton Shirt – Blue | Example Store</title>
  <meta name="description" content="A breathable cotton shirt in blue. Available in multiple sizes.">

  <meta property="og:title" content="Everyday Cotton Shirt – Blue">
  <meta property="og:description" content="A breathable cotton shirt in blue. Available in multiple sizes.">
  <meta property="og:type" content="product">
  <meta property="og:url" content="https://shop.example.in/products/everyday-cotton-shirt-blue">
  <meta property="og:image" content="https://shop.example.in/images/everyday-cotton-shirt-blue-share.jpg">
  <meta property="og:image:alt" content="Blue everyday cotton shirt, front view">
  <meta property="og:image:type" content="image/jpeg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
</head>

Replace the example domain, product name, description, canonical URL, image URL, and image details with values for your product. The optional image fields are defined by Open Graph; they describe the asset but do not override the need for a fetchable image.

Important implementation details

• Use an absolute image URL. Use https://shop.example.in/images/item.jpg, not /images/item.jpg or a relative path.
• Use the exact canonical product URL. og:url should identify the product page being shared, not a category page, homepage, or URL with unintended tracking parameters.
• Choose the product’s share image deliberately. It should visibly represent the product and be composed to tolerate cropping in a preview card. Do not assume WhatsApp will show the entire source image uncropped.
• Emit tags in the initial HTML. The cited WhatsApp guidance says metadata should appear within the first 300 KB of the HTML response. If your storefront adds tags only after client-side JavaScript runs, inspect the actual response seen by a crawler and adjust server rendering if needed.
• Keep metadata accurate. A product image should match the title and description for that product URL. Do not put price or stock information into the image metadata expecting a full product card; the preview is not a guaranteed product-data display.

2. Prepare an image WhatsApp can fetch

The Meta-attributed guidance reproduced by ChatArchitect gives these image recommendations: less than 600 KB, at least 300 pixels wide, and a width-to-height ratio no greater than 4:1. Treat them as guidance, not a promise that every WhatsApp client will render an identical card.

Check	What to do
Public access	Open the exact og:image URL in a private browser window where you are not signed in. It should return the image without a login, expiring token, or human-only challenge.
Absolute URL	Use a complete URL including scheme and host, preferably the public HTTPS asset URL your store serves.
File size	Keep it under 600 KB according to the cited guidance; compress or resize the share image if it is larger.
Dimensions and shape	Make it at least 300 pixels wide and no wider than a 4:1 width-to-height ratio. Leave some visual breathing room around the product in case the card crops the edges.
Redirects and protection	Check whether a CDN, hotlink protection, access rule, or redirect prevents an unauthenticated fetch. The final destination must remain publicly accessible.

3. Verify the HTML and image before sharing

1. Open the exact public product URL that customers will paste into WhatsApp.
2. View the server-returned HTML source, not only the browser’s post-JavaScript DOM. Find og:title, og:description, og:url, and og:image.
3. Confirm the values describe that product and that the tags occur in the document head, early in the response.
4. Copy the full og:image URL into a private browser window. Confirm it loads as the intended image without authentication.
5. Paste the exact product URL into a WhatsApp chat as a fresh test. Check the preview on the client and sending workflow that matter to your store.
6. After changing metadata or the image, test again with the exact URL. Preview data may be cached; the retrieved material does not establish an official cache lifetime or guaranteed cache-clearing process.

4. Platform implementation: render tags per product

The HTML is the same regardless of commerce platform. The essential platform-specific task is to ensure that the product template outputs the values for the current product in the initial HTML response. Use your existing theme, server-rendered template, or SEO tooling if it supports per-product Open Graph fields. Before adding another plugin, check whether the current theme or SEO extension already emits these tags; avoid duplicate or conflicting og:image values.

For a custom storefront, build metadata from the product record and HTML-escape values before inserting them into attributes. Keep the canonical URL and image URL absolute. If the product content is rendered client-side, verify the raw response from the production URL rather than assuming that tags visible in browser developer tools are available to a preview fetcher.

// Framework-neutral server-side template example.
// Escape values with your framework's HTML-escaping/template facilities.
const product = {
  name: "Everyday Cotton Shirt – Blue",
  description: "A breathable cotton shirt in blue. Available in multiple sizes.",
  canonicalUrl: "https://shop.example.in/products/everyday-cotton-shirt-blue",
  shareImageUrl: "https://shop.example.in/images/everyday-cotton-shirt-blue-share.jpg"
};

const headHtml = `
  <meta property="og:title" content="${escapeHtml(product.name)}">
  <meta property="og:description" content="${escapeHtml(product.description)}">
  <meta property="og:type" content="product">
  <meta property="og:url" content="${escapeHtml(product.canonicalUrl)}">
  <meta property="og:image" content="${escapeHtml(product.shareImageUrl)}">
`;

escapeHtml here stands for the escaping function provided by your framework or template engine; it is not a built-in JavaScript function. Prefer a framework’s safe HTML templating over concatenating untrusted product content. This snippet shows the data mapping, not a complete web server.

5. Diagnose a missing, wrong, or cropped image

Symptom	Likely cause	Fix
No preview card	Missing or empty metadata; page or image cannot be fetched; or WhatsApp elects not to show a card.	Inspect the exact URL’s returned HTML and image access. Ensure title, description, canonical URL, and image are nonempty and public. Retest, while recognizing a card is not guaranteed.
Wrong product image	The product template inherited homepage or another product’s tags, or multiple image tags conflict.	Render one intentional product-specific og:image for the exact URL and remove conflicting metadata from the template or plugin configuration.
Image URL works only when signed in	The asset is behind authentication, a short-lived signed URL, or access restrictions.	Publish a stable public share image URL and verify it in a private browser window.
Image is blank to the preview fetcher	The URL may redirect unexpectedly, return an error, or be blocked by CDN or hotlink rules.	Follow the URL without a session, inspect its final destination and response, and adjust asset access or redirect behavior.
Preview shows old content	Preview information may be cached.	Retest the exact URL after the fix. A new image URL or fresh share can help diagnose stale data, but no official refresh time or clearing method is established in the cited research.
Image is cropped awkwardly	A preview card can show a crop rather than the full source composition.	Use a deliberate share image with the product centered and margin around important details; keep within the cited dimensions and aspect-ratio guidance.
Tags appear in browser tools but not the raw HTML	Metadata is inserted only after client-side JavaScript executes.	Render the Open Graph tags in the server response and confirm they appear early in the HTML.
Text URL works but a CRM template does not	A message template URL button can behave differently from a manually pasted text link.	Test the connected sending tool and the exact message type separately, then inspect the result on the receiving WhatsApp client.

Do not treat crawler fetches as customer clicks: a preview fetch does not show that a recipient opened the page or bought the product.

6. Choose website previews or catalog sharing

Use Open Graph metadata when you want an ordinary link to your own product page to carry the right preview image. WhatsApp Business catalog sharing is a separate option for sharing catalog items within WhatsApp; it does not configure the Open Graph preview for a website URL. The WhatsApp Help Center catalog guidance describes catalog sharing.

Goal	Use
Keep the merchant’s website URL in the message and improve its link preview	Product-specific Open Graph tags and a public share image
Share a product from a WhatsApp Business catalog inside WhatsApp	Catalog sharing, configured separately from website metadata

7. Inspect the live page visually

After confirming the raw HTML and asset URL, inspect the rendered product page at the exact production URL and viewport relevant to your team. A screenshot can reveal layout problems such as a broken hero image or an unexpected consent overlay that are separate from the metadata itself. ScreenshotNeo is a website screenshot API and MCP server from ScreenshotNeo; it can return a PNG, JPEG, WebP, or PDF from one GET request. Its screenshot shows the rendered page, so use the HTML checks above to verify the actual Open Graph values.

Or skip the browser setup

To capture a rendered page for visual inspection, call the ScreenshotNeo API. See the ScreenshotNeo API documentation for options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://shop.example.in/products/everyday-cotton-shirt-blue -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={
        "access_key": "YOUR_API_KEY",
        "url": "https://shop.example.in/products/everyday-cotton-shirt-blue",
    },
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://shop.example.in/products/everyday-cotton-shirt-blue'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer())));

ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. Its MCP server gives AI agents tools for screenshots, page information, and PDF capture. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Every feature is available on every plan. Screenshots help with visual inspection; they do not replace checking the HTML metadata or guarantee a WhatsApp preview.

Sign up free for 1,000 screenshots a month with no card.

FAQ

Will adding these tags guarantee an image preview in every WhatsApp chat?

No. The cited WhatsApp guidance says preparation does not guarantee that every message displays a preview card.

Can I put a relative path in og:image?

Use an absolute URL with the public host and scheme so the image can be fetched independently of page context.

Will this make WhatsApp show the product price and stock?

These tags control the page’s Open Graph preview metadata. Do not rely on them to display a complete product card with price or availability.

Does WhatsApp Business catalog sharing fix the website link preview?

No. Catalog sharing is a separate in-app product-sharing workflow; ordinary website links use page metadata for their preview.

How long should I wait for an updated image?

The retrieved sources do not establish an official cache lifetime. Retest the exact URL after confirming the updated response and public image, and avoid assuming a fixed refresh interval.

Implementation checklist

• og:title, og:description, og:url, and og:image are present and product-specific.
• The canonical page URL and image URL are absolute and public.
• The metadata is in the initial HTML head and early in the response.
• The image follows the cited guidance: under 600 KB, at least 300 pixels wide, and no more than 4:1 in width-to-height ratio.
• The exact product link is tested in WhatsApp and, when applicable, through the actual CRM or template flow.