OG Image Size in 2026: The Right Dimensions for X, LinkedIn, Facebook and Slack, Plus the Tags

#The short version: OG image sizes by platform

The Open Graph image (og:image) is the picture that appears when someone shares your link on X, LinkedIn, Facebook, Slack, Discord, iMessage or WhatsApp. One image, 1200 by 630 pixels, works everywhere that publishes a spec. Here's what each platform's own documentation says, checked on October 2, 2026:

Sources: Meta's image guidance, LinkedIn's sharing help, X's card documentation (archived), and Slack's unfurling docs.

The answer for almost everyone: 1200 by 630, PNG or JPG, under 1 MB if you can manage it, with the important content in the middle.

#The tags to copy

Open Graph comes from ogp.me, which defines four required properties (og:title, og:type, og:image, og:url) plus optional ones like og:description, og:site_name and image dimensions. X reads its own twitter: tags first and falls back to Open Graph when they're missing.

Paste this into the head of each page and change the values:

<meta property="og:type" content="website">
<meta property="og:url" content="https://yourproduct.com/">
<meta property="og:site_name" content="YourProduct">
<meta property="og:title" content="YourProduct: invoices for freelancers in 2 minutes">
<meta property="og:description" content="Create, send and chase invoices from one screen. Free for your first 10 clients.">
<meta property="og:image" content="https://yourproduct.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="The YourProduct invoice editor with a sent invoice">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="YourProduct: invoices for freelancers in 2 minutes">

Why each one matters:

• og:image with an absolute HTTPS URL. A relative path ("/og.png") breaks on many platforms. The image must load without a login or cookie.
• og:image:width and og:image:height. Meta says its crawler has to see an image once before it can render it, and that declaring the dimensions lets it render the image immediately on the first share.
• twitter:card set to summary_large_image. This is X's large-image card, and the twitter:title is required for it. Without a twitter:card, X may fall back to a small summary card built from your Open Graph tags.
• og:site_name. Shown above the title on several platforms, and Google also considers it when choosing your site name in search results.
• og:title. Keep it to about 60 characters so it isn't cut off in previews. Google lists og:title among the sources it can use for title links, so make it match your page title in spirit.

#On Next.js

If your site runs on Next.js (App Router), you don't have to write these tags by hand. Put an opengraph-image.png (or a generated opengraph-image.tsx) in the route folder and Next.js adds the tags, including width and height. The Next.js docs note that the build fails if opengraph-image exceeds 8 MB or twitter-image exceeds 5 MB, and their examples use 1200 by 630.

#What to put in the image

The image is an ad that appears every time someone shares your link, usually at a small size in a busy feed. Design it for a phone screen.

1. The product name and the outcome, in five to eight words, in large type. "Invoices in 2 minutes" beats a tagline about "the future of finance".
2. A real product screenshot, cropped to the most recognizable part of the UI.
3. Contrast that survives dark mode. Most feeds have a dark theme; a white image with light grey text disappears.
4. A safe zone. X uses 2:1 and other platforms 1.91:1, so a few dozen pixels at the edges can be cropped. Keep text out of the outer 5% or so.
5. No text smaller than about 40 pixels tall at 1200 by 630. It will be shrunk to a few hundred pixels wide in a feed.

One image per page or one for the whole site? One sitewide image is fine at launch. Later, give your highest-shared pages (pricing, blog posts, comparison pages) their own, ideally generated from the page title.

#PNG, JPG, WebP or SVG?

PNG or JPG is the safe choice. X's card documentation listed JPG, PNG, WEBP and GIF as supported and SVG as not supported, and it uses only the first frame of an animated GIF. Meta's and LinkedIn's help pages give sizes but not a full format list, so stick to PNG for screenshots and text, and JPG for photos. Never use SVG for og:image.

#One image per page: generating them automatically

Once you publish more than a handful of pages, a hand-made image per page stops scaling. The usual approach is a template: the same background and layout, with the page title and an icon filled in automatically.

• Next.js: a generated opengraph-image.tsx in a route folder renders an image from code, and the docs say generated images are statically optimized (built and cached) by default unless they use dynamic data.
• Other frameworks: most static site generators and CMSs have a plugin or a build step that renders title images. Check that the output is 1200 by 630 and that the URL is absolute.
• Keep the template boring. Big title, product name, a consistent color. Every shared link then looks like it came from the same product, which helps people recognize you in a feed.

For blog posts and guides, the title is usually the right text. For product pages, use the outcome ("Recurring invoices in one click"), not the page name ("Features").

#A pre-launch preview test, step by step

Do this two or three days before launch, so caches have time to settle and you can fix what's wrong:

