WhatsApp Open Graph Image Generator

A WhatsApp Open Graph image generator creates the branded image shown in a link preview and helps you publish the metadata WhatsApp uses to find it. Use a 1200×630 pixel image (1.91:1), keep it small enough to fetch quickly, host it at an absolute HTTPS URL, and place the Open Graph tags in the initial HTML response.

What WhatsApp needs for a link preview

Open Graph turns a normal URL into a rich social object. The four required page tags are og:title, og:description, og:image and og:url. The image URL should be absolute and use HTTPS. WhatsApp crawls the shared page and can miss metadata that is injected only after JavaScript runs. The Open Graph protocol documentation defines the core fields, while WhatsApp link-preview documentation explains the crawler behavior.

<head>
  <meta property='og:title' content='Your page title'>
  <meta property='og:description' content='A concise description of the page.'>
  <meta property='og:image' content='https://example.com/og/your-page.jpg'>
  <meta property='og:url' content='https://example.com/your-page'>
  <meta property='og:type' content='website'>
  <meta property='og:image:width' content='1200'>
  <meta property='og:image:height' content='630'>
</head>

Image size, format and safe-area rules

Setting	Recommendation	Reason
Canvas	1200×630 px	Universal 1.91:1 Open Graph recommendation. Source
File size	Keep below 300 KB when possible	Images above 300 KB may be omitted from WhatsApp previews. Source
Format	JPEG, PNG or WebP	Choose based on photographic detail, transparency and browser support.
URL	Absolute HTTPS URL	WhatsApp must fetch the image independently of your page.

Design the card so the subject and any essential text stay well inside the edges. Preview surfaces can crop or scale the image differently. Check the result in a WhatsApp conversation before publishing. OpenGraph Studio documents a crop, compression and WhatsApp-preview workflow.

How to generate a WhatsApp OG image

1. Choose a source. Start with a template, product image, illustration or background color. Dynamic sites can fill the template from page data.
2. Compose at 1200×630. Put the title, brand mark and main visual inside a generous safe margin. Avoid tiny text.
3. Export and compress. Use JPEG for photographic cards, PNG when transparency or sharp graphics matter, and WebP when your delivery path supports it. Check the final byte size.
4. Publish the asset. Upload it to a stable HTTPS URL that does not require cookies, authentication or a short-lived token.
5. Add initial-response metadata. Put the tags in the server-rendered <head>, not only in a client-side component.
6. Preview and republish. Paste the page URL into a preview/debugger, inspect the crop and title, then regenerate the image or metadata if needed.

Simple Pillow generator

The following Python script creates a 1200×630 JPEG card. Install Pillow with python -m pip install pillow, replace the text and background path, then upload the resulting file to your HTTPS host.

from PIL import Image, ImageDraw, ImageFont

WIDTH, HEIGHT = 1200, 630
image = Image.new('RGB', (WIDTH, HEIGHT), '#132238')
draw = ImageDraw.Draw(image)
font = ImageFont.truetype('DejaVuSans-Bold.ttf', 64)
small = ImageFont.truetype('DejaVuSans.ttf', 30)

draw.rounded_rectangle((70, 70, WIDTH - 70, HEIGHT - 70), radius=28, fill='#1f3a5b')
draw.text((120, 150), 'Your article title', font=font, fill='white')
draw.text((120, 245), 'A short description for the preview', font=small, fill='#d9e7f5')
image.save('whatsapp-og.jpg', quality=82, optimize=True, progressive=True)
print('wrote whatsapp-og.jpg')

Dynamic and template-based generation

For a site with many pages, store a template and render the title, category, author or product data into it at request time or during a build. Cache the finished image at a stable URL so WhatsApp and other crawlers do not trigger a render for every request. HTML/CSS-to-image services are suited to this approach; HTML/CSS to Image describes dynamic OG rendering and caching. Browser-based tools such as BetterImage are useful when marketers need repeatable branded templates, while OpenGraph.dev focuses on previewing cards and generating tags.

