Open Graph Image Size: The 1200×630 Rule

The myth: any image works as a link preview

The myth goes: "the platform will just use my featured image" or "it'll pick something sensible." Sometimes it does — by accident. What's actually happening: when a link is shared, the platform's crawler fetches your page, looks for the `og:image` meta tag, and if it finds nothing, it guesses. The guessing algorithm grabs the largest image on the page, or the first one, or gives up and shows nothing. "Largest image on the page" is how your 2000px sidebar ad becomes the face of your article.

Even when you have an og:image, "any image" fails in specific ways. Too small (under 200×200 on some platforms) and it gets rejected or shown as a tiny thumbnail instead of the large card. Wrong shape and it gets center-cropped — usually right through your headline text. No image at all and you get the gray box of sadness. The platforms are not being difficult; they're rendering your image into a fixed card template, and templates are unforgiving.

The fix is to stop leaving it to chance: create a dedicated 1200×630 image for every important page, set it explicitly in the meta tags, and test it. Fifteen minutes per key page. Your homepage, your top posts, your landing pages — the URLs people actually share.

The 1200×630 rule, and why that exact size

1200×630 pixels is the recommended Open Graph image size, and it's not arbitrary. The 1.91:1 aspect ratio is what Facebook, LinkedIn, and most platforms' "large card" templates are built around. At 1200px wide, the image stays sharp on high-DPI screens when displayed at the typical 500–600px card width (the 2x retina rule again). Under 600px wide and some platforms downgrade you to the small-thumbnail layout — same link, half the visual impact.

The platform specifics, because "1200×630" has footnotes:

• Facebook / LinkedIn: 1200×630 is the documented recommendation. Minimum 200×200 to be accepted at all; under 600×315 gets the small layout.
• X (Twitter): the `summary_large_image` card wants 1200×628 (yes, 628 — two pixels off from OG standard, because nothing can be simple). In practice, a 1200×630 image works fine; the 2px difference is invisible. But if you're pixel-perfect, export both.
• WhatsApp / iMessage / Discord / Slack: all read `og:image` and render large previews from it. WhatsApp is picky about file size — keep it under ~300 KB or it may not render the preview.
• Minimums matter more than maximums: the most common failure is an image that's too small, not too big. When in doubt, 1200×630 exactly.

File format: JPG for photographic cards (smaller), PNG for text-heavy graphics (sharper text). Keep it under 1 MB generally, under 300 KB if WhatsApp previews matter to you. And use absolute URLs in the tag (`https://yoursite.com/og/home.jpg`, not `/og/home.jpg`) — crawlers resolve relative URLs inconsistently, and a broken image URL means no preview.

Safe zones: keep text away from the edges

Here's the detail that separates decent link previews from professional ones: every platform crops your image slightly differently, and text near the edges dies first. X's card trims a few pixels; some mobile layouts zoom the image; Discord's embed has its own aspect quirks.

The safe-zone rule: keep all text and critical elements inside the central 90% of the image — roughly a 60px margin on all sides of a 1200×630 canvas. Backgrounds, gradients, and decorative elements can bleed to the edges; headlines, logos, and calls-to-action stay inside the zone.

Design guidance for the card itself:

• One headline, under 60 characters. The card already shows your page title below the image on most platforms — the image text should complement it, not duplicate it. Think of the image as the billboard and the title as the caption.
• High contrast, always. Cards display small on phones; light text on a dark overlay (or dark text on light) with a scrim behind it. Test by viewing the image at 300px wide — if the headline isn't instantly readable, redesign.
• Brand it lightly. A small logo in a corner inside the safe zone. The card is advertising your content, not your logo — the content headline is the star.
• Faces work. If the content has a human angle, a face on the card outperforms abstract graphics in click-through. Marketing cliché because it's true.

The most common amateur mistake: screenshotting the article header and calling it an og:image. Headers are designed for the page, not the card — wrong ratio, text in the danger zone, tiny type. Design the card deliberately; it's a separate asset.

