Open Graph Image Size & Format: 2026 Best Practices
Almost every "my link preview is broken" report comes down to the image, not the title, not the description, the og:image. This post is only about that image: the one size to use, the file-size ceilings that vary by platform, which formats actually work, where to keep your text so it survives cropping, and the two tags that fix the most common bug of all (a blank preview on the first share).
If you want the broader story of how each platform renders the whole card, read Open Graph and SEO impact. For the full property list, see the meta property OG reference. Here we go deep on pixels and bytes.
One size to standardize on: 1200 × 630
<meta property="og:image" content="https://seotest.app/og/post.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
That's 1200 × 630 pixels, a 1.91:1 aspect ratio. Facebook settled on 1.91:1 over a decade ago and LinkedIn, Slack, Discord, and X (when it falls back to Open Graph) all crop to roughly that frame. You can serve larger (2400 × 1260 keeps the same ratio and looks crisper on retina feeds), but never change the ratio, or your image gets letterboxed or sliced through the middle.
The width/height tags fix the first-scrape blank
The single most common broken-preview cause: a brand-new URL shared on Facebook or LinkedIn shows a card with no image, then magically gets one a day later. The reason is that on the first scrape the platform hasn't downloaded your image yet, so it doesn't know the dimensions and won't commit to the large-card layout. Declaring og:image:width and og:image:height tells it the dimensions up front, so it renders the full card on scrape one, which is exactly when your launch post goes out. Add these two tags and the bug disappears.
File-size ceilings (where it gets platform-specific)
Aspect ratio is universal; file weight is not. Keep one image under the lowest ceiling you care about and you're safe everywhere.
| Platform | Practical file-size limit | What happens if you exceed it | |---|---|---| | Facebook | 8 MB hard max; aim well under | Slow or skipped fetch | | LinkedIn | ~5 MB | May refuse to render | | X / Twitter | ~5 MB (images) | Card won't unfurl | | Discord / Slack | Several MB, scaled on the fly | Usually fine; high-res PNGs can render blurrier than equivalent JPGs | | WhatsApp / iMessage | ~300 KB sweet spot | Above it, often shows no image at all |
WhatsApp and iMessage are the binding constraint. They're aggressive about small payloads, so a heavy PNG screenshot that's fine on LinkedIn shows nothing in a chat thread. Target under ~300 KB and every platform is happy.
Format: JPG, PNG, and the WebP trap
| Format | Social preview support | Use it when |
|---|---|---|
| JPG | Universal | Photos, gradients, anything without hard edges; best size-to-quality |
| PNG | Universal | Logos, screenshots, sharp text, or you need transparency |
| WebP | Inconsistent; some scrapers don't decode it | Avoid for og:image; serve JPG/PNG instead |
| AVIF | Poor | Avoid for og:image |
| SVG | Not supported | Never use for og:image |
The trap is WebP. It's excellent on your own site and many image CDNs default to it, but several social scrapers don't decode WebP, so the card silently fails. Even if your page serves WebP to browsers, point og:image at a JPG or PNG. SVG simply isn't supported and will render nothing.
Rule of thumb: photo-led card → JPG at ~80% quality (usually 100–250 KB at 1200×630). Text/logo-led card → PNG, but compress it; an uncompressed PNG screenshot is the classic way to blow past the WhatsApp ceiling.
Safe text zones: design for the crop
Your 1200 × 630 canvas isn't all usable. Different surfaces crop the edges, and chat apps may show a near-square slice.
- Keep headline text and your logo inside a centered ~1100 × 580 safe zone, roughly 50 px of breathing room on every side.
- Assume the center square survives everywhere. WhatsApp and iMessage often crop to a square thumbnail, so anything that must read in chat belongs in the middle, not the corners.
- High contrast, large type. Feeds compress hard and previews are tiny; thin gray text on a busy photo turns to mud.
The non-negotiables
- Absolute HTTPS URL.
og:imagemust be a fully-qualifiedhttps://URL. A relative path (/og.jpg) or an HTTP image fails; WhatsApp in particular drops non-HTTPS images silently. - Publicly fetchable. No login wall, no hotlink protection, no
robots.txt/firewall block on the scraper. If a bot can'tGETit anonymously, there's no card. - Returns 200. A redirect chain or 404 to the image kills the preview.
Square fallback for WhatsApp and iMessage
Because chat apps crop toward a square, some teams ship a second, square og:image. You can declare more than one; most platforms take the first valid one they can use:
<meta property="og:image" content="https://seotest.app/og/post-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image" content="https://seotest.app/og/post-square.jpg">
<meta property="og:image:width" content="1080">
<meta property="og:image:height" content="1080">
For most sites this is optional polish; a well-centered 1.91:1 image already crops acceptably. Add the square only if chat shares are a primary channel.
Verify before you ship
Don't trust the markup; check what a scraper sees. Paste the live URL into our OG Checker to confirm the og:image resolves to a 200 HTTPS file with the right dimensions, then preview the rendered card across platforms with the Social Preview tool. Catching a WebP image or a missing width tag here takes ten seconds; catching it after your launch post has already unfurled blank does not.
Frequently Asked Questions
What is the correct og:image size?
1200 × 630 pixels at a 1.91:1 aspect ratio, served as an absolute HTTPS URL. Add og:image:width (1200) and og:image:height (630) so platforms render the large card on the first scrape.
Why is my Open Graph image blank on the first share but fine later?
The platform hadn't downloaded the image yet on the first scrape, so it couldn't size the card. Declaring og:image:width and og:image:height in your tags fixes this; it renders the full card immediately.
Can I use a WebP image for og:image?
Avoid it. Several social scrapers don't decode WebP, so the card can silently fail even though the file is valid. Serve a JPG or PNG for og:image, even if the rest of your site uses WebP.
Why does my image show on Facebook but not in WhatsApp or iMessage?
Usually file size or HTTPS. Chat apps want the image under roughly 300 KB and served over HTTPS, and they crop toward a square, so keep it small, secure, and with the focal point centered.
Do I need a different image size for X/Twitter?
No. Reuse the same 1200 × 630 image and set twitter:card to summary_large_image. Details are in the Twitter Card implementation guide.