Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Set the thumbnail with Open Graph tags in your page’s HTML <head>. Use an absolute, public image URL in og:image, keep the markup in the first 300 KB of the response, and meet WhatsApp’s image limits: under 600 KB, at least 300 pixels wide, and no more than a 4:1 width-to-height ratio. Then paste the URL into a WhatsApp composer and wait up to 10 seconds for the preview.
The exact HTML to add
Place these four tags in the page head. Replace the example values with the page’s real title, a concise description, its canonical URL, and the image you want shown.
<head>
<meta property="og:title" content="Page title" />
<meta property="og:description" content="A short description of the page." />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:image" content="https://example.com/images/share-image.jpg" />
</head>Use https:// URLs that anyone can fetch without logging in. The URL in og:url should be the clean canonical address: omit session IDs, identifying parameters, counters and other tracking values. The image address must be absolute, not a relative path such as /images/share-image.jpg.
What each property controls
og:title: the headline in the card.og:description: supporting text. WhatsApp says about 80 characters will suffice; the displayed text is generally one or two lines.og:url: the page represented by the preview.og:image: the thumbnail file WhatsApp should fetch.
The broader Open Graph protocol also defines og:type, image MIME type, dimensions, secure URL and alt text. They can be useful to other consumers, but the four properties above are the WhatsApp-specific minimum described in its developer documentation.
#1 Best Overall
WhatsApp’s image and markup limits
These are implementation limits from the WhatsApp developer documentation (updated November 5, 2025), not performance guarantees:
| Item | Requirement | Why it matters |
|---|---|---|
| Head location | The head containing the tags must be within the first 300 KB of HTML | A crawler may stop looking before it reaches late-generated markup |
| Title, description and URL | All must be present inside the head and non-empty | Missing core fields can prevent a normal card |
| Image file | Under 600 KB | Larger files may be reduced to a small preview or not used |
| Image width | At least 300 pixels | Narrow files do not meet the documented minimum |
| Aspect ratio | Width-to-height ratio of 4:1 or less | Extremely wide banners are outside the guidance |
| Description length | About 80 characters is sufficient | Keeps the card readable in one or two lines |
Compress the image to stay below 600 KB without making text illegible. A roughly landscape image that is comfortably wider than 300 pixels, but not wider than four times its height, is a practical starting point. WhatsApp does not document a required file format in the cited guidance; serve a normal web image such as JPEG, PNG or WebP with the correct response type.
Adding the tags in common site setups
Direct HTML or a server-rendered app
- Open the template that renders the individual page’s
<head>. - Insert the four tags before the closing
</head>. - Make the values page-specific when each article or product needs a different card.
- Deploy, then inspect the server-returned HTML rather than only the post-rendered browser DOM.
CMS or site builder
Use its page-level social-sharing, Open Graph or SEO fields if available. Verify that the resulting tags are emitted in the initial HTML response and that you can set an absolute image URL. A visual editor can show a preview while still placing metadata too late for a crawler, so inspect the source returned over HTTP.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsJavaScript-rendered pages
Do not rely exclusively on client-side code that adds tags after load. WhatsApp’s crawler issues an HTTP GET request and looks for markup in the response. Prefer server-side rendering, static generation or edge middleware that writes the tags into the early head.
Test before sending a message
- Publish the page and confirm the URL works in an incognito browser window.
- Paste the URL into a WhatsApp message composer, but do not send it.
- Wait for the preview above the composer; the documented check allows up to 10 seconds.
- Confirm the title, description and intended image appear, then send a test message to yourself or a private chat.
WhatsApp’s crawler makes an HTTP GET request. A preview is best effort: the developer documentation says WhatsApp may relax requirements, look for other HTML markup or fall back to a small link preview, and that previews are not guaranteed to work or continue working.
An independent checker such as WhaTools’ WhatsApp link preview debugger can reveal missing or malformed Open Graph fields before you test in the app. It is not an official Meta tool and cannot guarantee that WhatsApp will display exactly the same card.
Troubleshooting a missing or stale thumbnail
No preview appears
- Check the early response: fetch the URL and inspect the raw HTML. Ensure the tags are in
<head>and within the first 300 KB, rather than injected only after JavaScript runs. - Check required values: title, description and canonical URL must be non-empty. Ensure
og:imagepoints to the intended absolute address. - Check public access: remove login requirements, IP restrictions and rules that block WhatsApp’s crawler from the page or image. Confirm the image returns successfully over HTTPS.
- Check redirects and canonicalization: use the final, preferred page URL in
og:url, not a tracking or session URL.
The wrong image appears
Look for duplicate og:image tags from a theme, plugin or layout. Remove conflicting values or place the intended one where your platform’s renderer will emit it. Verify that the image URL itself has not been replaced by a redirect or an access-controlled variant.
The image is tiny or cropped oddly
Measure the actual downloaded file, not the source design. Keep it under 600 KB, at least 300 pixels wide and within a 4:1 width-to-height ratio. Re-export a less extreme crop and compress it, then retest.
The old card keeps appearing
The consulted WhatsApp documentation does not state a cache duration or provide a cache-reset tool. Re-paste the unchanged URL after publishing and allow the crawler time to fetch it. A third-party workaround is to change the URL, for example by adding a query parameter, to prompt another fetch; this is not an official or guaranteed cache-clearing method and should not replace a clean canonical URL on the page.
Make previews reliable in production
- Generate a distinct, stable image URL for each page and keep the file available for as long as links may circulate.
- Keep the head small and place metadata near the beginning of the response.
- Use concise titles and descriptions that still make sense when the message is forwarded without context.
- Check every deploy that changes templates, routing, image storage or access-control headers.
- Test representative pages (home, article, product and paginated pages), not just one URL.
There is no documented guarantee that every preview will be generated, so treat the card as an enhancement and ensure the plain URL remains understandable on its own.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. It can capture a rendered page after handling consent banners and removing more than 60 known consent platforms, newsletter popups and chat widgets; each step can be disabled. Only clean shots are billed: bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing, and response headers identify the page verdict and billing status.
For a direct image capture, use the API documented at https://screenshotneo.com/docs/:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/page -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/page"}, timeout=90)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/page' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = Buffer.from(await res.arrayBuffer());
require('fs').writeFileSync('shot.webp', data);ScreenshotNeo also offers full-page and element captures, device presets, custom viewports and retina scale, dark mode, PDF output, custom CSS and JavaScript, selector waits or network-idle waits, request blocking, headers, cookies, user agents, authorization, timezone and geolocation, transparent backgrounds, resizing, configurable caching, signed links, asynchronous webhooks, bulk capture of up to 100 URLs per call, a usage API and an OpenAPI specification. Its parameter names are compatible with those used by other screenshot APIs, which can simplify migration. An MCP server provides take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients.
The Free plan includes 1,000 shots per month with no card. Paid plans start at $5 for 3,000 shots; Growth is $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000 and Business $249 for 1,000,000. Yearly billing gives two months free, and every feature is available on every plan. Create a free ScreenshotNeo account to try it with 1,000 shots a month and no card.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.FAQ
Does WhatsApp require og:type?
The WhatsApp-specific pattern documents the title, description, URL and image tags. The Open Graph protocol defines og:type, but it is not listed as required in that WhatsApp setup.
Can I use a relative image path?
Use an absolute URL. A relative path does not tell an external crawler the complete address of the file.
Will changing the image filename immediately refresh WhatsApp?
It may cause a new fetch, but WhatsApp documents neither a cache duration nor a guaranteed reset mechanism. Test the resulting URL in the composer rather than assuming an update.
Best Value
Frequently Asked Questions
Does WhatsApp require og:type?
The WhatsApp-specific pattern documents title, description, URL and image. og:type is part of Open Graph but is not listed as required there.
Can I use a relative image path?
No. Set og:image to an absolute, publicly reachable URL.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Will changing the image filename immediately refresh WhatsApp?
It can prompt another fetch, but WhatsApp documents no guaranteed cache reset or refresh time.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