Inspecting and validating your implementation

curl -I https://example.com/og/your-page.jpg
curl -s https://example.com/your-page | grep -E 'og:(title|description|image|url)'

Confirm that the image responds with a successful status, a real image content type and no login redirect. Open the page with JavaScript disabled or view the raw response to ensure the OG tags are present before hydration. Then use a preview tool to inspect the actual crop. One asset can support WhatsApp, Facebook, LinkedIn, Slack, Discord and similar channels when they accept the same 1200×630 card format.

Or skip the browser setup

ScreenshotNeo captures a page or generated card with one API request, so you do not need to maintain a browser, viewport code or image-export pipeline. Cookie banners, newsletter popups and chat widgets are removed before the shot. Bot checks, blank pages and failed loads are never billed, and response headers identify the page verdict and billing status. Its MCP server lets AI agents call take_screenshot, get_page_info and capture_pdf.

See the ScreenshotNeo API documentation for all options. This call captures a page as WebP:

curl -G 'https://api.screenshotneo.com/v1/shot' \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com/your-page \
  -o shot.webp

import requests
r = requests.get('https://api.screenshotneo.com/v1/shot', params={'access_key': 'YOUR_API_KEY', 'url': 'https://example.com/your-page'}, timeout=90)
r.raise_for_status()
open('shot.webp', 'wb').write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/your-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 includes full-page capture, element selection, custom CSS and JavaScript, waits for selectors or network idle, device presets, retina scale, caching, signed links and bulk capture. The Free plan includes 1,000 screenshots each month with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.

Troubleshooting missing or incorrect previews

Symptom	Likely cause	Fix
No image appears	Image URL is relative, HTTP, blocked or too large.	Use an absolute HTTPS URL, allow anonymous fetching, return an image content type and compress below 300 KB.
Old image persists	Crawler or platform cache.	Change the asset URL (for example, a versioned filename), republish the page and recheck with a debugger.
Title or description is wrong	Duplicate tags, incorrect attribute or stale HTML.	Keep one value for each property, use property='og:title', and inspect the raw initial response.
Preview is cropped badly	Important content touches the edge or uses a different aspect ratio.	Recompose on a 1200×630 canvas with safe margins and preview it before release.
Image loads in a browser but not WhatsApp	Authentication, robots/network blocking, redirect chain or slow origin.	Serve a public stable URL, reduce redirects, verify with curl -I and optimize file size.
Tags work locally but not in production	Production template injects metadata after JavaScript.	Render OG tags on the server or at build time.

Performance, reliability and cost considerations

• Generate cards during builds or on first request, then cache them at immutable, versioned URLs.
• Keep the image payload small; this reduces crawler timeout risk and bandwidth.
• Use deterministic templates so the same URL always produces the same card until you intentionally version it.
• Monitor image status codes and content types. A successful HTML response with an image extension is still a broken card.
• When capturing pages with ScreenshotNeo, use caching with a TTL you choose and inspect X-Page-Verdict and X-Billed to distinguish clean shots, failures and cache hits. Failed loads and cache hits cost nothing.

FAQ

What is the best WhatsApp OG image size?

Use 1200×630 pixels, a 1.91:1 ratio. Keep the file under 300 KB when possible.

Does WhatsApp use Twitter Card tags?

The core implementation is Open Graph: og:title, og:description, og:image and og:url. Add platform-specific tags only when another channel requires them.

Can the image URL be relative?

No. Publish an absolute HTTPS URL that a crawler can fetch without a session.

Why does changing the image not update immediately?

Preview systems cache fetched metadata and assets. Version the image URL and republish after checking the new response.

Can one generated card serve other social networks?

Yes. A well-designed 1200×630 card is commonly reused for Facebook, LinkedIn, Slack, Discord and other Open Graph consumers.