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.

Quick answer

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.

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

Browser-based workflows for open graph image sizing depend on file size, browser memory, and how the source file was created. Very large files, password-protected inputs, or unusual encodings may fail without a desktop alternative. Always keep an original copy before batch processing.

When not to use this approach

Skip browser-only processing when compliance requires audit logs, when files exceed practical browser limits, or when you need features your browser tool does not expose (bookmarks, form fields, digital signatures). In those cases, use dedicated desktop software or an approved enterprise pipeline.

Related tools

• Crop Image
• Resize Image
• Compress Image

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.

Putting this into practice this week

Pick one workflow from this article and run it on a real task today — not a hypothetical. If the guide covers PDF export, export one document you already need for work. If it covers image naming, rename one messy folder. Knowledge retained from doing beats knowledge retained from reading.

Questions to ask before you delegate

When handing a process to a teammate or virtual assistant, ask: "What would break if you skipped step three?" If they can't answer, the process isn't documented enough. Add the missing step to your internal wiki with a link to this guide and the relevant tool page.

How this connects to the broader site

Utility-first sites win when guides and tools reinforce each other. Bookmark the tool URL alongside this article. Share the article link when onboarding someone who'll use the tool weekly — context reduces support messages asking the same formatting question twice.

Common "it worked yesterday" causes

Software updates change export defaults. Browser updates change PDF print behavior. CDN cache serves old image after you uploaded new asset. When workflows break without code changes, check version changelogs before blaming user error. First troubleshooting step: reproduce in clean browser profile with extensions disabled.

When to escalate to a specialist

Tax, legal, medical, and enterprise security topics in adjacent guides sometimes require professional advice. Articles like this explain operational literacy — not professional services. Escalate when stakes exceed convenience (court filing, audit response, M&A data room, HIPAA-covered PHI).