Open Graph Tags for WhatsApp: Link Previews & Chat Thumbnails

WhatsApp is the most popular instant messaging platform globally, handling over 100 billion messages every single day. When users paste a website URL into a WhatsApp chat on iOS, Android, or WhatsApp Web, WhatsApp fetches the page metadata and renders an inline preview card. A clear image thumbnail, compelling headline, and descriptive snippet give recipients immediate confidence to click through, while a missing preview or broken image reduces engagement.

In this comprehensive guide, you will learn how WhatsApp scrapes Open Graph metadata, why WhatsApp enforces a strict 300 KB image file size limit, how to structure square and landscape images for mobile chats, and how to test your URLs with our free Open Graph Inspector.

---

How WhatsApp Scrapes Link Previews

When a user pastes a URL into a WhatsApp message input field, the client app pauses for 1–2 seconds and triggers an asynchronous HTTP request using WhatsApp’s backend crawler (WhatsApp/2.x.x).

<!-- Complete WhatsApp Compatible Open Graph Markup -->
<meta property="og:site_name" content="Open Graph Generator" />
<meta property="og:title" content="Open Graph Tags for WhatsApp: Chat Preview Guide" />
<meta property="og:description" content="Generate instant WhatsApp chat thumbnails with optimized image compression and meta tags." />
<meta property="og:url" content="https://opengraphgenerator.com/blog/og-for-whatsapp/" />
<meta property="og:image" content="https://opengraphgenerator.com/images/whatsapp-thumb.jpg" />
<meta property="og:image:secure_url" content="https://opengraphgenerator.com/images/whatsapp-thumb.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="800" />

How WhatsApp Parses Each Meta Property

1. og:title: Displays as bold text at the top of the chat bubble. WhatsApp truncates titles after approximately 60 characters.
2. og:description: Displays in smaller font below the title. Truncates after approximately 120 to 150 characters.
3. og:image: Rendered as a thumbnail. WhatsApp prioritizes lightweight JPEG and WebP assets.
4. Root Domain URL: WhatsApp renders the apex domain (e.g. opengraphgenerator.com) in muted text directly below the card.

---

The Critical 300 KB Image Size Limit

The single most common reason WhatsApp fails to generate a link preview thumbnail is image file size.

• WhatsApp Hard Limit: WhatsApp will silently drop preview images larger than 300 KB.
• Recommended File Size: Keep your image asset between 50 KB and 200 KB.
• Supported Formats: JPEG, PNG, and WebP. JPEG and optimized WebP offer the best compression-to-quality ratio.

[!WARNING] While Facebook and LinkedIn accept 5 MB to 8 MB images, WhatsApp requires strict lightweight assets. If your high-resolution 1200×630px banner is 600 KB, WhatsApp will display a text-only link without an image thumbnail.

---

Square vs. Landscape: Optimizing for WhatsApp Layouts

WhatsApp renders thumbnails differently depending on the operating system and client version:

Client	Aspect Ratio	Rendered Layout	Recommended Dimensions
WhatsApp Android	1:1 (Square) or 1.91:1	Renders small square thumbnail to the left of title/description	800 × 800 px (Square)
WhatsApp iOS	1.91:1 (Landscape)	Displays full-width banner on rich links, square thumbnail on standard messages	1200 × 630 px (Landscape)
WhatsApp Web / Desktop	1:1 (Square)	Small square thumbnail beside title and URL	800 × 800 px (Square)

Recommended Sizing Strategy:

• Option A (Universal Social Banner): 1200 × 630 px (Under 300 KB) — Works well on iOS, Facebook, Twitter, and LinkedIn. Keep vital graphics centered.
• Option B (Square Thumbnail): 800 × 800 px (Under 150 KB) — Produces the sharpest, uncropped rendering on WhatsApp Android and Web.

Explore multi-platform dimensions in our Social Image Dimensions Reference Guide.

---

