OG Image Size: 1200×630, Ratio, Official Notes

The Short Answer: Use 1200 × 630

The recommended OG image size I use is 1200 × 630 pixels. The Open Graph protocol does not define that number. It is the practical size that matches Facebook's large preview recommendation, clears LinkedIn's 1200 × 627 minimum, and works well anywhere that reads og:image. Keep the image at 600 × 315 or larger, or Facebook shows a much smaller preview.

If you are setting the tags by hand, include og:image, og:image:width, og:image:height, and og:image:alt. Use the exact width and height values: 1200 and 630. That gives crawlers less to guess. For the surrounding og:title, og:description, og:url, and og:type tags, use the OG meta tags guide. After that, run the page through an Open Graph checker so you see the same preview a crawler sees. New to Open Graph? Start with what an OG image is.

<meta
  property="og:image"
  content="https://example.com/og.jpg"
/>
<meta
  property="og:image:width"
  content="1200"
/>
<meta
  property="og:image:height"
  content="630"
/>
<meta
  property="og:image:alt"
  content="Preview image for Example.com article"
/>

<!-- For Twitter's large card format -->
<meta
  name="twitter:card"
  content="summary_large_image"
/>

OG Image Size Specs

If you only need the numbers, use these. They cover the main Open Graph image dimension questions: size, aspect ratio, minimum resolution, file type, and the meta tags crawlers expect.

Open Graph Image Recommended Size: 1200 × 630

If you are looking for the official Open Graph image size, this is where it gets annoying. The Open Graph protocol does not say "use 1200 × 630." It defines og:image and related structured properties like og:image:width, og:image:height, og:image:type, og:image:secure_url, and og:image:alt. The platforms decide the preview card size.

I still treat 1200 × 630 as the default because it fits the real-world overlap. Facebook recommends images that are at least 1200 × 630 for high-resolution link previews. LinkedIn recommends a 1.91:1 link preview image with a 1200 × 627 minimum. X large summary cards use a 2:1 image shape, but 1200 × 630 still works well when you also set twitter:card to summary_large_image. No need to maintain three near-identical images unless a platform-specific crop is important.

OG Image Size by Platform

These are the numbers I check when I audit a page or generate a new image. One 1200 × 630 image covers every row, so you only need a second image when the X crop matters.

The Open Graph protocol itself defines the tags, including og:image:width, og:image:height, and og:image:alt, but no preview size. The Facebook and LinkedIn rows come from Meta's link share image docs and LinkedIn's website sharing help. If exact X cropping matters, create a dedicated twitter:image. For most pages, I let X use the same 1200 × 630 image.

The Composition I Use

My default composition is 1200 × 630 canvas, one strong headline, one small domain or brand mark, and no body copy. The feed shrinks everything, so a clever layout at full size often turns into noise on a phone screen.

These are the rules I use before shipping an OG image:

• The headline still reads when the image is displayed at 500 pixels wide.
• The logo is visible without dominating the image.
• All important text sits inside the center 80% of the canvas.
• The image URL returns a direct 200 response with no auth, no cookies, and no redirect.
• The final file is small enough that a crawler can fetch it quickly.

That last point matters more than people expect. Social crawlers are impatient. A perfect 2MB image that loads slowly is worse than a compressed 180KB image that appears every time.

OG Image Aspect Ratio

The OG image aspect ratio is 1.91:1. The common 1200 × 630 pixel size is just that ratio with enough resolution for large preview cards.

You can use larger images if they keep the same ratio, but I usually don't. 2400 × 1260 adds file size without changing much in a social feed. Smaller images work too, but once you go below Facebook's recommended 1200 × 630 size, you give platforms more reasons to show a smaller preview or crop differently.

I would not use 16:9, 4:3, or a square image for the main og:image unless you are deliberately accepting crops. They can work, but they make every platform decide where to cut. A 1.91:1 image gives Facebook, LinkedIn, Slack, Discord, and messaging apps the shape they already expect.

Why 1200 × 630 Became the Standard

The 1.91:1 ratio is close to 16:9 video, but a little wider. It gives platforms enough horizontal space for a large preview card without making the image too tall in a feed. Facebook pushed the format first, then the rest of the web mostly settled around it.

1200 pixels wide is also a practical compromise. It stays sharp on high-density screens, but it is not so large that compression becomes painful. Go below 600 × 315 and platforms may drop you into a small thumbnail layout. That is usually the wrong outcome for a page you care about.

Platform Quirks Worth Knowing

Every platform has its own fetcher, cache, and display logic. I've generated thousands of OG images through MyOG. Here's what matters:

Facebook OG image size

Use 1200 × 630 pixels for Facebook OG images. Facebook can display smaller images, but 1200 × 630 gives you the large preview card and enough resolution for retina screens. Facebook caches hard. Update your OG image and nothing changes? Use the Sharing Debugger to force a re-scrape. The official limit is 8MB, but their crawler times out way before that on slow servers. Aim for under 300KB.

Twitter/X OG image size

X large summary cards use a 2:1 image shape. I still use 1200 × 630 as the shared og:image for most pages because it is close enough in the feed and avoids maintaining a second asset. If the X crop matters, add a dedicated twitter:image. Without the twitter:card meta tag set to summary_large_image, you can get the small thumbnail even if your image is perfectly sized. Easy to miss.

Google, SEO tools, and crawler previews

Google does not use your OG image the same way Facebook or LinkedIn does, but crawler tools still read the tags. AhrefsBot user agent and robots.txt guide, Slack unfurlers, browser extensions, and internal link preview tools all benefit from the same clean setup: absolute URL, correct dimensions, fast response, and a stable file format.

LinkedIn OG image size

