TechCompare LogoTechCompare

WhatsApp link previews: how they work and why og:image dimensions matter more here

WhatsApp generates link previews for URLs shared in chats using og:title, og:description, and og:image. The preview appears after a short delay while WhatsApp's servers fetch and cache the page. The critical difference from other platforms: WhatsApp has a strict 300 KB image size limit. If og:image is larger than 300 KB, WhatsApp shows no image at all.

Platform or focus
Platforms
Social media and messaging apps
Topic detail
WhatsApp previews
whatsapp

How this is calculated

A 1200x630 PNG can easily exceed 300 KB, especially with photographic content. The fix is to use JPEG for the OG image at 80-85% quality, which typically keeps a 1200x630 image under 200 KB while looking identical for social preview purposes. WhatsApp also requires the image to be at least 200x200 pixels. If the page has multiple og:image tags, WhatsApp uses the last one. The preview is cached on WhatsApp's servers, and unlike Facebook or LinkedIn, there's no public debugger to force a refresh. To test changes, send the URL with a cache-busting query parameter in a chat to yourself.

Verdict

OG image file size is the number one issue with WhatsApp previews. Keep it under 300 KB, use JPEG, and test by messaging yourself. Once WhatsApp caches a bad preview, it's hard to fix without changing the URL.

More OG scenarios

OG image dimensions
image-dimensions
View details ➜
Twitter Card types
twitter-cards
View details ➜
Facebook vs Twitter tags
facebook-vs-twitter
View details ➜
Discord embeds
discord-embeds
View details ➜
LinkedIn OG tags
linkedin
View details ➜
Slack unfurling
slack-unfurl
View details ➜
iMessage previews
imessage
View details ➜
OG debugger tools
debugger-tools
View details ➜
Structured data vs OG
structured-data-vs-og
View details ➜
OG tag generator
tag-generator
View details ➜
OG image design
image-design
View details ➜

Frequently asked questions

What are Open Graph meta tags?
Open Graph meta tags are snippets of code in your website's <head> that control how your page appears when shared on social media. They allow you to define a specific title, description, and image that platforms like Facebook, Discord, and LinkedIn will display.
Why do I need a separate twitter:card tag?
While many platforms fallback to Open Graph (og:) tags, Twitter uses its own specific meta tags (twitter:card, twitter:image, etc.) to format link previews. Providing both ensures maximum compatibility across all platforms.
What is the best image size for Open Graph?
The recommended size for an Open Graph image is 1200x630 pixels. This creates a 1.91:1 aspect ratio, which is the standard size used by almost all major social platforms for large preview cards.
How do I test if my tags are working live?
Once deployed, you can use official debuggers like the Facebook Sharing Debugger or the Twitter Card Validator. This visualizer tool helps you preview and generate the tags locally before you deploy them.

Related tools

JSON Formatter

Validate, format, and minify JSON data with syntax highlighting.

Use tool ➜

Text Encoding Converter

Convert between Text, Base64, Binary, Hexadecimal, and Decimal formats.

Use tool ➜

Color Picker

Pick colors and convert between HEX, RGB, HSL, CMYK, and HSV formats.

Use tool ➜