OG image size: the dimensions that work on every platform
Use 1200 x 630 px (1.91:1), PNG or JPEG, under 5 MB, with width, height and alt declared. How Facebook, LinkedIn and X crop it, and where to keep text.
LLaunchScaler·Published ·8 min read
The OG image size that works on every major platform is 1200 x 630 pixels, a 1.91:1 ratio, saved as a PNG or JPEG under 5 MB. Declare it with og:image:width, og:image:height and og:image:alt, and keep text and logos inside a centre safe area, because X shows large images closer to 2:1 and some surfaces crop to a square.
One image at that size satisfies Facebook's recommendation, LinkedIn's minimum and X's large card. The rest of this page gives each platform's published numbers, the crop each one applies, and how to set the tags.
What size should an OG image be?
Make it 1200 x 630 px. Facebook says to "use images that are at least 1200 x 630 pixels for the best display on high resolution devices" and to keep "as close to 1.91:1 aspect ratio as possible to display the full image in Feed without any cropping." LinkedIn's sharing module asks for a minimum of 1200 x 627 px at a recommended 1.91:1.
Each platform's own numbers, as published:
Platform
Minimum
Recommended
Maximum file size
Ratio
Facebook, Messenger, Instagram links
200 x 200 px
At least 1200 x 630 px
8 MB
As close to 1.91:1 as possible
LinkedIn
Questions, answered
What people ask about this
01
What is the best OG image size?
1200 x 630 pixels, a 1.91:1 ratio, saved as PNG or JPEG under 5 MB. Facebook recommends at least 1200 x 630, LinkedIn asks for at least 1200 x 627, and X's large image card accepts it and shows it close to 2:1.
1200 x 630 clears every minimum in the table. It is 3 px taller than LinkedIn's minimum and matches the 1.91:1 ratio LinkedIn recommends.
Smaller images still render, but worse. Facebook says images "smaller than 600 x 315 pixels but larger than 200 x 200 pixels will be rendered with a small, square image" instead of the large horizontal card.
How does each platform crop the image?
Facebook shows a 1.91:1 image in full, and LinkedIn recommends the same ratio. X's large image card uses a 2:1 ratio, so a 1200 x 630 image loses about 30 px of height, roughly 15 px from the top and 15 px from the bottom. X's small summary card crops to a square, so only the centre 630 x 630 px survives.
Those crops set the safe area. Design the image at 1200 x 630 and keep every word and logo inside:
A horizontal margin of at least 60 px on each side, so nothing touches the edge.
A vertical margin of at least 30 px top and bottom, which covers the 2:1 trim on X.
The centre 630 x 630 px for anything that must survive a square crop, such as your logo or the key word.
Facebook adds that its cropping is not purely geometric: "we try to center the image around faces that we can detect." If your image includes a person, place them near the centre too.
X's documentation also asks for "a unique image representing the content of the page" and warns against "a generic image such as your website logo, author photo, or other image that spans multiple pages." A per-page image with the page's title on it gives every shared link its own card.
Which file format should an OG image use?
Use PNG or JPEG. X supports "JPG, PNG, WEBP and GIF" and says "SVG is not supported," and only the first frame of an animated GIF is used. LinkedIn's image specifications list JPG, PNG and GIF. Next.js's opengraph-image file convention accepts .jpg, .jpeg, .png and .gif, so it steers you to the same set.
Choose between the two by content:
PNG for flat graphics, text on a solid background and logos, where JPEG compression blurs edges.
JPEG for photographs and gradients, where PNG files get large.
Not WebP for the default image, because LinkedIn's list does not include it, even though X accepts it.
Never SVG, which X rejects outright.
How large can the OG image file be?
Stay under 5 MB so one file works everywhere: X and LinkedIn both cap images at 5 MB, and Facebook at 8 MB. Next.js enforces the same numbers at build time, failing the build if a twitter-image exceeds 5 MB or an opengraph-image exceeds 8 MB.
Aim far below the cap. Crawlers fetch the image on a deadline: Facebook asks that the image be "served with less than a few seconds of latency," and says an image that is "too big or could not be fetched due to a temporary issue" renders as a white box. Format decides most of the size. In a quick test for this article, a 1200 x 630 PNG of dark text on a white background saved at 15 KB, while a noisy, photo-like 1200 x 630 image came to 212 KB as a quality-82 JPEG and 1,235 KB as a PNG. If yours is several megabytes, the format is usually wrong for the content.
WhatsApp publishes no image limits on any page read for this article, so size for the strictest published platform and test by sharing the link in a chat.
Which image tags should you declare?
Declare the image URL, its type, its dimensions and its alt text. The Open Graph protocol defines og:image:type, og:image:width, og:image:height and og:image:alt as optional properties, and says "if the page specifies an og:image it should specify og:image:alt." Add X's own tags so its card type is explicit.
<meta property="og:image" content="https://www.example.com/og/pricing-1200x630.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Acme pricing: Free, Pro and Team plans">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image:alt" content="Acme pricing: Free, Pro and Team plans">
The dimensions do real work on Facebook. Its crawler has to see an image before it can render it, so the first share of a new URL can come up without one; declaring og:image:width and og:image:height lets it "render the image immediately without having to asynchronously download and process it."
X reads og:image when twitter:image is absent, so one image serves both. X caps twitter:image:alt at 420 characters. The full list of X's tags and fallbacks is in X card not showing an image.
How do you set the OG image size in Next.js?
Use the opengraph-image file convention. Drop a 1200 x 630 opengraph-image.png into a route segment and Next.js adds the og:image, og:image:type, og:image:width and og:image:height tags for you. Add opengraph-image.alt.txt beside it for the alt text.
To generate images per page, create opengraph-image.tsx and export the size, which Next.js uses for both the image and the tags:
The padding of 30 px vertically and 60 px horizontally builds the safe area into the template. If the image does not appear at all, the causes are usually specific to Next.js, such as a missing metadataBase or a protected preview URL; Next.js Open Graph image not working covers them.
Should every page have its own OG image?
Yes, for pages people share. X's guidance for the large card is "a unique image representing the content of the page," not a logo reused across the site, and a card that repeats the page title in the image tells a reader what they are about to open before they read the post text. A site-wide default is still worth having for pages that never get shared.
Generate the per-page images from a template rather than designing each one. Put the page title in large type inside the safe area, keep the logo in the same corner on every image, and use one background style per section (blog, docs, product) so the cards look like one family. Because Facebook caches images by URL, give each version a new URL when you change the design, for example by adding a version number to the file name, and keep the old files online for posts that still reference them.
How do you check the image before you share it?
Check the file, then check each platform's rendering. The file checks catch most problems in seconds, and the platform tools show the crop and cache each one applies.
Confirm the dimensions of the file. On macOS, sips -g pixelWidth -g pixelHeight og.png prints them; with ImageMagick, identify og.png does the same.
Confirm the served size and type with curl -sI https://www.example.com/og/pricing-1200x630.png and read content-length and content-type.
Paste the page URL into Facebook's Sharing Debugger, which scrapes it and shows the image it found and any warnings.
Paste it into LinkedIn's Post Inspector, which shows the preview LinkedIn will use.
Paste it into the X post composer without posting; X removed the preview from its Card Validator in 2022 and points to the composer instead.
Send it to yourself in Slack and WhatsApp to see the unfurl.
What if the right size still does not show?
Then the problem is not the size. A correctly sized image fails to show when the crawler cannot fetch it: a relative URL, a login or deployment protection, a firewall rule, or tags added by JavaScript. After a fix, each platform keeps its cached preview until you refresh it. OG image not showing walks through each fetch check and every platform's cache.
Check the page before you share it
The image lives inside a page, and a preview crawler has to read that page first. Run the free scan on LaunchScaler with the URL, no account needed. It does not measure the image itself, but it checks the conditions previews depend on, including invalid markup that closes the <head> early and drops the tags below it, content that only appears after JavaScript runs, redirect chains and the TLS certificate chain.
Facebook's minimum is 200 x 200 px, and images smaller than 600 x 315 px render as a small square. X's large image card needs at least 300 x 157 px and its summary card 144 x 144 px. LinkedIn's minimum for its sharing module is 1200 x 627 px.
03
What is the maximum OG image file size?
Facebook's limit is 8 MB, and X and LinkedIn both cap images at 5 MB. Use one file under 5 MB so it works everywhere, and keep it much smaller so crawlers fetch it quickly.
04
Can I use WebP or SVG for og:image?
Avoid both for the default image. X supports WebP but not SVG, and LinkedIn's image specifications list JPG, PNG and GIF. PNG or JPEG is the safe choice for every platform.
05
Do I need og:image:width and og:image:height?
They are optional in the Open Graph protocol but worth adding. Facebook says they let its crawler render the image immediately instead of downloading and processing it first, which avoids a missing image on the first share.
GDPR Article 13 lists what a SaaS privacy policy must say: who you are, each purpose and legal basis, every recipient, transfers, retention and rights.