Use a 1.91:1 image for LinkedIn link previews. LinkedIn lists 1200 × 627 as the minimum, so a 1200 × 630 OG image clears it with the same practical template. LinkedIn is picky about crops, so keep text away from the edges and test separately using their Post Inspector.

WhatsApp, Slack, Discord, and iMessage OG image size

WhatsApp, Slack, Discord, and iMessage all work well with 1200 × 630 OG images. They're usually more forgiving about dimensions than LinkedIn, but tighter on timeouts. If your image takes more than a couple seconds to load, you get a blank preview or a generic icon. Fast delivery matters here.

JPG vs PNG: A Practical Take

I'll skip the comparison tables. Rule of thumb: photography or gradients → JPG at 80-85% quality. Text, logos, flat colors → PNG. That's it.

Stick to JPG and PNG. A lot of platforms don't support SVG, GIF, or WebP for OG images. WebP produces smaller files, sure, but the compatibility risk isn't worth it. Your preview might just not show up.

Either way, compress. A 2MB PNG that looks identical to a 150KB optimized version just means slower previews and possible timeouts. If you already have the right image, run it through the OG image compressor. It runs in your browser, so the draft never uploads. ImageOptim and Squoosh are good choices too. If your image isn't the right aspect ratio, crop it to 1200 × 630 before compressing.

Designing for the Feed

Your 1200-pixel-wide image displays at roughly 500 pixels in most feeds. Less than half its actual size. Worth designing with that in mind:

• Text needs to be big. Anything under 40-50px at the source resolution becomes hard to read. Headlines work; paragraphs don't.
• Keep the edges clear. Platforms crop differently. Some shave a few pixels off each side; others center-crop on mobile. The center 80% of your image is the safe zone.
• Test on mobile. Most link clicks come from phones. Your desktop preview might look great while the mobile version cuts off important text.

I also avoid putting essential text in the corners. Corners are where platforms add UI, rounded clipping, image counters, play badges, and other small bits of chrome. Put the headline in the middle third and the brand mark near an edge, but not touching it.

Retina Displays: Do You Need 2x?

Some guides say 2400 × 1260 for retina sharpness. I don't bother. Social feeds are noisy — nobody's zooming into your OG image to check pixel density. 1200 × 630 looks fine.

If your brand is built around premium aesthetics and your audience is mostly on new Apple hardware, maybe. For everyone else, it's over-engineering.

The Meta Tags

Here are the tags you need in your <head>:

<meta
  property="og:image"
  content="https://example.com/og.jpg"
/>
<meta
  property="og:image:width"
  content="1200"
/>
<meta
  property="og:image:height"
  content="630"
/>
<meta
  property="og:image:alt"
  content="Preview image for Example.com article"
/>

<!-- For Twitter's large card format -->
<meta
  name="twitter:card"
  content="summary_large_image"
/>

Width and height tags aren't required, but they help platforms render previews faster — they know the dimensions before downloading the file. Two extra lines. Worth it.

I also keep the image URL boring. No signed URLs, no session-dependent routes, and no image endpoint that needs the browser to run JavaScript first. If curl can fetch the bytes, the crawler probably can too.

If one page is broken, fix the tags and image URL. If every page needs the same work, generate the card from the page URL instead. MyOG does that with one meta tag. The crawler requests the URL, reads the page, and returns a 1200 × 630 branded image for that specific page.

Debugging Checklist

Image not showing up or looking wrong? Work through these:

1. Check the URL is absolute. Relative paths like /images/og.jpg don't work. Use the full URL.
2. Verify the image loads. Paste the og:image URL directly in your browser. If it 404s or redirects, platforms can't fetch it either.
3. Clear platform caches. Facebook, Twitter, and LinkedIn all have debugger tools that force a re-fetch. Old cached versions can persist for days.
4. Check your server's response time. If your image takes more than 3-4 seconds to load, crawlers may give up.
5. Look for CORS or auth issues. Some CDNs or protected routes block crawler user agents.

Quick Answers

What size should an OG image be?

1200 × 630 pixels. This is the practical default I use for large link previews. Facebook recommends at least that size, LinkedIn wants a 1.91:1 image, and X can use the same image through og:image unless you need a dedicated 2:1 crop.

What are the correct og:image dimensions?

Use og:image:width set to 1200 and og:image:height set to 630. I also add og:image:alt when I can because it gives crawlers and accessibility tools a useful text description.

Is 1200 × 630 the official Open Graph image size?

It is the practical standard. The Open Graph protocol does not define one universal image size. It gives you og:image and optional structured properties. Platforms decide how the preview card is rendered. 1200 × 630 is the size I use because it works across the major platforms.

What file format works best?

JPG for photos and complex images. PNG for graphics with text or logos. Avoid SVG, GIF, and WebP. Many platforms don't support them. Keep files under 300KB for fast loading.

What is the maximum file size for OG images?

Facebook allows up to 8MB, and LinkedIn and Twitter/X allow up to 5MB, but I treat those as upper limits, not targets. Keep the image under 300KB when possible and under 1MB as a practical ceiling.

Why isn't my OG image updating?

Platform caching. Facebook, Twitter, and LinkedIn all cache OG images, sometimes for days. Use their debugger tools to force a refresh after making changes.

Related Resources

• What are OG Images? — Learn the basics of Open Graph images
• OG Image Generator — Create correctly sized OG images
• OG Preview Tool — Test how your images appear on different platforms
• Image Cropper — Crop images to the exact OG image dimensions
• How to Add OG Images to WordPress — Step-by-step WordPress integration guide
• OG Image Testing Guide — debug social media previews that aren't working
• OG Image Compressor — compress social preview images locally before adding them to og:image
• Favicon Generator — convert images to favicon format
• OG Meta Tags Guide — every OG tag explained with code examples
• MyOG.social vs @vercel/og — compare OG image generation approaches