WhatsApp Crawler Behavior & Technical Rules

• User-Agent Header: WhatsApp/2.23.x.x N or WhatsApp/0.4.x
• Timeout Window: WhatsApp gives your server 1.5 to 2.5 seconds to return the initial HTML. If server response time is delayed, WhatsApp abandons the preview generation.
• HTTPS Requirement: Links must use valid SSL/TLS certificates. Verify your security configuration with our Security Headers Tool.
• Single Redirect Maximum: WhatsApp follows only 1 redirect hop. Avoid redirect chains from HTTP to HTTPS or non-trailing-slash to trailing-slash URLs. Check redirects with our Broken Links Finder.

---

Multi-Framework Code Setup

1. Automated WhatsApp Image Compression with Sharp / Node.js

const sharp = require('sharp');

async function generateWhatsAppThumb(inputBuffer) {
  return await sharp(inputBuffer)
    .resize(800, 800, { fit: 'cover', position: 'center' })
    .jpeg({ quality: 80, progressive: true })
    .toFile('./public/images/whatsapp-thumb.jpg');
}

2. Dynamic Open Graph in Astro Pages

---
interface Props {
  title: string;
  description: string;
  image: string;
  url: string;
}

const { title, description, image, url } = Astro.props;
---
<head>
  <title>{title}</title>
  <meta name="description" content={description} />
  <link rel="canonical" href={url} />

  <!-- Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:url" content={url} />
  <meta property="og:image" content={image} />
  <meta property="og:image:width" content="800" />
  <meta property="og:image:height" content="800" />
  <meta property="og:image:type" content="image/jpeg" />
</head>

3. Next.js App Router Route Handler (app/blog/[slug]/page.tsx)

import { Metadata } from 'next';

export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.slug);

  return {
    title: post.title,
    description: post.summary,
    openGraph: {
      title: post.title,
      description: post.summary,
      url: `https://example.com/blog/${params.slug}/`,
      images: [
        {
          url: post.thumbnailUrl, // Under 300KB
          width: 800,
          height: 800,
          type: 'image/jpeg',
          alt: post.title,
        },
      ],
    },
  };
}

---

Troubleshooting: Why WhatsApp Won’t Show Your Link Preview

1. You Shared the Link Too Fast

WhatsApp needs 1–2 seconds to fetch metadata after you paste the URL into the chat input. If you press “Send” immediately, WhatsApp sends the raw text before the preview payload finishes loading.

• Fix: Paste the URL, wait for the preview card to render above the input box, and then press send.

2. Stale Mobile Cache

WhatsApp caches link previews locally on the user’s device and across WhatsApp proxy servers.

• Fix: Add a cache-busting parameter (e.g. https://example.com/page/?w=1).
• For detailed cache-clearing instructions, read our guide on Fixing Cached LinkedIn & WhatsApp Link Previews.

3. Missing Fallbacks

If Open Graph tags are missing, WhatsApp attempts to scrape standard HTML tags:

• Title: <title>
• Description: <meta name="description">
• Image: First <img> tag in the HTML body (often results in broken icons or logos).

---

Cross-Platform Synergy

Ensure your Open Graph configuration caters to all messengers:

• Slack: Slack Open Graph Guide
• Discord: Discord Embed Guide
• LinkedIn: LinkedIn Feed Optimization
• Facebook: Facebook Sharing Debugger Guide

---

Complete WhatsApp Link Optimization Checklist

1. Keep og:image under 300 KB (target 100–200 KB in JPG or WebP).
2. Use concise headlines: og:title under 60 characters.
3. Limit descriptions: og:description under 150 characters.
4. Ensure server TTFB is under 1 second.
5. Add Structured Schema.org Data: Generate verified schema with our JSON-LD Schema Generator.
6. Provide AI Agent Knowledge Context: Explore our Open Knowledge Format (OKF) Generator.

Preview and generate optimized WhatsApp meta tags instantly using our free Open Graph Generator!