1. View the page source and confirm og:title, og:description, og:image, og:url and twitter:card are in the raw HTML.
2. Open the og:image URL in a private window. It should load as an image, quickly, without a login.
3. Run the URL through Meta's Sharing Debugger and fix any warnings it lists.
4. Run it through LinkedIn's Post Inspector.
5. Paste it into the X post composer (don't send) and check the large card appears with nothing important cropped.
6. Paste it into a Slack or Discord DM to yourself.
7. Text it to yourself on a phone and look at the preview in your messaging app.

If one platform shows the old image after you've fixed it, change the image URL (add ?v=2) and re-run its tool.

#How to test and clear cached previews

Platforms cache previews aggressively. The classic launch-day bug: you fix the image, share the link, and the old broken preview still appears.

Two rules from the official docs worth knowing:

• Meta caches images by URL. Its docs say images "won't be updated unless the URL changes." If you replace og.png with a new file under the same name, add a version: og.png?v=2.
• LinkedIn's Post Inspector only fixes future posts. Its help page says the preview for existing posts with that URL stays the same. Fix the image before you post on launch day, not after.

#Why your OG image isn't showing

Work through these in order. The first one is the cause most of the time.

1. The tag isn't in the HTML the crawler sees. Preview crawlers generally don't run JavaScript. If your tags are added client-side, view the raw source (not the inspector) and check they're there.
2. The URL is relative or broken. Open the og:image URL in a private window. It must return an image, not an HTML page, a redirect to a login, or a 404.
3. The image is blocked. A robots.txt rule, a firewall or bot protection can block preview crawlers. Check your CDN's bot settings.
4. It's too small or too heavy. Below Meta's 600 by 315 you get a small thumbnail, and over 5 MB LinkedIn and X may skip it.
5. It's cached. Re-scrape with the tools above or change the image URL.
6. The card type is wrong. On X, a missing or "summary" twitter:card gives you a small square.

#Check it with Verdy

Verdy's free meta and social check reads your page with no signup and reports your title, meta description, H1, Open Graph title and image, X card, canonical and favicon. The free Verdy audit goes further on previews: it fetches your og:image and reports if it doesn't load or isn't an image, reads the file header for the real dimensions, and flags an image under 600 by 315, a ratio that will be cropped (outside about 1.6 to 2.1 to 1), a file over 5 MB, a missing or small X card, a share title over 70 characters, and a missing description or site name. The paid fix pack generates the social tags for you.

The launch console runs the same basics as part of its website check, so a missing share image shows up as a fix to make before you launch anywhere. Our landing page checklist covers the rest of the page.

#FAQ

#What is the best OG image size?

1200 by 630 pixels. It's Meta's recommended size, it clears LinkedIn's 1200 by 627 minimum, and X accepts it for large image cards. Keep the file under 5 MB and the key content away from the edges.

#What size should an OG image be for WhatsApp?

WhatsApp doesn't publish an official spec. It reads Open Graph tags, so the standard 1200 by 630 image works. Claims of a strict file size limit come from third parties, not WhatsApp, but a small file (well under 1 MB) loads faster on phones.

#What are the required Open Graph tags?

The Open Graph protocol requires og:title, og:type, og:image and og:url. In practice also add og:description, og:site_name, og:image:width and og:image:height, plus twitter:card set to summary_large_image for X. LinkedIn asks for og:title, og:image, og:description and og:url.

#Why is my OG image not showing on LinkedIn?

Usually the image is below LinkedIn's 1200 by 627 minimum, over 5 MB, behind a redirect or login, or the old preview is cached. Run the URL through LinkedIn's Post Inspector to refresh it. The refresh only applies to new posts; existing posts keep the old preview.

#Does X still have a card validator?

Not with previews. X removed the preview from its Card Validator, so the practical test is to paste the link into the post composer and look at the card before posting. X's crawler caches card data, so change the image URL if an old one sticks.

#Can I use an SVG as my OG image?

No. X's card documentation listed SVG as not supported, and other platforms don't reliably render it either. Export a PNG at 1200 by 630 instead; PNG keeps text and screenshots sharp.

#Do OG tags help SEO?

Not as a direct ranking factor. They control how your links look when shared, which affects clicks from social posts and chats. Google can use og:title when generating title links and og:site_name when choosing site names, so keep both accurate.

#Final recommendation

Make one 1200 by 630 image with your product name, the outcome and a real screenshot, link it with an absolute HTTPS URL, set twitter:card to summary_large_image, and test it on LinkedIn, Meta and in the X composer a few days before launch. Check your tags in seconds with Verdy's free meta and social check, and get your titles right with our meta title and description guide.