Open Graph guide
OG Image Size & Dimensions: The Complete 2026 Guide
The recommended OG image size is 1200 × 630 pixels, with a 1.91:1 aspect ratio — a safe default across Facebook, LinkedIn, Slack, Discord, WhatsApp, and Google. This guide covers the exact dimensions for every major platform, the meta tags that control them, and the mistakes that turn your links into blank grey boxes.
What is an OG image?
An OG (Open Graph) image is the preview image that appears when you share a link on social media or messaging apps. It is defined by a single line of code in your page's <head>:
<meta property="og:image" content="https://yoursite.com/preview.jpg" />The “OG” stands for the Open Graph protocol, a standard originally created by Facebook so that any web page could control how it looks when shared. When someone pastes your link into Facebook, LinkedIn, Slack, or iMessage, that platform's crawler visits your page, reads the Open Graph tags, and builds a rich preview card from them: an image, a title, and a description.
No OG image means no preview card, and a link with no preview gets noticeably fewer clicks than one with a crisp, correctly sized image.
The standard OG image size: 1200 × 630 px
If you only remember one number, remember 1200 × 630 pixels. Here is why this is the universal recommendation:
- Aspect ratio of 1.91:1 is what Facebook, LinkedIn, and most Open Graph consumers expect for a large preview card.
- 1200 px wide is large enough to stay sharp on high-resolution (Retina) displays without being so heavy it slows the crawler.
- Under 8 MB, ideally under 1 MB. Many platforms (WhatsApp in particular) will silently drop an image that is too large and fall back to a tiny thumbnail.
- Minimum 200 × 200 px. Below this, most platforms refuse to show a large card at all.
Use JPG or PNG. JPG is usually the better choice for photographic OG images because the file is smaller; PNG is better for graphics with flat colors and text. WebP is now accepted by every major platform too, and produces the smallest files — just keep a JPG/PNG fallback if you support older crawlers.
OG image dimensions by platform (2026)
A single 1200 × 630 image will work everywhere, but each platform has its own ideal. Here are the current recommended sizes:
| Platform | Recommended size | Aspect ratio | Tags used |
|---|---|---|---|
| 1200 × 630 px | 1.91:1 | Open Graph (og:image) | |
| X (Twitter) | 1200 × 675 px | 16:9 | Twitter Card (twitter:image), falls back to OG |
| 1200 × 627 px | 1.91:1 | Open Graph (og:image) | |
| Slack | 1200 × 630 px | 1.91:1 | Open Graph (og:image) |
| Discord | 1200 × 630 px | 1.91:1 | Open Graph (og:image) |
| 1200 × 630 px (min 300 × 200) | 1.91:1 | Open Graph (og:image) | |
| Telegram | Min 320 px wide | 1.91:1 | Open Graph (og:image) |
| Bluesky | 1200 × 630 px | 1.91:1 | Open Graph (og:image) |
| Threads | 1200 × 630 px | 1.91:1 | Open Graph (og:image) |
| Mastodon | 1200 × 630 px | 1.91:1 | Open Graph (og:image) |
| 1000 × 1500 px | 2:3 (vertical) | Open Graph + Rich Pins | |
| 1200 × 630 px | 1.91:1 | Open Graph (no clickable feed links) | |
| Google Search | 1200 × 630 px | 1.91:1 | <title> + meta description |
A few platform notes worth knowing:
- X (Twitter) prefers a 16:9 image (1200 × 675) when you set
twitter:cardtosummary_large_image. If you skip Twitter Card tags entirely, X falls back to your OG image, so you are never left with nothing. - Bluesky, Threads, and Mastodon all read the standard Open Graph tags, so the same 1200 × 630 image renders correctly with no platform-specific work.
- Pinterest is the outlier: vertical 2:3 images (1000 × 1500) perform dramatically better than horizontal ones. If Pinterest matters to you, serve a separate tall image.
- Instagram does not make links in feed posts clickable, but your OG image still shows up when a link is shared in DMs, Stories link stickers, and bio-link tools — so it is worth getting right.
- WhatsApp caches aggressively and is strict about file size. Keep the image under ~600 KB to guarantee the large card instead of a tiny thumbnail.
The OG meta tags you actually need
The image is one tag, but a complete, robust preview uses a small set of tags. Here is a production-ready block:
<!-- Open Graph -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short, compelling description (under ~155 characters)." />
<meta property="og:image" content="https://yoursite.com/preview.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Describe the image for accessibility" />
<meta property="og:url" content="https://yoursite.com/page" />
<meta property="og:type" content="website" />
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A short, compelling description." />
<meta name="twitter:image" content="https://yoursite.com/preview.jpg" />Two tags people forget that genuinely matter:
og:image:widthandog:image:heightlet platforms render the card immediately instead of waiting to download and measure the image. This prevents the brief “blank card” flash.og:image:altis the accessibility description, read by screen readers and a small ranking/quality signal.
Always use absolute URLs (starting with https://) for og:image. Relative paths like /preview.jpg are the single most common reason an image fails to load.
How to set your OG image
Plain HTML
Paste the meta block above into the <head> of your page. That is it.
WordPress (Yoast or Rank Math)
You usually do not touch code. In Yoast SEO, open a page or post, go to the Social tab, and upload a Facebook and X image. Yoast writes the OG and Twitter tags for you. Rank Math has the same under its Social settings. To set a sitewide default image (used when a page has none), look under the plugin's global Social settings.
Next.js / Vercel
Next.js 13+ supports file-based metadata. Add an opengraph-image.jpg (1200 × 630) to a route segment and Next.js wires up the tags automatically. For dynamic, per-page images, Vercel's @vercel/og library (built on Satori) generates an image from JSX at request time, so each blog post or product page gets a custom preview without you designing each one by hand.
Nuxt / other frameworks
Nuxt's useSeoMeta() composable sets OG and Twitter tags declaratively. The principle is the same everywhere: render the tags server-side so the crawler sees them in the initial HTML, not after JavaScript runs.
How to test your OG image before you share
Never trust that it “probably works.” Crawlers cache, paths break, and a tag that looks right can still fail. Before you publish or run a campaign, check the actual rendered preview.
The fastest way is to run your URL through our free Social Media Previewer. It shows how your link will look on Facebook, X, LinkedIn, Slack, Pinterest, and Google at once, validates 13+ Open Graph, Twitter Card, and SEO tags, and flags missing images or broken descriptions — all in your browser with no sign-up.
For refreshing a platform's cache specifically:
- Facebook: the Sharing Debugger forces a re-scrape.
- LinkedIn: the Post Inspector clears and refreshes cached link data.
- Telegram: message
@WebpageBotwith the URL.
Common OG image mistakes (and how to fix them)
The image doesn't show up at all. Almost always a relative URL. Change /preview.jpg to the full https://... path. Also confirm the image is publicly accessible (not behind a login or robots.txt block).
The wrong image or old image appears. The platform cached an earlier version. Re-scrape it with the platform's debugger (above). Caches can hold for days otherwise.
Text in the image gets cut off. You are designing too close to the edges. Keep important text and logos within a “safe zone” of about 1140 × 570, centered, so nothing is cropped when platforms trim to their own ratio.
The image looks blurry. It is being upscaled. Export at the full 1200 × 630 (or 2× for extra sharpness) — don't let a 600 px image stretch to fill the card.
Works on Facebook but not on X. You are missing twitter:card. Add summary_large_image and a twitter:image.
Title or description is wrong. Another plugin or your CMS theme is also writing OG tags, producing duplicates. Pick one source of truth and remove the rest.
Why this is worth getting right
A link preview is the first impression of your content, and posts with a correct, well-designed OG image earn meaningfully higher click-through rates than links that show a blank card. The fix is cheap — a few lines of HTML and one well-sized image — and it compounds: every share, every Slack paste, every LinkedIn post looks more professional and gets more clicks.
If you share links offline too, the same logic applies to the page behind a QR code. A scannable code that lands on a page with broken previews still makes a weak impression the moment someone shares it onward. (QRKit makes dynamic QR codes you can point at any URL, with tracking and analytics built in.)
Set your OG image to 1200 × 630, add the full tag block, and verify it with the Social Media Previewer before you hit publish.
Frequently asked questions
See exactly how your link will look
Paste any URL into the free QRKit Social Media Previewer to check your OG image, title, and description across Facebook, X, LinkedIn, Slack, Pinterest, and Google — and fix issues before you publish.