OG images
Open Graph Image Sizes and Dimensions: The Complete 2026 Guide
June 10, 2026 · 4 min read · Grabbit Team
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://grabbit.live/api/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.
FAQ
- What is the best Open Graph image size?
- 1200 by 630 pixels, an aspect ratio of about 1.91 to 1. This size looks crisp on every major platform and is the value Facebook, LinkedIn, and Slack expect.
- What is the minimum OG image size?
- Facebook accepts images down to 200 by 200 pixels, but anything under 600 by 315 renders as a small thumbnail instead of a large card. Use 1200 by 630 to guarantee the large preview.
- What aspect ratio should an OG image use?
- 1.91 to 1. That matches the large link preview card. Square images (1 to 1) are used by some platforms as a fallback, so 1200 by 630 is the safe default.
- What is the difference between og:image and twitter:image?
- og:image is read by Facebook, LinkedIn, Slack, Discord, and most apps. X reads twitter:image and twitter:card. You can set twitter:image to the same 1200 by 630 file, or omit it and X will fall back to og:image.
- How do I generate OG images automatically?
- Build a small HTML template page that renders the title and branding, then capture it at 1200 by 630 with a screenshot API. Each post gets a unique, on-brand image without manual design work.
Capture any website with one API call
Get a free test key and capture your first screenshot in two minutes.
Written by
Grabbit Team
Screenshots as a service
The team behind Grabbit, the screenshot API for developers and AI agents. We write about web capture, rendering, and automating screenshots at scale.