Zooky — OG Image APIBlog ← back to zooky.net

The Complete Guide to Open Graph Images: Sizes, Meta Tags, and the Mistakes That Break Your Previews

2026-07-12 · Zooky — OG Image API

Every time someone pastes your link into X, Slack, Discord, LinkedIn, iMessage, or WhatsApp, a crawler fetches the page, reads a handful of <meta> tags, and draws a preview card. That card is your first impression — people see it before your headline, before your design, before a single word of your copy. And yet a surprising number of sites either ship no og:image at all, or ship one that gets cropped, blurred, or silently dropped.

This guide covers everything you need to get link previews right: the one image size that works everywhere, the exact meta tags to copy into your <head>, and the seven mistakes we see break previews most often.

The one size that works everywhere: 1200 × 630

Open Graph images should be 1200 × 630 pixels — a 1.91:1 aspect ratio. That's the size Facebook, LinkedIn, Slack, Discord, and WhatsApp all render without cropping, and it's large enough that no platform upscales it into blur.

Two things to know beyond the headline number:

  • X (Twitter) crops large cards closer to 2:1, so keep titles and faces away from the very top and bottom edges. Anything in the middle 90% of the image is safe everywhere.
  • Bigger is fine, smaller is not. Platforms downscale gracefully, but images under roughly 600 × 315 get upscaled or demoted to a tiny thumbnail card. There is no good reason to go below 1200 × 630 in 2026.

Square (1080 × 1080) images have their place — some feeds and messengers render them well — but if you're shipping one image per page, ship 1.91:1.

The meta tags you actually need

This is the complete set. Everything else is optional garnish.

<!-- Open Graph: Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage -->
<meta property="og:title" content="How We Cut Build Times by 80%" />
<meta property="og:description" content="A practical walkthrough of our CI overhaul." />
<meta property="og:image" content="https://zooky.net/api/og?title=How%20We%20Cut%20Build%20Times%20by%2080%25&theme=midnight" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

<!-- X / Twitter -->
<meta name="twitter:card" content="summary_large_image" />

Three details that matter:

  1. og:image must be an absolute HTTPS URL. Not a path, not protocol-relative.
  2. The og:image:width / og:image:height hints let some platforms lay out the card before the image finishes downloading — cheap insurance against a blank first render.
  3. You don't need twitter:title or twitter:image — X falls back to the Open Graph tags. You do need twitter:card, and we'll get to why.

The seven mistakes that silently kill previews

1. A relative or HTTP image URL. Crawlers are inconsistent about resolving relative paths, and several refuse plain HTTP outright. If your preview works on one platform and not another, check this first.

2. Forgetting twitter:card. With Open Graph tags alone, X renders the small "summary" card — a thumbnail beside two lines of text — instead of the full-width image. One meta tag (summary_large_image) is the difference.

3. The image is unreachable to bots. Auth walls, aggressive bot rules, and firewall geo-blocks all return 403s to crawler user agents like facebookexternalhit and Slackbot-LinkExpanding. Your browser sees the image; the crawler sees nothing. Verify with: curl -sI -A "facebookexternalhit/1.1" https://yoursite.com/card.png

4. Wrong aspect ratio. A square logo dropped into og:image gets cropped to a random horizontal slice on most platforms. If your "preview image" is your logo with the top and bottom cut off, this is why.

5. Wrong format. SVG is essentially unsupported for link previews. Stick to PNG or JPEG. Animated GIFs show their first frame on most platforms — don't count on the animation.

6. Too slow. Crawlers wait a few seconds, not thirty. If your og:image is generated on demand behind a cold-starting function, some scrapers will time out and cache the failure. Keep the endpoint fast and cache the output.

7. Stale caches. Facebook and LinkedIn cache scraped previews aggressively — sometimes for weeks. If you change your image and nothing updates, either force a refetch (Facebook Sharing Debugger, LinkedIn Post Inspector) or bust the cache by versioning the URL: ...&v=2.

How to test a preview before you post

  • Paste the link into a private Slack or Discord channel. Both fetch fresh previews for URLs they haven't seen, and they're strict enough to catch most problems.
  • Facebook Sharing Debugger and LinkedIn Post Inspector show you exactly what their scrapers see and let you force a re-scrape.
  • curl with a crawler user agent (see mistake #3) confirms your server isn't blocking bots.

Making one image per page without opening Figma

Hand-designing cards works for a five-page site. It stops working the moment you have a blog, docs, a changelog — anything where pages outnumber your patience.

The scalable version: since og:image is just a URL, point it at an endpoint that renders the image on request. That's what Zooky does — a GET request returns a finished PNG:

https://zooky.net/api/og?title=Your%20Post%20Title&subtitle=yoursite.com&theme=aurora

Pick from seven designer themes (aurora, midnight, sunset, mint, ocean, and more), add a badge for category labels, and choose Open Graph (1200 × 630), square (1080 × 1080), or wide (1600 × 840) output. The free tier needs no signup — 50 images an hour with a small watermark — so you can test it from your browser's address bar right now. Pro is $12/month for no watermark and 10,000 images a month.

However you generate the image, get the meta tags above into your <head> this week. Every blank preview is a dead click, and this is one of the highest-leverage hours you can spend on your site.

The correct og:image size, the exact meta tags you need, and the seven mistakes that silently break link previews on X, Slack, LinkedIn, and Discord.

Try Zooky — OG Image API free