Open Graph Image Size, Aspect Ratio, and Safe Zones

The safest default Open Graph image is 1200 × 630 pixels, an aspect ratio of about 1.91:1. That recommendation is simple; the way platforms crop, compress, cache, and overlay your image is not.

A robust social card keeps important content away from the edges, uses readable text at thumbnail size, and includes complete metadata. Use the Open Graph Preview to inspect the card before publishing.

Recommended canvas

Create a landscape image with:

• Dimensions: 1200 × 630 px
• Aspect ratio: 1.91:1
• Format: JPEG for photographs; PNG for flat graphics or text-heavy artwork
• Colour mode: RGB
• File size: ideally below 1 MB; stay well below 5 MB
• Image URL: absolute HTTPS URL, publicly reachable without cookies

Platforms can accept other sizes, but 1200 × 630 gives enough detail for high-density screens and scales cleanly into the common large-card layout.

Do not treat the OG image as a screenshot of your whole page. It is a small promotional card with one message.

Use a central safe zone

Different previews may crop the image, round its corners, or cover an edge with a domain label. Keep the core message inside the central area:

• Leave about 60 px clear on the left and right.
• Leave about 40 px clear on the top and bottom.
• Keep logos, faces, and important words inside the central 80%.
• Avoid placing essential text in the lower-right corner.

These margins are not a platform specification. They are a practical defence against small crops and UI overlays.

For square or compact previews, a wide image may be centre-cropped. Place the subject near the centre and make the image understandable even when some background disappears.

Text that survives thumbnail size

Social previews often render at 300–600 CSS pixels wide. A headline that looks elegant on a 1200 px canvas may become unreadable after scaling.

Use:

• One short headline, usually 6–10 words.
• Large type with strong weight and contrast.
• Two lines at most.
• A small logo or site name as secondary information.
• Generous spacing around every text block.

Avoid reproducing the full page title, description, date, author, category, and call to action inside the image. The surrounding card already displays much of that metadata.

A useful test is to zoom the design down to 25%. If the headline cannot be read immediately, simplify it.

How major surfaces differ

Exact layouts change, but these broad patterns are durable:

Surface	Typical behaviour	Design implication
Facebook	Large landscape card when metadata is complete	1200 × 630 works well
LinkedIn	Landscape preview with title and domain nearby	Keep image text concise
X / Twitter	Large card needs summary_large_image	Include Twitter card tags too
Slack / Discord	Unfurl may show image beside or below text	Strong centre subject helps
WhatsApp / messaging	Compact previews and aggressive caching	Test at very small size

No single image can control every layout. Optimize for graceful cropping rather than pixel-perfect consistency.

Required Open Graph tags

At minimum, publish:

<meta property="og:title" content="A clear page title">
<meta property="og:description" content="A concise reason to open the page">
<meta property="og:image" content="https://example.com/images/share-card.jpg">
<meta property="og:url" content="https://example.com/canonical-page/">
<meta property="og:type" content="article">

Add image dimensions so parsers know the shape before downloading:

<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Descriptive text for the share image">

For X/Twitter, include twitter:card with summary_large_image plus corresponding title, description, and image values. The Meta Tag Generator can create a complete block.

Common reasons previews fail

Relative image URL: /images/card.jpg may work in your browser but fail for a crawler. Use the full HTTPS URL.

Blocked crawler: authentication, bot protection, robots rules, or a restrictive CDN can prevent fetches.

Image generated too slowly: preview crawlers time out. Pre-render the asset or use a fast edge image endpoint.

Wrong content type: return image/jpeg, image/png, or another real image MIME type—not an HTML error page.

Cached old card: many platforms cache previews. Publishing a new image at a versioned URL is more reliable than replacing bytes at the same URL.

Tiny source: a 300 × 157 image may be enlarged and blurred. Start at 1200 × 630.

A repeatable publishing checklist

Before sharing a new page:

1. Confirm the canonical URL is final.
2. Use a unique, absolute image URL.
3. Open the image URL in a private browser window.
4. Check the 1200 × 630 dimensions and file size.
5. Preview title, description, image, and card type.
6. Inspect the card at mobile width.
7. Verify that centre-cropping does not remove the subject.
8. Publish, then use the platform’s debugger when available.

The Open Graph Preview helps validate the composition and metadata. For automated social images, the OG Image API can generate consistent cards from page data during a build or publishing workflow.