The right Open Graph image size is 1200×630 pixels, a 1.91:1 ratio, saved as a JPG or PNG under a few megabytes and linked with an absolute HTTPS URL. That one file works well on Facebook, LinkedIn, X, Slack, and Discord. The exceptions come from apps that crop to a square or show a small thumbnail, so you also need to keep the important stuff in the middle.
What size should an og:image be?
Go with 1200×630. It's the size Facebook's own sharing docs recommend "for the best display on high resolution devices," and it matches the 1.91:1 ratio that fits link cards without cropping. LinkedIn's help page lists 1200×627 as its minimum with the same 1.91:1 ratio. Three pixels of difference won't matter in practice, so one 1200×630 file covers both.
Facebook also gives a floor. The smallest image it accepts is 200×200, and it says to use at least 600×315 if you want the larger link style. Below that, you'll likely get a small thumbnail next to the text instead of a wide image on top.
Why not bigger? You can go to 2400×1260 for extra sharpness on high-DPR screens (DPR is device pixel ratio, how many physical pixels a screen packs into one CSS pixel). But bigger files load slower for crawlers, and some have tight timeouts. For most sites, 1200×630 is the sweet spot. If you want the longer version of that tradeoff, see our post on retina and HiDPI images.
Which meta tags do you need?
Here's a solid set of tags for the <head> of any page you expect people to share:
<meta property="og:title" content="Your page title">
<meta property="og:description" content="One or two sentences.">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/og/page.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Chart comparing favicon sizes by browser">
<meta name="twitter:card" content="summary_large_image">og:image:width and og:image:height
These tell the crawler the image size before it downloads the file. Facebook says setting them helps the image "load properly the first time it's shared." Without them, the very first share of a new URL can show up with no image while Facebook processes it in the background.
og:image:type
This is the MIME type, like image/jpeg or image/png. It's optional. Just make sure it matches the real file and the Content-Type header your server sends.
og:image:alt
The Open Graph protocol says that if a page sets og:image, it should also set og:image:alt, and that it should describe the image, not caption it. Screen reader users on some platforms hear this text. Our alt text guide covers how to write it well.
twitter:card: summary_large_image vs summary
X reads og:title, og:description, and og:image as fallbacks, so you don't need to duplicate them as twitter: tags. You do need twitter:card, though, because it picks the layout:
summary_large_imageshows a wide image above the title. This is what most people want.summaryshows a small square thumbnail beside the title. It's fine for profile-style pages, but your 1200×630 image gets cropped to a square.
If you leave twitter:card out, don't be surprised when X shows a plain link or a small card.
Why does the og:image URL have to be absolute?
A crawler reads your HTML out of context. Some resolve relative URLs against the page, and some don't. A full URL like https://example.com/og/page.jpg works everywhere, so there's no reason to gamble. The ogp.me spec's examples all use full URLs.
Use HTTPS too. Slack, for one, runs images through its own proxy so it can serve them over HTTPS. A plain http:// image can still break on some clients, and a mixed-content warning is never a good look. Also check that the image URL returns a 200 directly. A redirect chain on the image is a common reason previews go blank.
What is the safe zone for a 1.91:1 image?
Not every app shows your full rectangle. Some chat apps and the summary card on X crop to a square or near-square thumbnail, usually from the center. WhatsApp and iMessage can show either a large preview or a small one depending on the image and the context.
So design for the crop:
- Start with a 1200×630 canvas.
- Mark a centered 630×630 square. That's your safe zone for anything that must survive a square crop.
- Put your logo and headline inside that square.
- Leave some padding (about 40 to 60 pixels) from every edge, since rounded corners and overlays can clip the border.
- Use text at least 48px tall at 1200 wide. Previews are often shown at a third of that size.
A logo in the bottom-right corner looks great in Figma. Then it vanishes in a square crop. Center it.
What file size and format should you use?
Use JPG for photos and PNG for flat graphics with sharp text. WebP works on many platforms now, and X lists it as supported, but support across every scraper isn't documented. If you want zero surprises, JPG or PNG is the safe default. Our format comparison goes deeper on when each one wins.
File size limits vary. Facebook caps images at 8 MB. LinkedIn's help page says 5 MB. X has long listed 5 MB for card images. Aim for well under 1 MB anyway. A 1200×630 JPG at a sensible quality setting usually lands between 80 and 250 KB. See our compression settings guide for how to get there without visible artifacts.
Don't use SVG for og:image. X says SVG isn't supported, and in practice most other crawlers ignore it too. SVG is great on your actual pages (here's our SVG guide), but export a raster copy for social. Animated GIFs usually show only the first frame.
What do the major platforms actually require?
This table sticks to what each platform documents. Where there's no official number, it says so.
| Platform | Recommended size / ratio | Minimum | Max file size | Notes |
|---|---|---|---|---|
| 1200×630, 1.91:1 | 200×200 (600×315 for large previews) | 8 MB | Caches images by URL. | |
| 1200×627, 1.91:1 | Under 401px wide shows as a thumbnail | 5 MB | Post Inspector refreshes the cache. | |
| X | 2:1 for summary_large_image | 300×157 | 5 MB | JPG, PNG, WebP, GIF. No SVG. Max 4096×4096. |
| Slack | Not published; 1200×630 works well | Not published | Not published | Reads Open Graph and Twitter Card tags. Caches unfurls for about 30 minutes. |
| Discord | Not published; 1200×630 works well | Not published | Not published | Reads Open Graph tags. Commonly reported to use twitter:card to pick a large image. |
| iMessage / WhatsApp | Not published in detail | Not published | Not published | Commonly reported to fall back to a small preview for large or slow images. Test on a real phone. |
X is the odd one out with 2:1. A 1.91:1 image gets trimmed by a few pixels on the sides, which is another reason to respect the safe zone. You don't need a separate X image.
How do you test your Open Graph image?
- View the page source and confirm the tags are in the raw HTML. If your site injects them with client-side JavaScript, most crawlers won't see them.
- Open the
og:imageURL in a private window. It should load with a 200 status and the rightContent-Type. - Paste the page URL into the Facebook Sharing Debugger. It shows exactly what Facebook's crawler found and any warnings.
- Run it through LinkedIn's Post Inspector.
- For X, paste the link into the post composer and look at the preview. X's old Card Validator no longer shows previews.
- Drop the link into a private Slack or Discord channel, and text it to yourself on a phone.
Our webmaster tools page lists more checkers. If a preview shows an old image after you've fixed things, that's a cache problem. Our guide to refreshing a social share image that won't update walks through it platform by platform.
Common mistakes
- Relative image URLs.
/og.pngworks in your browser but not always for a crawler. - Using the site logo as the og:image. A small square logo becomes a tiny thumbnail or a badly cropped banner. Your logo and your share image do different jobs; see favicon vs app icon vs logo.
- Tags added by JavaScript. Crawlers mostly don't run it.
- Text near the edges. It gets clipped by square crops and rounded corners.
- Blocking crawlers. A firewall or bot rule that blocks
facebookexternalhitorLinkedInBotmeans no preview at all. - Overwriting the same file. Platforms cache by URL, so a new image at the old URL may not show up for days.
While you're in the head checking tags, check your icons too. Some link previews show your site icon next to the title, and the favicon checker shows exactly which icon files a page exposes.
TL;DR
Use a 1200×630 JPG or PNG, keep it under 1 MB, and link it with an absolute HTTPS URL in og:image. Add width, height, and alt tags, set twitter:card to summary_large_image, and keep your logo and headline inside a centered square. That one image will look right almost everywhere.