Open Graph Image Generator

Open Graph image: the 1200×630 banner every shared link deserves

The Open Graph image is the hero banner that shows up when someone shares your page on Facebook, LinkedIn, WhatsApp, Slack, Discord, X (formerly Twitter), Telegram, iMessage, or any modern messenger that previews links. It comes from the Open Graph Protocol, introduced by Facebook in 2010 at ogp.me, and is the single most impactful image asset on a page from a marketing perspective — a link with a good OG image generates roughly two to three times more clicks than a link without one. Without an explicit og:image, the platform scrapes the first image of the page, which is almost always a logo, a tracking pixel, or an inline emoji.

HTML markup

<meta property="og:image" content="https://example.com/og/post.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Cover for the article: How to build fast APIs">
<meta property="og:image:type" content="image/png">

The og:image URL must be absolute, served over HTTPS, and publicly reachable — pages behind a login or staging basic-auth are silently ignored. Always include og:image:width and og:image:height so the platform can reserve the layout slot before downloading; og:image:alt for screen-reader users; and og:image:type for older crawlers that do not sniff the MIME.

Recommended dimensions

• 1200 × 630 px (1.91:1) — the canonical size. Used by Facebook, WhatsApp, LinkedIn, X summary_large_image, Slack, Discord, Telegram, iMessage. Pick this if you only ship one image.
• 1200 × 627 px — LinkedIn's published preference, virtually identical to 1200×630.
• 200 × 200 px minimum — Facebook's hard floor. Below this, the platform refuses the image and falls back to a tiny thumbnail.
• 1:1 (square) — for X's twitter:card = summary (small thumbnail card), minimum 144×144, recommended 400×400.

Anything significantly larger than 1200×630 is fine — Facebook serves up to 8 MB — but the platform will downscale to roughly 1200 wide, so there is no display benefit from oversize files. Anything smaller is upscaled with visible blur.

Safe text area

Different clients crop the image differently. iMessage renders the full 1.91:1 rectangle, but X clients sometimes recrop to a tighter 2:1 ratio, and the Facebook in-app browser pads the sides. Keep critical text and logos within a centered 1100×600 safe zone, leaving roughly 50 pixels of margin on each side. Headlines under 60 characters render comfortably at 60–80 pt; pad lines to avoid widows on the second line.

File format and weight

• JPEG — for photographs and gradient-heavy designs. Quality 80 typically gives a 100–300 KB file.
• PNG — for designs with text, sharp edges, or large flat color regions. Compress with oxipng -o4 or pngquant --quality 70-90.
• WEBP — supported by Facebook, X, LinkedIn, WhatsApp. Smaller than both JPEG and PNG, but a few legacy clients still fall back. Ship a JPG fallback if you care about the long tail.
• SVG — not supported. Facebook, X, LinkedIn, and WhatsApp do not render SVG in OG slots. Convert to PNG before publishing.
• Animated GIF — accepted but rarely animated. Most platforms freeze on the first frame, so design the first frame as the static fallback.

Maximum file size: 8 MB on Facebook, 5 MB on LinkedIn, 3 MB on X. A well-compressed 1200×630 image fits in 80–250 KB.

Generating OG images dynamically

For sites with many pages (blogs, ecommerce, SaaS dashboards), shipping a hand-designed image per URL is impractical. Modern stacks generate OG images on demand:

• @vercel/og — Edge runtime renderer using Satori (JSX → SVG → PNG). Used by Vercel, Next.js, Cloudflare Workers.
• satori — pure JS library, framework-agnostic.
• Next.js ImageResponse — built-in helper that wraps Satori for App Router.
• Puppeteer / Playwright — render a hidden HTML page and screenshot it. Heavier but supports any CSS feature.
• node-canvas / Browser <canvas> — direct 2D context drawing. Maximum control, more code.

Cache invalidation

Facebook caches OG metadata aggressively — sometimes for weeks. After editing the image or any OG tag, paste the URL into the Facebook Sharing Debugger (developers.facebook.com/tools/debug) and click "Scrape Again". LinkedIn has a similar Post Inspector, and X has the deprecated Card Validator. WhatsApp piggybacks on the Facebook cache, so refreshing the FB debugger usually fixes WhatsApp too. A common trick to force a refresh in the wild without debugger access is to append a versioned query string to the OG image URL.

FAQ

Does it have to be exactly 1200×630? Practically yes. Other aspect ratios get center-cropped on X and stretched or letterboxed on Facebook. 1200×630 is the safe intersection of every major platform's preferred dimensions.

Can I use SVG? No. Facebook, X, LinkedIn, and WhatsApp do not render SVG in the OG image slot. Convert to PNG or JPEG.

Can og:image be a data URI? No. Crawlers fetch the URL with a separate HTTP request and ignore data: URIs. The image must be a publicly reachable HTTPS URL.

Why does Facebook still show my old image after I updated the file? Aggressive caching. Run the page through the Facebook Sharing Debugger and click "Scrape Again", or rename the image file so the URL changes.

Should I serve a different image to X? Optional. X reads twitter:image first and falls back to og:image. If you want a tighter 2:1 framing for X clients that recrop, ship a separate twitter:image; otherwise let X reuse the OG asset.