WhatsApp recently updated its link preview system to rely on Accelerated Mobile Pages (AMP) for rendering rich, fast-loading previews. If you have ever shared a URL in a chat and seen a card with an image, title, and description—that is the preview. The new update means that WhatsApp now fetches the AMP version of a page when available, falling back to standard HTML only if no AMP variant exists. For developers who maintain websites or blogs, this change has direct implications for how your content appears in one of the world’s most popular messaging platforms.
Why AMP?
AMP is an open-source framework designed to make web pages load almost instantly on mobile devices. It restricts certain HTML, CSS, and JavaScript patterns to prioritize speed. WhatsApp’s parent company Meta has long used AMP in other products (Facebook Instant Articles, for example) and now extends that to WhatsApp. By serving the AMP version inside the preview, WhatsApp reduces bandwidth usage and improves the user experience—especially on slower connections. For developers, this means that if your site has an AMP version, WhatsApp will prefer it. If you do not have AMP, your standard page will still work, but the preview may be slower or less complete.
What Changed in the Update?
Before this update, WhatsApp fetched a page’s Open Graph (og:) meta tags from the regular HTML to build the preview. It still reads those tags, but now it also requests the AMP HTML (identified by a <html amp> or <html ⚡> attribute) and uses that markup to generate the card. The preview image is taken from the <amp-img> tag or the og:image meta tag inside the AMP document. The title comes from the <title> or og:title, and the description from og:description or the AMP page’s <meta name="description">. If your AMP page lacks these, WhatsApp will fall back to the canonical version.
Key Technical Details
- Discovery: WhatsApp looks for a
<link rel="amphtml">in the canonical page’s head. If present, it fetches that AMP URL. If absent, it checks whether the page itself is an AMP page. - Cache: AMP pages are often served through Google’s AMP Cache (amp.cloudflare.com or cdn.ampproject.org). WhatsApp may retrieve the cached version for speed. This means your AMP page must be publicly accessible and not blocked by robots.txt.
- Security: Because the preview content comes from a third-party cache, developers should ensure their AMP pages use HTTPS and include proper Content Security Policy (CSP) headers to prevent injection. WhatsApp verifies the integrity of the AMP document, but you should still audit your AMP templates for XSS vulnerabilities.
How to Optimize Your Site for WhatsApp Previews
If you already have an AMP version of your site, the most important step is to verify that your Open Graph tags are present and accurate inside the AMP HTML. WhatsApp does not always fall back to the canonical page’s OG tags—it reads them directly from the AMP document. Make sure the following are set in your AMP page’s <head>:
<meta property="og:title" content="..." /><meta property="og:description" content="..." /><meta property="og:image" content="..." /><meta property="og:url" content="..." />
Also include a <link rel="canonical" href="..." /> pointing to the original non-AMP version. This helps WhatsApp and search engines understand the relationship.
Testing Your Preview
Meta provides an official WhatsApp Link Preview Debugger (part of the Facebook Sharing Debugger). You can enter your URL and see exactly how WhatsApp will render the preview. The tool shows whether it found an AMP version, which OG tags it read, and any warnings. Run your URL through it after deploying changes.
Common Pitfalls for Developers
- Missing amphtml link: If your canonical page does not point to the AMP version, WhatsApp may not discover it. Add
<link rel="amphtml" href="; />to the<head>of the canonical page. - Blocked by robots.txt: WhatsApp’s crawler (like Facebook’s) respects robots.txt. If you disallow crawling of your AMP pages, the preview will fall back to the canonical version, which may be slower.
- Dynamic content: AMP pages must be static or server-side rendered. If your AMP page uses client-side JavaScript to populate OG tags, WhatsApp will not see them. Pre-render everything.
- Image size: WhatsApp prefers images at least 600×315 pixels. Smaller images may be ignored or cropped. Use
<amp-img>with explicit width and height.
Security Considerations
Because AMP pages are often cached and served from a different domain, you must ensure that your AMP content does not expose sensitive data. Avoid including personal information, session tokens, or internal URLs in the AMP version. Also, verify that your AMP pages enforce HTTPS and that any external resources (fonts, scripts) are loaded over HTTPS. If your site uses CSP, allow the AMP cache domains (*.ampproject.org, *.cloudflare.com) in the img-src and font-src directives. For a deeper dive into AMP’s architecture and security model, see our earlier post on Dreaming Big with AMP: Important Considerations for Developers.
What If You Don’t Use AMP?
If your site has no AMP version, WhatsApp will still generate a preview from the canonical page’s HTML and OG tags. The preview will work, but it may load slower and might not include rich elements like video or interactive cards that AMP supports. For blogs and static content, implementing AMP is relatively straightforward with frameworks like Next.js (using the @next/amp plugin) or by using a static site generator that outputs AMP-compliant HTML. Beginners can start by creating an AMP version of a single post and testing it with the debugger.
After you have made the changes, the single most effective action you can take is to paste your URL into the WhatsApp Link Preview Debugger, fix any warnings, and then send the link to yourself in a WhatsApp chat to confirm the preview appears as expected. This immediate feedback loop will save you from embarrassing broken cards when your audience shares your content.
