Open Graph Image Optimization for Ecommerce: The Spec That Actually Works

The Open Graph image is the single most-shared visual asset on most ecommerce sites. Every link share — Facebook, Twitter/X, LinkedIn, Slack, iMessage, Discord, Reddit — pulls the OG image. Get it right and your link previews look polished and clickable. Get it wrong and your shares look amateur, your CTR drops, and your brand takes a hit.

Most stores get it wrong. The defaults in Shopify, WooCommerce, and most theme frameworks generate OG images that fail on at least one major platform — usually because the spec they target was last updated five years ago.

The Right Dimensions: 1200×630

The current consensus spec, as of 2026:

• Width: 1200 pixels
• Height: 630 pixels
• Aspect ratio: 1.91:1

This dimension matches Facebook's "large summary card", Twitter's summary_large_image card, LinkedIn's link preview, Slack's unfurl, and iMessage's link preview. It's the lowest common denominator that produces a usable result on every major platform.

Smaller fallback: 600×315 (same aspect ratio) works as a reduced-resolution fallback on slow connections, but most platforms now downscale 1200×630 client-side, so there's rarely a reason to ship the smaller size.

Square images (1200×1200): work for product images on some platforms but get center-cropped on Twitter and Facebook into landscape, often cutting off important content. Avoid for OG.

The File Size Budget: 300KB

The Open Graph spec doesn't enforce a file size limit, but real-world platform behavior does:

• Facebook: recommends under 8MB, but caches and serves a re-encoded version that's typically 100–300KB.
• Twitter: 5MB max for JPEG, 5MB max for PNG. Re-encodes for serving.
• LinkedIn: 5MB max. Slow to refresh — bad images stay cached.
• iMessage / Slack / Discord: client-side render. Large images delay or skip the preview.

The practical budget: 300KB or less. Above that, you start seeing missed previews on slow connections, delayed unfurls, and clients that skip the image entirely. JPEG at 80% quality consistently fits the budget at 1200×630. PNG only when you need transparency or sharp text — and even then, run it through a compressor.

The Format: JPEG, Sometimes PNG, Rarely WebP

• JPEG: universal, smallest file size for photographic content. Default choice for product photography and lifestyle imagery.
• PNG: when you need sharp text, vector-like graphics, or transparency. Larger file size — compress aggressively.
• WebP: Facebook supports it; Twitter doesn't reliably; LinkedIn rejected it as recently as 2024. Use only as a progressive enhancement with JPEG fallback.
• SVG: rejected by every major OG consumer. Don't use for OG images.
• AVIF: not supported by most OG consumers. Rasterize to JPEG.

The Most Common Failures

1. Wrong aspect ratio

Square logos served as OG images get cropped to landscape on Twitter and Facebook. The center 1.91:1 strip survives — anything outside it disappears. Most stores using their main product photo as OG hit this constantly because product photography is typically square or portrait.

2. Text too close to edges

Different platforms crop slightly differently. The safe zone is the center 1100×580 region — anything outside that may get clipped on some clients. Brand logos, key text, and call-to-action overlays should stay inside the safe zone.

3. Low resolution on retina displays

A 600×315 image was acceptable in 2016. On modern retina displays, it looks pixelated. 1200×630 is the minimum for crisp rendering. 1200×675 (16:9) also works on most platforms but can crop to 1.91:1.

4. Missing og:image:width and og:image:height

Without explicit dimension meta tags, slow-network clients have to fetch the image to know its size before rendering the preview. Adding og:image:width and og:image:height meta tags lets clients reserve space immediately and renders previews faster:

<meta property="og:image" content="https://store.com/og.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Atlas running shoe in red" />

5. Hotlinking from CDN with no caching

OG images get hammered by social platforms — Facebook's crawler may request the same image dozens of times per share. If your CDN doesn't cache OG image requests aggressively, you're paying for redundant origin fetches. Set 30+ day cache headers on OG images.

6. Dynamic OG images that take 5+ seconds to render

Server-rendered OG images with on-the-fly text overlay are popular but often slow. Facebook's crawler times out at 30 seconds; Twitter at 15. Slack at less. If your dynamic OG endpoint takes 5+ seconds, expect failed previews. Pre-render at publish time or cache aggressively.

Per-Platform Edge Cases

Twitter / X

Requires twitter:card meta tag. Use summary_large_image for ecommerce. Twitter caches images for 7 days — to refresh, you'd need to add a query string version parameter to the URL.

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://store.com/og.jpg" />

LinkedIn

Caches aggressively — sometimes for 30+ days. Use the LinkedIn Post Inspector to force a re-scrape after updating an image. LinkedIn also occasionally renders the og:image at 800×418 internally; ensure your composition still works at that size.

iMessage

iMessage previews are slow to refresh and prefers smaller images. If your OG image is over 1MB, expect link previews to show only text. Apple's preview generator times out faster than Facebook's.

Discord

Renders OG images near-instantly but truncates very tall images. Stick to 1.91:1.

Slack

Unfurls require og:title, og:description, and og:image. If any are missing, Slack shows a degraded text-only unfurl.

The Audit Workflow

Once a quarter (or after any theme/template change):

1. Run the OG Image Validator on your homepage, top category page, top product page, and most-shared blog post.
2. Verify dimensions are 1200×630, file size under 300KB, format JPEG or PNG.
3. Check that og:image:width, og:image:height, and og:image:alt are present.
4. Test the actual rendered preview using Facebook Sharing Debugger, LinkedIn Post Inspector, and Twitter's card validator (if still available).
5. If anything's wrong, fix the source image and force a refresh on each platform.

The Compounding Logic

Every social share of your store carries the OG image as its public face. Multiplied across thousands of shares per year, the difference between a polished preview and a broken one shows up directly in click-through rate, brand perception, and downstream conversion. Fix it once, audit quarterly, and the social channel works the way it's supposed to.