Open Graph Image Size Guide (2026): og:image Specs for Every Platform

Every time someone pastes your link into X, LinkedIn, Slack, WhatsApp, Discord, or iMessage, the platform fetches one image to represent the page. That image is the og:image, and for most people it is the first thing they ever see of your product.

Getting it right takes about ten minutes. Getting it wrong means a blurry crop, a stretched logo, or a grey box with no image at all - on every share, forever.

This guide covers the one size that works everywhere, how each platform crops it, the exact tags to ship, and how to force a stale preview to refresh.

The short answer: 1200 × 630

Use 1200 × 630 pixels (a 1.91:1 ratio), saved as PNG, JPG, or WebP, under 5 MB.

That single size is what Facebook, LinkedIn, Slack, Discord, and most messaging apps are designed around, and it also works for X's large summary card. You do not need a separate image per platform for link previews - you need one image designed with safe margins.

Design for the crop, not the canvas

Because platforms crop differently, treat the outer edges of a 1200 × 630 image as "might not be visible".

• Keep text and logos inside the centre ~1000 × 500 area. X trims height slightly; WhatsApp and some iMessage views crop toward a square.
• Use one focal point. A product screenshot in a laptop or phone frame reads at thumbnail size; a dense dashboard screenshot does not.
• Make text large enough to read at 25% size. Slack and Discord show previews small. If your headline is not readable when the image is 300 pixels wide, it is decoration, not copy.
• Avoid pure white backgrounds. Most feeds are white or near-black. A gradient or tinted background separates your card from the interface around it.

A framed product shot on a soft gradient is the most reliable pattern: it reads at any size, it shows the actual product, and it does not depend on text that might get cropped.

The exact meta tags to ship

Put these in the <head> of every page you want to share well:

<meta property="og:title" content="Your page title" />
<meta property="og:description" content="One sentence on what this page is." />
<meta property="og:image" content="https://example.com/og/home.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Example app dashboard shown in a laptop mockup" />
<meta property="og:url" content="https://example.com/" />
<meta property="og:type" content="website" />

<meta name="twitter:card" content="summary_large_image" />

A few details that cause most broken previews:

1. The image URL must be absolute and public. /og.png or a URL behind a login will fail silently.
2. Declare width and height. Without them, some platforms skip the image on the first share while they download it.
3. twitter:card must be summary_large_image if you want the big card on X. X falls back to your og: tags for title, description, and image, so you rarely need separate twitter:image tags.
4. Serve the image fast and with the right Content-Type. Crawlers time out quickly. An 8 MB PNG on a slow origin often means no image at all.

If you use Next.js, the metadata.openGraph.images field generates these tags for you - set width, height, and alt there.

Why your preview will not update (and how to force it)

Platforms cache link previews aggressively, often for days. If you changed your image and still see the old one:

• Facebook: paste the URL into the Sharing Debugger and choose "Scrape again".
• LinkedIn: paste the URL into the Post Inspector; it re-fetches on inspection.
• X: there is no public preview tool any more. Post the link in a draft or a DM to yourself to see the current card.
• Slack: previews are cached per workspace; adding a harmless query string such as ?v=2 to the shared link forces a fresh fetch.
• Everywhere: change the image file name (og-home-v2.png) instead of overwriting the old file. A new URL is the only cache-bust every platform respects.

What to put in the image

For a product or SaaS homepage, the highest-performing pattern is simple:

1. Your real product, framed in a laptop - or a laptop and phone together if mobile matters.
2. A gradient or brand-tinted background.
3. Optionally, a short headline (four to six words) above or beside the device.

For blog posts, a title-forward card works better, since the topic is what earns the click. For pricing, changelog, and feature pages, show the specific screen the page is about - it signals that the link goes somewhere concrete.

Making one in under a minute

You can design a 1200 × 630 card in Figma or Canva, but if the image is "our product in a device frame", it is faster to start from the live page:

1. Paste your URL into URL2Mockup's Open Graph image generator.
2. Choose laptop, phone, or laptop + phone, then pick the Open Graph (1200 × 630) canvas.
3. Pick a background and padding, and download the HD PNG.

The device is placed and padded inside the exact canvas, so nothing important lands in the crop zone. When the page changes, capture it again rather than redoing a design file.

Checklist before you ship

• 1200 × 630, under 5 MB, absolute HTTPS URL
• og:image:width, og:image:height, and og:image:alt set
• twitter:card set to summary_large_image
• Key content inside the centre safe area
• Readable at 300 pixels wide
• New file name after every change

FAQ

What is the best Open Graph image size?

1200 × 630 pixels. It is the size Facebook and LinkedIn design around, and it also fills X's large summary card. Smaller images (under 600 × 315) are shown as small thumbnails on many platforms.

Do I need a different image for X (Twitter)?

Usually not. With twitter:card set to summary_large_image, X uses your og:image. It displays close to a 2:1 ratio, so keep important content away from the top and bottom edges.

Can the og:image be a WebP or SVG?

WebP is widely supported by major platforms today, but PNG and JPG remain the safest choices. SVG is not supported for link previews - always export a raster image.

Why does my link show no image at all?

The most common causes are a relative image URL, an image behind authentication, a file that is too large or too slow to download, or a missing og:image tag on that specific page. Check the page source of the exact URL you are sharing.

Related reading: Launch image sizes cheat sheet · Product Hunt gallery image guide