OG Image: Perfect Size, Format & Free Preview Tool (2026)
Everything about OG images: correct dimensions (1200x630), formats, HTML code snippet, common mistakes, and how to preview your og:image for free before sharing.
What Is an OG Image?
An OG image (short for Open Graph image) is the preview picture that appears when a URL is shared on social media platforms like Facebook, LinkedIn, Twitter/X, WhatsApp, Slack, and Discord. It is controlled by the <meta property="og:image"> tag placed in the <head> of your HTML document. Without it, platforms either display no image or pick one at random from your page — often with poor results.
The og:image tag is part of the Open Graph protocol, a standard introduced by Facebook in 2010 and now used by virtually every major social platform and messaging app. Getting your OG image right directly affects click-through rates: content with a compelling, correctly-sized preview consistently outperforms content with a broken or missing one. Think of it as your link's book cover — you get one shot to make an impression.
OG Image Dimensions by Platform (2026)
Each platform has its own cropping rules and minimum requirements. The table below shows the recommended og:image size for each major platform. See our in-depth OG image size guide for details on safe zones and cropping behavior.
| Platform | Recommended Size | Aspect Ratio | Min. Width | Notes |
|---|---|---|---|---|
| 1200 × 630 px | 1.91 : 1 | 600 px | Universal baseline | |
| Twitter / X | 1200 × 600 px | 2 : 1 | 300 px | Uses twitter:image if present |
| 1200 × 627 px | 1.91 : 1 | 1200 px | Strict min-width | |
| 400 × 209 px | 1.91 : 1 | 300 px | Thumbnail only; keep text large | |
| Slack | 600 × 314 px | 1.91 : 1 | 400 px | Inline unfurl in channels |
| Discord | 1200 × 630 px | 1.91 : 1 | 400 px | Same as Facebook; large embed |
Tip: Design at 1200 × 630 px — it satisfies Facebook, Discord, LinkedIn, WhatsApp, and Slack simultaneously. Twitter/X is close enough that minimal cropping occurs.
OG Image Format & File Size
Choosing the right file format keeps your image sharp while loading fast.
| Format | Best For | Transparency | Max Allowed | Verdict |
|---|---|---|---|---|
| JPG / JPEG | Photos, gradients | No | 8 MB | Default choice |
| PNG | Text, logos, flat graphics | Yes | 8 MB | Use for crisp text |
| WebP | Everything | Yes | 8 MB | Check platform support |
| GIF | Animation | Limited | 8 MB | Rarely rendered as GIF |
- The hard maximum is 8 MB, but most crawlers will skip images over 5 MB.
- Recommended target: under 300 KB. Aim for 100–200 KB for fast crawling and loading.
- Use JPG at 80–85% quality for photos — this typically yields 80–150 KB at 1200 × 630.
- Use PNG when your design has text, logos, or requires transparency.
- WebP saves 25–35% over JPG/PNG but verify that your target platforms support it — most do in 2026, but some older crawlers may fall back to a blank image.
OG Image HTML Code Example
Place these tags inside the <head> of every page. See our complete meta tags guide for a full reference.
<!-- Open Graph / OG Image -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A compelling description of your page.">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<!-- Twitter / X Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="A compelling description of your page.">
<meta name="twitter:image" content="https://example.com/og-image.jpg">Pro tip: Always include og:image:width and og:image:height. Without them, some crawlers must download the image to detect dimensions before rendering the preview — slowing things down and sometimes causing the image to be skipped entirely.
How to Preview Your OG Image
Before you share a link, verify exactly how it will look across platforms using Share Preview — no signup required.
Open https://share-preview.com in your browser. No account needed for instant previews.
Enter the full URL of the page you want to check (including https://). Supports any public URL.
Click Preview. The tool fetches your og:image, title, and description live from the page.
Toggle through Facebook, Twitter/X, LinkedIn, WhatsApp, Slack, and Discord previews to check each layout.
If something looks off, fix your meta tags or image, then re-fetch. When satisfied, share with confidence.
Common OG Image Mistakes & Fixes
og:image in your layout template. Override it per page where needed. Never leave the tag absent on any public page.
og-image.jpg?v=2) or change the image filename whenever you update it. Platforms cache OG images aggressively for 24–72 hours.
og:image URL must start with https://. HTTP images are blocked by Facebook, LinkedIn, and most modern crawlers. Verify your CDN SSL certificate is valid.
https://example.com/og-image.jpg. Relative paths like /og-image.jpg are not resolved by social crawlers and result in a broken or missing preview image.
Force Refresh a Cached OG Image
Updated your og:image but the old version is still showing on social media? Each platform has a dedicated tool to invalidate its cache and re-crawl your page.
After using a debugger tool, wait 2–5 minutes before sharing the link again. Platform caches propagate gradually across their CDN edge nodes.
Frequently Asked Questions
What is the ideal OG image size?
What file format should I use for an OG image?
Why is my OG image not showing on Facebook?
Can I use the same OG image for all platforms?
twitter:image tag pointing to a 1200 × 600 px variant. LinkedIn may center-crop slightly, so keep important content within a central safe zone.
How do I test my OG image before publishing?
Preview Your OG Image Right Now
No signup. No installs. Paste your URL and see exactly how it looks on every major platform in seconds.
Try Share Preview Free →