What each platform actually crops

The 1200×630 master works everywhere, but each platform frames it slightly differently, and knowing the quirks prevents surprises:

Facebook renders the full 1.91:1 faithfully on desktop; on mobile the card is full-width and the image scales proportionally — no crop, just scaling. Your safe zones hold.

X uses the 1200×628 variant of the ratio. The 2px difference from 1200×630 is handled by negligible scaling. The real X quirk: if your image is under ~600px wide or the tags are malformed, it falls back to the small `summary` card — a tiny thumbnail instead of the big image. When a link shows the small card unexpectedly, image size is the first suspect.

LinkedIn follows the OG standard closely at 1200×627-ish rendering. LinkedIn's crawler is slower to refresh its cache than others (up to a week), so test before the big share, not after.

WhatsApp shows a compact preview and enforces the strictest file-size behavior — images over ~300 KB sometimes don't generate previews at all. If WhatsApp previews matter (they do for anything shared in chats), export a lean JPG.

Discord and Slack both unfurl large with the full image. Slack's crawler respects the standard tags; Discord additionally reads the image dimensions from the file itself, so correct actual dimensions (not just the tag claims) matter.

iMessage generates rich previews from og tags on iOS — full-width image, title, domain. It caches aggressively per device; testing on a second device is the only reliable check.

The takeaway: one 1200×630 image, text in the safe zone, under 300 KB if you can manage it, and you survive every platform's framing.

Testing with debuggers (before you share, not after)

Every major platform offers a debugger that shows exactly what its crawler sees — and crucially, lets you refresh the cached preview. Testing after sharing is too late; the broken preview is already in people's feeds. The workflow:

1. Build the image and set the tags (`og:image`, `og:title`, `og:description`, plus `twitter:card` set to `summary_large_image`). 2. Run the URL through each debugger: Facebook's Sharing Debugger, X's Card Validator, LinkedIn's Post Inspector. Each shows the preview as the platform will render it and reports tag errors (missing image, unreachable URL, wrong dimensions). 3. Force a re-scrape. All three debuggers have a "scrape again" / refresh function that clears the platform's cache for your URL. This is the fix for "I updated the image but the old one still shows" — the number one og:image support question in existence. 4. Check the image URL directly in a browser first. If the image 404s or loads slowly for you, the crawler fails too. Absolute URL, publicly accessible, no hotlink protection blocking the crawler's user agent.

The OpenGraph & Social Meta Tag Generator produces the full tag set — OG plus Twitter card tags with the correct absolute-URL structure — so the tags themselves are one less thing to get wrong. Paste the tags, run the debuggers, re-scrape, and your previews are deterministic instead of hopeful.

One caching reality to internalize: platform caches persist for days (LinkedIn up to a week). If you share the link before testing, the broken preview gets cached and your fix won't appear for existing shares — only new ones, after a re-scrape. Test first. Always test first.

Building one that survives everywhere

Let's assemble the spec for a card that works on every platform, first time:

• Canvas: 1200×630px exactly. (Export a 1200×628 variant too if X pixel-perfection matters to you; otherwise the 630 works.)
• Background: photographic or gradient, full-bleed. Dark overlay (40–60% black) if text goes on top.
• Headline: under 60 characters, large, inside the 60px safe-zone margin, high contrast against the background.
• Brand mark: small logo, one corner, inside the safe zone.
• Format: JPG at quality 80–85 for photos (aim under 300 KB); PNG for text/graphic-heavy cards.
• Tags: `og:image` with absolute URL, `og:title`, `og:description` (under ~200 characters — it truncates), `twitter:card` = `summary_large_image`.
• Test: run all three debuggers, force re-scrape, verify on a phone.

Do this for your homepage, your top ten posts, and any landing page you'll share deliberately. That's maybe three hours of work total for a small site, and it permanently upgrades every link you share. The gray box of sadness is optional — and now you know it's a choice.