Open Graph Image Size: The Complete Guide (2026)

When a link is shared on Slack, LinkedIn, X, Facebook, or messaging apps, the preview card depends on Open Graph metadata embedded in the page’s HTML.

One of the most important tags is og:image, which controls the preview image.

If the image is too small, too large, slow to load, inaccessible to crawlers, or injected after page load, the preview may fail entirely.

This guide explains:

• the recommended Open Graph image size
• minimum dimensions and aspect ratios
• why preview images fail
• how preview crawlers fetch metadata
• and how ecommerce teams can avoid structural preview failures at scale

Recommended og:image Size

The recommended Open Graph image size for most platforms is:

1200 × 630 pixels

This size works reliably across:

• Facebook
• LinkedIn
• Slack
• X (Twitter)
• Discord
• iMessage

Recommended aspect ratio:

1.91:1

This ratio minimizes cropping and rendering inconsistencies across platforms.

Minimum og:image Dimensions

Most platforms can still render images smaller than 1200×630, but reliability decreases quickly below certain thresholds.

A commonly accepted minimum is:

600 × 315 pixels

Images below this size may:

• render inconsistently
• appear blurry on high-density displays
• be ignored entirely by some preview renderers

For ecommerce product pages, using images smaller than the recommended dimensions often results in degraded previews when links are shared externally.

Maximum File Size

One of the least discussed causes of broken previews is oversized images.

Even when the og:image tag exists, the preview may fail if the image:

• is extremely large
• loads slowly
• requires heavy image processing
• exceeds crawler timeouts

Preview crawlers typically prioritize speed and reliability over full rendering accuracy.

If the image payload is too heavy, the crawler may stop fetching the resource before the preview card is generated.

To reduce failure risk:

• compress images appropriately
• avoid unnecessarily large source assets
• use optimized CDN delivery
• keep response times low

Recommended Image Formats

Most preview crawlers support:

• JPEG
• PNG
• WebP (increasingly supported)

For broad compatibility, JPEG remains the safest default for Open Graph images.

PNG is appropriate for:

• UI screenshots
• diagrams
• illustrations requiring transparency

Avoid formats that require unusual decoding support or aggressive optimization pipelines.

Open Graph Image Sizes by Platform

Using a standard 1200×630 image works reliably across nearly all platforms.

Example og:image Tag

A valid Open Graph image tag looks like this:

1<meta property="og:image" content="https://example.com/product-image.jpg">

Best practices:

• use publicly accessible HTTPS image URLs
• avoid authentication-protected image paths
• avoid temporary signed URLs
• minimize redirect chains
• ensure the image responds quickly

Why Large Images Break Social Previews

Large images are one of the most common causes of preview failures in ecommerce environments.

Even when the metadata itself is technically correct, preview crawlers may fail to render the image if:

• the CDN response is slow
• image processing takes too long
• the file size is excessive
• redirects delay the response

This often appears as:

• blank preview cards
• inconsistent rendering across platforms
• previews without images

These failures are especially common during:

• campaign launches
• large catalog updates
• image pipeline migrations
• template refactors

We explored these patterns in more detail here:

→ Why Large Images Break Social Previews

Why og:image Sometimes Doesn’t Appear

Image dimensions are only one part of the problem.

Preview images frequently fail because:

• the og:image tag is missing entirely
• metadata is injected via client-side rendering
• the image URL is inaccessible to crawlers
• the image appears only after JavaScript executes

Most social preview crawlers fetch the initial server-rendered HTML response and do not execute client-side JavaScript.

That means Open Graph tags must be present in the first HTML response returned by the server.

If metadata is injected later in the browser, preview crawlers may never see it.

We covered these failure patterns in more detail here:

→ Why Your og:image Is Not Showing (Slack, LinkedIn, or X)

What We Observed in the Benchmark

In the Q1 2026 snapshot of the Social Preview Reliability Index, we analyzed 647 benchmark-eligible retail ecommerce domains.

Two findings stood out:

• 18.05% of product pages lacked a valid og:image tag
• 6.46% referenced invalid or inaccessible images

These failures were rarely isolated page issues.

In most cases, the underlying cause was structural:

• template inconsistencies
• rendering differences
• metadata drift
• image delivery failures

The benchmark suggests that preview reliability is primarily a template governance problem rather than a content problem.

You can explore the full benchmark dataset here:

https://research.sharescan.io/

How to Check Your og:image Implementation

The simplest way to verify your Open Graph image implementation is to inspect the page HTML directly.

Look for the tag in the initial server response:

1<meta property="og:image" content="https://example.com/product-image.jpg">

Verify all of the following:

• the tag exists
• the image URL is publicly accessible
• the image loads quickly
• the tag is present in server-rendered HTML
• the image dimensions are appropriate

If the tag only appears after JavaScript executes, preview crawlers may miss it entirely.

Common Ecommerce Failure Patterns

Across ecommerce stacks, several recurring patterns appear repeatedly.

Template-level metadata drift

As templates evolve, metadata generation logic often diverges across product types.

This creates inconsistent Open Graph output across catalogs.

Client-side rendering (CSR)

Some frontend architectures inject metadata after hydration.

Browsers render correctly, but crawlers never see the tags.

Image pipeline regressions

Changes to image optimization or CDN infrastructure can silently break preview images.

Inaccessible image URLs

Authentication layers, expired signed URLs, or blocked CDN paths frequently prevent crawlers from fetching images.

Preventing Preview Failures at Scale

For ecommerce teams, preventing preview failures requires operational consistency.

Best practices include:

• standardizing metadata templates
• validating preview metadata before launches
• avoiding client-side metadata injection
• monitoring image delivery pipelines
• detecting regressions after deployments

At scale, preview reliability should be treated as part of release quality assurance.

Continuous Monitoring

The Social Preview Reliability Index provides periodic public snapshots of metadata reliability across ecommerce domains.

For teams that need ongoing visibility into metadata regressions between snapshots, operational monitoring is available at:

https://sharescan.io