Launchpack by Świt StudioOG image size: use 1200 × 630, and here's what each platform does with it
One image, one size, every platform. The exact numbers, what gets cut off where, and the mistakes that make previews disappear.
Use 1200 × 630 pixels (a 1.91:1 ratio), saved as JPG or PNG, under 1 MB, linked with an absolute https:// URL in og:image.
That one file shows as a large preview on X, LinkedIn, Facebook, Slack, Discord, iMessage and WhatsApp. Keep text and logos away from the top and bottom 30 px and the outer 60 px on each side, because some platforms crop a little.
Sizes and crops by platform
Every big platform builds its link preview from the same Open Graph tags, but each one draws the image a little differently. This is what happens to a 1200 × 630 image on each of them.
| Platform | Shown as | What happens to 1200×630 | Limits |
|---|---|---|---|
| X (Twitter) | 2:1 | Shown at 2:1, so about 15 px is trimmed from the top and bottom. Since late 2023 the large card shows only the image and your domain: no title, no description. Put the message on the image itself. | Under 5 MB. JPG, PNG, WEBP or GIF (first frame). Needs twitter:card = summary_large_image. |
| 1.91:1 | Shown in full above the title and domain. LinkedIn's own figure is 1200 × 627; the 3 px difference doesn't matter. | Under 5 MB. | |
| Facebook, Messenger | 1.91:1 | Shown in full above the domain, title and description. | At least 600 × 315 for the large layout, otherwise a small thumbnail. Under 8 MB. |
| Slack | original | Site name, title and description first, then the image, scaled down to a thumbnail-sized width. | Keep text big: the image is shown small. |
| Discord | original | Site name, title, description, then a large image in an embed. | Uses theme-color for the embed's side stripe. |
| iMessage | ≈1.91:1 | A large image with the title and domain under it. | Reads the tags on the sender's phone when the link is pasted. |
| varies | A large preview for wide images, a small square thumbnail in some chats. | Developers often report WhatsApp skipping heavy images; if it matters, keep the file small (a few hundred KB). |
The takeaway: you don't need a different image per platform. One 1200 × 630 file covers all of them. The only common reason to make a second image is an in-post image on X, where a 16:9 picture (1600 × 900) fills the timeline better than a link card. That's a different job from the OG image.
The safe zone
Most platforms show the whole 1.91:1 image, but X trims to 2:1 and some apps round the corners or lay a domain label over the bottom left. Keep anything that must be read inside the middle of the image.
Two more things to design for. First, the image is often shown at 400–500 px wide on a phone, so a headline should be at least 60 px tall on the 1200 px canvas to stay readable. Second, previews appear on white and on dark-mode backgrounds, so give the image its own background color instead of transparency.
File type and file size
- PNG for flat colors, text and UI screenshots. It stays sharp.
- JPG for photos and gradients. Quality 80–90 keeps it well under 1 MB.
- WebP works on X, Facebook, LinkedIn and Slack, but not in every app that reads link previews. Skip it unless you control where links are shared.
- SVG doesn't work as an OG image anywhere that matters.
- Size: aim for under 1 MB. Crawlers give up on slow downloads, and X's hard limit is 5 MB.
The meta tags to paste
Put these in the <head> of every page you want to share, in the HTML your server sends. Crawlers don't run JavaScript, so tags added by a client-side script are invisible to them.
<meta property="og:type" content="website">
<meta property="og:url" content="https://yourdomain.com/">
<meta property="og:title" content="Your product: what it does">
<meta property="og:description" content="One sentence on who it's for and why.">
<meta property="og:image" content="https://yourdomain.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="What the image shows">
<meta name="twitter:card" content="summary_large_image">You don't need twitter:title, twitter:description or twitter:image: X falls back to the Open Graph tags. You do need twitter:card, because that's what asks for the large image instead of a small square. The width and height tags let Facebook and LinkedIn draw the card before the image has finished downloading.
If the image doesn't show
The usual suspects are a relative image URL, tags added by JavaScript, an image the crawler can't download, and an old cached preview. Paste your URL into the link preview checker to see what X, LinkedIn and Slack read, and see OG image not showing for all nine causes and how to refresh each platform's cache.
What to put on it
On X the image is now the whole card, so it has to carry the message by itself. What works for product pages:
- The product name and one line on what it does. The same line as your tagline, not a slogan.
- A real screenshot, cropped to the part people care about. A screenshot says "this exists" faster than an illustration.
- Your brand color as the background, so the card is recognizable in a feed before anyone reads it.
- Nothing small. Fine print, URLs and badges disappear at phone size.
For blog posts, use the post title on the image: people share articles, and the title is the hook. Each page can and should have its own og:image.
Make a 1200 × 630 OG image in 30 seconds
Launchpack lays out your name, tagline and screenshot inside the safe area, plus the X, LinkedIn and Product Hunt sizes and the tags above. The OG image is free.
Questions
What is the best OG image size?
1200 × 630 pixels, a 1.91:1 ratio. It shows as a large preview on X, LinkedIn, Facebook, Slack, Discord, iMessage and WhatsApp, so one file covers every platform.
Is 1200×630 or 1200×627 better for LinkedIn?
Either. LinkedIn quotes 1200 × 627, but a 1200 × 630 image is shown the same way; the 3 px difference isn't visible.
Should I use 1200×675 (16:9) for X?
Not for the link card. X shows link cards at about 2:1, so a 16:9 image gets cropped more than a 1.91:1 one. Use 16:9 (for example 1600 × 900) for images you attach to a post, not for og:image.
Do I need a separate twitter:image?
No. X uses og:image when twitter:image is missing. You only need twitter:card set to summary_large_image.
What is the minimum OG image size?
Facebook needs at least 600 × 315 for the large layout and shows a small thumbnail below that. X's large card needs at least 300 × 157. Using 1200 × 630 keeps it sharp on high-resolution screens.
Why does my old OG image still show?
Platforms cache previews. Re-scrape in Facebook's Sharing Debugger or LinkedIn's Post Inspector; on X, Slack and Discord, share the link with a new query string such as ?v=2.