Open Graph Image Sizing — What Breaks on Social Previews

A product launch tweet showed our hero square logo — cropped to a center sliver. The og:image pointed at a 1080×1080 Instagram export. LinkedIn wanted 1.91:1. The algorithm center-cropped until only the icon's corner remained.

Open Graph images are billboards at thumbnail scale. Wrong dimensions don't fail silently — they fail publicly.

What Open Graph does

When someone shares your URL, crawlers read:

<meta property="og:image" content="https://example.com/og/launch.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

The image appears in link previews — often the difference between a click and a scroll-past.

Recommended dimensions (2026)

| Platform | Recommended | Aspect | Notes | | --- | --- | --- | --- | | Facebook / Meta | 1200×630 | 1.91:1 | Min 600×315 | | LinkedIn | 1200×627 | ~1.91:1 | Similar crop behavior | | Twitter/X large card | 1200×600 | 2:1 | Set twitter:card | | Slack | 1200×630 | 1.91:1 | Unfurl from OG tags | | Discord | 1200×630 | 1.91:1 | Uses OG when present |

Default safe choice: 1200×630 PNG or JPEG under 5 MB (under 1 MB preferred for speed).

Safe zone for text and logos

Platforms may crop slightly on mobile. Keep critical content inside center 80%:

• Title: max 2 lines, 60–80 px font at 1200 width
• Logo: corner or center, not bleeding to edges
• Avoid thin borders that disappear when scaled

Design OG templates in Figma at exact export size — not "scale down from poster."

Use Crop Image to reframe existing art to 1.91:1. Resize Image if source is larger; avoid upscaling small assets — see Hero Image Weight Budgets.

File format and weight

• JPEG — photos, gradients, smaller files at Compress Image quality 80–85
• PNG — flat graphics, text overlays, sharp logos
• WebP — growing support but verify each platform; JPEG/PNG safest for OG today

Heavy OG images slow crawlers and hurt Lazy Loading Mistakes on your own page if you mistakenly reuse the same 2 MB hero without separation.

Dynamic OG images

Next.js opengraph-image.tsx generates images per route — great for tool pages and blog posts. Ensure:

• Font files embedded or system fallback readable
• Template tested at 1200×630
• Cache headers on generated routes

For content strategy on tool pages, see Helpful Content on Tool Pages.

Meta tag completeness

Minimum set:

<meta property="og:title" content="..." />
<meta property="og:description" content="..." />
<meta property="og:image" content="absolute HTTPS URL" />
<meta property="og:url" content="canonical URL" />
<meta property="og:type" content="website" />

Absolute URLs for images — relative paths break crawlers. HTTPS required on most platforms.

Testing workflow

1. Deploy page with final OG image
2. Facebook Sharing Debugger — Scrape Again after changes
3. LinkedIn Post Inspector
4. Share to private Slack channel test
5. Verify mobile preview crop

Caches persist days — changing filename (og-launch-v2.jpg) forces refresh faster than same URL overwrite.

Common failures

| Symptom | Likely cause | | --- | --- | | Wrong random image | Missing og:image; crawler picked first <img> | | Blurry preview | Image under 600px wide | | Square cropped badly | Wrong aspect ratio | | No image | robots.txt blocked crawler; auth wall | | Stale image | Platform cache; use debugger refresh |

OG vs favicon vs hero

• Favicon — 16–512px, tab icon — Favicon Format Sizes
• Hero — on-page LCP image, may be portrait
• OG — landscape billboard for shares

Don't point og:image at favicon.ico or skinny blog featured crops without checking aspect ratio.

Accessibility and branding

OG images aren't read by screen readers on your site — but they're marketing. Maintain contrast for WCAG Contrast on Image Text when overlaying headlines.

Troubleshooting

What is the recommended Open Graph image size? The widely supported standard is 1200×630 pixels (1.91:1 aspect ratio). This works for Facebook, LinkedIn, Slack, and many other platforms. Minimum widths below 600px often produce small or blurry previews.

What happens if my OG image is the wrong size? Platforms crop center, letterbox with gray bars, or pick a random page image instead. Square logos get clipped. Tall images lose top and bottom content.

Is og:image the same as twitter:image? Twitter/X cards use twitter:image, often with summary_large_image expecting 2:1 ratio similar to OG. Many sites set both to the same 1200×630 asset for consistency.

Limitations

When not to use this approach

Conclusion

Ship 1200×630 OG images with text in the safe zone, absolute HTTPS URLs, and platform debugger verification.

Square Instagram assets are not OG assets. One template aspect ratio saves every launch from embarrassing crops.

Platform-specific gotchas

Slack unfurls may cache 7+ days — filename versioning critical. Discord embeds max width ~400px display but still benefits from 1200px source. iMessage link previews crop aggressively on square sources. Email clients that generate link previews (some CRMs) pull OG tags — test sales sequences.

Brand template system

Maintain Figma component with locked safe zone, export presets for 1200×630, and variable text layers bound to CMS fields for programmatic OG generation in Next.js opengraph-image.tsx.

A/B testing social images

Some teams A/B OG images for blog posts — track CTR from social analytics UTM parameters. Change image URL when testing; never reuse same URL for different creative.