Developer Guides May 16, 2026

OG Image Size: The Complete Guide to Open Graph Images

OG images are the preview images that appear when you share a URL on social media. Get the dimensions wrong and your link previews look broken. Here's the definitive guide to og:image sizes, meta tags, and how to get it right on every platform.

When you paste a URL into Twitter, LinkedIn, or iMessage, a preview card appears: a thumbnail, title, and description pulled automatically from the page. The image in that card comes from your og:image meta tag. Get the size wrong and the image gets cropped, shrunk, or skipped entirely. Get it right and every share becomes a clean, intentional first impression.

This guide covers the exact dimensions, the meta tags, platform-by-platform behavior, format choices, and the mistakes that silently break link previews.

What Is an OG Image?

OG stands for Open Graph, a protocol introduced by Facebook in 2010 that lets you control how a URL appears when shared. When a social platform or messaging app fetches your URL, it reads the Open Graph meta tags in your HTML <head> and uses them to build the preview card.

The og:image tag specifies which image to display. That single image shows up across Twitter/X, LinkedIn, Facebook, iMessage, Slack, Discord, and WhatsApp, all from one tag.

The universal safe size is 1200×630 pixels. It's not arbitrary, it's the one size that satisfies the minimum requirements and aspect ratio constraints of every major platform simultaneously.

The Meta Tags

Add these to the <head> of every page you want to share cleanly:

<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og-image.png" />

A few things to note:

og:image:width and og:image:height are optional but strongly recommended. They tell crawlers the dimensions upfront so they don't have to download the image to figure it out. This speeds up unfurling.
twitter:card set to summary_large_image enables the large banner format on Twitter/X. Without it, Twitter falls back to a small square thumbnail even if your image is the right size.
twitter:image is separate from og:image. Twitter reads og:image as a fallback, but specifying twitter:image explicitly is more reliable.

Platform-by-Platform Display Sizes

Every platform renders your og:image differently. Understanding the differences helps you design images that hold up everywhere.

Facebook

Recommended size: 1200×630 (aspect ratio 1.91:1)
Minimum for link previews: 600×315
Facebook crops images that don't match the 1.91:1 ratio.

Twitter / X

summary_large_image card: 1200×600 (2:1 ratio): the large banner that appears below the tweet text
summary card: 800×418, a smaller card with the image on the left
The twitter:card meta tag controls which format renders. If you omit it, you get the summary card regardless of image size.

Recommended: 1200×627
LinkedIn is strict. Images smaller than 1200px wide often render at a reduced size or get replaced with a placeholder.

iMessage / iOS

Uses og:image directly.
Displays as a thumbnail roughly 300px wide in the conversation thread.
A 1200×630 image scales down cleanly; a 200×200 image looks blurry.

Slack / Discord

Both use og:image for link unfurls.
Slack shows images at varying widths depending on the channel layout, typically 400–800px wide.
Neither platform penalizes you for a larger image, they scale it down.

Minimum: 300×200
A 1200×630 image will work but may appear letterboxed in some contexts.

Why 1200×630 Works Everywhere

1200×630 sits at exactly 1.905:1, close enough to 1.91:1 that Facebook accepts it without cropping, and close enough to 2:1 that Twitter's large card renders cleanly. It also clears every platform's minimum width requirement (1200px) with room to spare.

If you're only creating one og:image per page (which is the standard practice), 1200×630 is the size that breaks nothing.

JPG vs PNG for OG Images

Format choice matters more than most developers realize, because social crawlers have short timeouts. If your image is too large to download in time, the preview renders without it.

Use JPG for:

Photographs and hero images with lots of color variation
Any image where file size is a priority
Pages shared frequently (the smaller file = faster crawler fetch = more consistent previews)

A well-optimized JPG at 1200×630 typically lands between 80–150 KB. The same image as PNG can be 400 KB or more.

Use PNG for:

Logos and brand marks
Text-heavy images (charts, code snippets, UI screenshots)
Images with transparency

The rule of thumb: if it looks like a photo, use JPG. If it looks like a slide or a graphic, use PNG.

Common OG Image Mistakes

Image too small

Platforms have minimum size requirements, and they enforce them silently. A 400×210 image may cause Facebook to skip the image entirely and fall back to a text-only card. Always target 1200×630, never go below 600×315.

Wrong aspect ratio

A 1000×1000 square set as og:image will get cropped to 1.91:1 on Facebook, resulting in most of your image being cut off. Design your OG images at the target ratio from the start.

Image not publicly accessible

Social crawlers are external bots. If your image is behind authentication, on localhost, or on a staging server with IP restrictions, crawlers can't fetch it and the preview will be blank. Always use a fully public, absolute URL in your og:image tag.

Cached stale image

Once a platform crawls your URL, it caches the preview for hours or days. To force a re-crawl, append a version query parameter to your image URL:

<meta property="og:image" content="https://example.com/og-image.png?v=2" />

You can also use the Facebook Sharing Debugger, Twitter Card Validator, or LinkedIn Post Inspector to manually trigger a re-scrape.

How to Create OG Images with OmegaPix

The OG Image Resizer on OmegaPix outputs images at exactly 1200×630, no guesswork on dimensions.

Upload your source image, and it resizes to the correct size with options to fit or fill the canvas. Everything runs in your browser. No file is ever uploaded to a server, which matters if your OG images contain unreleased product screenshots or confidential material before launch.

For other social media formats, the Social Media Image Resizer covers all major platform specs in one place, including the 1280×720 YouTube thumbnail format via the YouTube Thumbnail Resizer.

FAQ

What is og:image?

og:image is an HTML meta tag that specifies the image shown when your URL is shared on social media, messaging apps, and link previewers. It's part of the Open Graph protocol. Without it, platforms either pick an arbitrary image from the page or show no image at all.

Why is my OG image not showing?

The most common causes: the image URL is not publicly accessible, the image is smaller than the platform's minimum, or the preview is cached from a previous crawl. Use the Facebook Sharing Debugger or Twitter Card Validator to force a fresh crawl and see the exact error.

What's the difference between twitter:image and og:image?

og:image is the Open Graph standard, read by most platforms. twitter:image is Twitter's own meta tag. Twitter reads og:image as a fallback if twitter:image is absent, but specifying both is more reliable. They can point to different images if you want different crops for Twitter vs. everywhere else.

How do I test my OG image?

Three tools cover the major platforms:

Facebook Sharing Debugger: shows exactly how Facebook will render the preview and lets you force a cache refresh
Twitter Card Validator: previews your Twitter card in real time
LinkedIn Post Inspector: shows the LinkedIn preview and re-scrapes on demand

What is the correct OG image size for Facebook?

1200×630 pixels at a 1.91:1 aspect ratio. Facebook's hard minimum is 600×315 for link previews.

Can I use the same og:image on all platforms?

Yes. A 1200×630 JPG or PNG will render acceptably on Facebook, Twitter/X, LinkedIn, iMessage, Slack, and Discord.

Does file size affect OG image display?

Indirectly. Social crawlers have network timeouts. If your image takes too long to download, the preview may render without it. Keep your OG images under 200 KB.

What happens if I have no og:image tag?

Platforms handle it differently. Facebook and LinkedIn will attempt to find an image on the page automatically, usually with poor results. Twitter will fall back to a text-only summary card. Setting an explicit og:image tag is the only way to control what appears.

Try Social Media Image Resizer, free in your browser

No uploads, no account. Your images never leave your device.

Open Social Media Image Resizer