When you paste a link into Slack, X, or iMessage and it unfurls into a rich card with a big image, that image comes from your page's Open Graph tags. Get the size wrong and the card collapses into a tiny thumbnail or, worse, shows nothing at all. This guide gives you the exact dimensions and the meta tags to use.
The short answer
Use 1200 by 630 pixels. That is an aspect ratio of roughly 1.91 to 1, and it is the size every major platform renders as a full-width preview card. If you only remember one number, remember 1200 by 630.
Platform-by-platform sizes
| Platform | Recommended size | Notes |
|---|---|---|
| 1200 x 630 | Under 600 x 315 drops to a small thumbnail | |
| X (Twitter) | 1200 x 630 | Needs twitter:card set to summary_large_image
|
| 1200 x 627 | Treats 1200 x 630 the same in practice | |
| Slack | 1200 x 630 | Reads standard og:image
|
| Discord | 1200 x 630 | Reads standard og:image
|
| iMessage | 1200 x 630 | Reads standard og:image
|
The takeaway: one 1200 by 630 image satisfies all of them. You do not need a different file per platform.
Minimum, maximum, and file size
- Minimum for a large card: 600 by 315. Below this, Facebook and LinkedIn render a small square thumbnail next to the text instead of the big card.
- Aspect ratio: keep it at 1.91 to 1. If your image is a different ratio, platforms crop it, usually from the center, and your text can get cut off.
- File size: keep it under 8 MB for Facebook, but aim for well under 1 MB so the card loads fast. WebP or optimized PNG and JPEG all work.
- Safe zone: keep important text and logos away from the outer edges, since some apps crop a few pixels.
The meta tags you actually need
Put these in the <head> of every page you want to share:
<meta property="og:title" content="Your page title" />
<meta property="og:description" content="A one-line summary." />
<meta property="og:image" content="https://yoursite.com/og/your-page.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yoursite.com/og/your-page.png" />
Setting og:image:width and og:image:height is the detail most people skip. It lets the platform reserve the right space and render the large card immediately instead of guessing.
How to generate OG images from a URL
Designing a unique image for every page by hand does not scale. The pattern that does: build one small HTML template that renders the title and your branding, then capture that page as an image at 1200 by 630.
A screenshot API turns that into a single request. Point it at your template URL with a fixed viewport:
curl https://api.grabbit.live/v1/grabs \
-H "Authorization: Bearer sk_live_..." \
-H "Content-Type: application/json" \
-d '{ "url": "https://yoursite.com/og/my-post", "width": 1200, "height": 630 }'
The response gives you a hosted image_url you can drop straight into your og:image tag. Because the source is a real web page, you can style it with the same CSS as the rest of your site, pull in dynamic titles, and never open a design tool. This is exactly what Grabbit's screenshot API is built for, and you can wire it up with a free test key first.
Common mistakes
- Using a logo as the OG image. Logos are square and get cropped or shrunk. Use a 1200 by 630 card with the title.
-
Forgetting
summary_large_imagefor X. Without it, X shows the small card no matter how big your image is. -
A relative image URL.
og:imagemust be an absolute URL, includinghttps://. Crawlers do not resolve relative paths. - Not testing. Always preview the card before you publish. See the FAQ for how.
Wrapping up
One size, 1200 by 630, covers every major platform. Set the width and height tags, use an absolute URL, add summary_large_image for X, and generate the image from an HTML template so it scales across your whole site. For automating that last step, see how to generate dynamic OG images from any URL.
Originally published on the Grabbit blog.