Open Graph Image Size: 1200 × 630 and How to Test Your Preview

What is an Open Graph image?

The Open Graph protocol, described at ogp.me, lets a page describe itself with meta tags such as og:title, og:type, og:image and og:url. Social platforms and chat apps read these tags when a link is shared and build a preview card.

og:image holds the address of the picture for that card. If it is missing, a platform may pick another image from the page or show none at all.

What size should the image be?

Meta's Facebook guidance gives clear numbers, summarised below. Other platforms publish their own rules and can crop differently, so 1200 × 630 at 1.91:1 is a sensible shared starting point rather than a universal guarantee.

How do I keep important content from being cropped?

Keep text and logos away from the edges. Different apps show the card at different sizes and some crop to a square or a slightly different ratio, so a centred design with a margin around the key content holds up best.

Use large, short text. A preview is often shown at a few hundred pixels wide on a phone, so fine print disappears. A headline of a few words and a clear visual work better than a full paragraph.

How do I add the og:image tag?

Add a meta tag in the page head: <meta property="og:image" content="https://www.example.com/share.jpg">. Use an absolute https URL, because the platform fetches the image from its own servers and cannot resolve a relative path.

The Meta Tag Generator writes og:image alongside og:title, og:description, og:url and og:type, plus optional Twitter card tags, so all the sharing tags are created together. Make sure the image URL is public and not blocked by a login or firewall.

How do I test the preview?

Enter the page's public URL in the Open Graph Preview and press Check preview. It requests the page, reads up to 512 KiB, and shows the title, description, image address and Twitter card it found, along with the final address after any redirects.

If a field says Not found, the tag is missing from the HTML the server returns. The tool stops after 8 seconds and rejects private or local addresses, so test the live public page rather than a local development server. A listed image may still fail to display if the image host blocks outside requests.

Why does an old image still show after I changed it?

Platforms cache previews. Meta's documentation explains that its crawler fetches and caches the image the first time content is shared, so a changed image may not appear straight away for a URL that has already been shared.

Giving the new image a new file name makes the change clear to any cache. Some platforms also offer their own debugging tools to refresh a cached preview.

Which file format should I use for the share image?

JPG is a good choice for photographs because it keeps files small. PNG suits graphics with sharp text, logos and flat colours, because it avoids the blurry edges JPG compression can add around letters. Whichever you choose, keep the file comfortably under the 8 MB limit; a share image of a few hundred kilobytes loads faster for crawlers and for people on slow connections.

Export at exactly 1200 × 630 pixels rather than relying on the platform to scale a much larger image. If your design tool exports at double size for high-density screens, resize it down before uploading, then check the result is still sharp at the size it will appear in a feed.

What other image tags can help?

The Open Graph protocol defines optional structured properties for images, such as og:image:width, og:image:height and og:image:alt. Width and height let a platform know the size before it downloads the file, and alt text describes the image for people who cannot see it. These are optional, but they cost little to add.

If your page has several og:image tags, platforms may choose the first one or let the person sharing pick. For predictable results, give each page one main image.

What should I check before publishing?

Before a page goes live, confirm that the image URL opens in a private browser window without signing in, that the file is the size you expect, and that the page's HTML includes og:image, og:title and og:description. Then run the public address through the Open Graph Preview and compare the fields it found with what you intended.

If the preview shows Not found for a tag you added, the page may be serving a cached version or the tag may be added by JavaScript after load. Crawlers usually read the HTML the server sends, so make sure the tags are in that HTML.

Repeat the check whenever you redesign the page template, change the image host or move the site to a new domain. These changes often break image URLs without anyone noticing, because the page itself still looks fine in a browser. A quick test with the preview tool after each change catches the problem before people start sharing broken links.

How do I set up a share image?

1. Design at 1200 × 630. Create the image at 1.91:1 with key content in the centre.
2. Save and resize. Export as JPG or PNG under 8 MB. Use the Image Resizer to hit the exact size.
3. Add the tags. Generate og:image and related tags in the Meta Tag Generator and add them to the page head.
4. Check the live page. Run the public URL through the Open Graph Preview and confirm the image address and text.

Example

What should I keep in mind?

FAQ

What is the best og:image size?

1200 × 630 pixels, which meets Meta's recommendation for Facebook and keeps the 1.91:1 ratio.

What is the minimum og:image size?

Meta lists 200 × 200 pixels as the minimum allowed, and 600 × 315 as the minimum for larger link previews.

What is the maximum file size for an og:image?

Meta's documentation says the image file must not exceed 8 MB.

Can I use a square image?

You can, but on Facebook a square image may be cropped or shown small. A 1.91:1 image displays fully.

Should the og:image URL be absolute?

Yes. Use a full https address so crawlers can fetch it.

Can I use WebP for og:image?

Support varies by platform. JPG and PNG are the safest choices for share images.

Why is my preview showing the wrong image?

The tag may be missing, the image blocked, or the platform may be showing a cached version from an earlier share.

Do I need a different image for each page?

Not required, but page-specific images make shared links easier to recognise.

Does the Open Graph Preview show the image itself?

It shows the image address and fields it found; the image host may still block display.

What does 1.91:1 mean?

The width is 1.91 times the height, for example 1200 × 630 or 600 × 315.

Should blog posts and products share one og:image?

Unique images perform better; a brand fallback is fine when a page lacks custom art.

How much safe margin should text keep inside 1200×630?

Keep headlines away from the outer edges so crops on some apps do not clip letters.

Do LinkedIn and Facebook prefer different ratios?

Both handle ~1.91:1 well; always spot-check each network’s debugger after upload.

Can I overlay a logo without hurting clarity?

Yes—place a compact logo in a corner with contrast, not over the focal subject.

Why cache old images after I replace the file?

Networks cache aggressively—change the filename or query string and re-scrape.

Is 600×315 still acceptable?

It meets older minimums but looks soft on retina feeds; prefer 1200×630 when you can.

Should og:image:alt describe the graphic?

Provide concise alt text for accessibility and clearer previews where platforms use it.

Do animated GIFs work as og:image?

Most large networks expect a still image; use a representative frame instead.

How do I test before publishing the CMS change?

Point the preview tool at a staging URL with absolute image links that are publicly reachable.

Can dark-mode art confuse light-mode feeds?

Design for average feed backgrounds—ensure contrast works on both light and dark UIs.

Sources and further reading

• Meta for Developers – Images in link shares
• The Open Graph protocol