← ogkit

OG image size in 2026

Ship a 1200 × 630 PNG or JPEG at a full https:// URL, add twitter:card = summary_large_image, and run the checklist below before you share. If previews still break, jump to LinkedIn, WhatsApp, or X cache purge.

Last verified 3 November 2026 against Facebook link preview image guidance and X large-card behaviour. Troubleshooting walkthrough: dev.to post #3 in queue (og-preview-debug.md).

Quick reference (2026)

Test your link preview before you ship

Run once per deploy (use a URL nobody has shared yet, or bump ?v= on the image):

• curl -s https://yoursite.com/page | grep -i og:image — tags must appear in server HTML, not only after JavaScript.
• Open the og:image URL in a private window — expect HTTP 200 and an image content-type (not HTML login).
• Paste the page into Facebook Sharing Debugger → Scrape Again after every change.
• Confirm twitter:card is summary_large_image — without it, X shows a tiny square.
• Re-test with curl -sI -A "Twitterbot/1.0" if a CDN/WAF might block crawlers.
• After fixes, bump ?v=2 on the image URL — WhatsApp and Telegram cache aggressively.

Detailed fixes (by platform)

Jump to: Facebook · LinkedIn · X card tag · WhatsApp · Telegram · Debugger warnings

Rule 1: size 1200 × 630

1200 × 630 (a 1.91:1 ratio) is the size Facebook recommends and the one X, LinkedIn, Slack and Discord all display well. Export at 2× (2400 × 1260) if you want it sharp on retina screens, but keep the file small. Keep the title big and centred: some apps crop to a square or show a small thumbnail.

Facebook share image size (2026)

Facebook’s link preview still expects a 1200 × 630 PNG or JPEG at a public https:// URL. Use raster only (not SVG). Stay under ~8 MB; aim for <300 KB so mobile scrapes finish quickly. After you change the file, open the Sharing Debugger, paste your page URL, and click Scrape Again — otherwise feeds keep showing the old image for days.

Fixing “og:image” warnings in the Sharing Debugger

Warnings usually mean: image smaller than ~600×315 (use 1200×630), a relative og:image path, a 404 or auth wall on the image URL, or a stale cache. Add explicit dimensions so the crawler knows the aspect ratio:

<meta property="og:image" content="https://example.com/share.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Re-scrape after every deploy. If the warning persists, curl the image URL from another network — if you can’t fetch it, neither can Facebook.

Rule 2: a full https:// URL

<meta property="og:image" content="https://example.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

The Open Graph protocol expects an absolute URL. A relative path like /og.png often shows no image at all.

Rule 3: the large-card tag for X (Twitter)

<meta name="twitter:card" content="summary_large_image">

Without it, X falls back to a small square thumbnail. X reads og:title, og:description and og:image if you don't set separate twitter: tags.

Rule 4: previews are cached

Platforms cache the preview the first time a link is shared. After you change the image, refresh it with LinkedIn Post Inspector or the Facebook Sharing Debugger, or add a version query string (og.png?v=2).

WhatsApp link preview thumbnail missing

WhatsApp’s crawler uses the same Open Graph tags as Facebook. If a shared URL shows title/URL but no image, check these in order:

1. Absolute https:// og:image — relative paths fail silently.
2. Public fetch — curl the image URL from a phone network; login walls, basic auth, and localhost break the preview.
3. Format & weight — JPEG or PNG; keep under ~300 KB so mobile scrapes finish. Very large files often drop the thumbnail.
4. Size — 1200 × 630 still works; tiny images (<~300 px on a side) are skipped.
5. Cache — WhatsApp caches hard. Bump ?v=2 on the image URL after edits; there is no public “scrape again” debugger like Facebook’s.

Same meta block that fixes Facebook/X usually fixes WhatsApp once the image is reachable.

Android vs iOS: Android WhatsApp often drops the thumbnail when iOS still shows it. Prefer JPEG over WebP, keep the file under ~300 KB, and confirm the image URL returns an image (not an HTML challenge page) on a mobile network. After fixing, bump ?v= and re-share from a new chat — Android caches aggressively.

Updated 2026-11-03.

Telegram link preview / large image

Telegram’s Instant View / link preview uses Open Graph tags. For a large preview image (not a tiny square), the same 1200 × 630 og:image that works for Facebook and LinkedIn is the reliable default in 2026.

1. Absolute https:// og:image — relative paths and mixed-content HTTP often show text-only previews.
2. Public fetch — Telegram’s crawler must reach the image without login. GitHub Pages and CDNs are fine; localhost and auth walls are not.
3. Size & weight — Prefer ≥300 px on the short side; 1200 × 630 JPEG/PNG under ~300 KB scrapes reliably on mobile.
4. Cache — Telegram caches previews. After changing art, bump ?v=2 on the image URL and paste the link into a fresh chat (or clear via a bot that re-fetches).

If GitHub / docs pages show a small preview, check that the page’s own og:image is large enough — Telegram often prefers the page meta over the first image in the HTML.

Generate a correct-size card in the browser with ogkit (free, no upload). Soft pack: ogkit Pro.

Updated 2026-11-03 (scout).

Twitter card: summary vs summary_large_image

summary shows a small square thumbnail beside the text. summary_large_image shows a wide hero image (your 1200×630). For launches, docs and marketing pages, use:

<meta name="twitter:card" content="summary_large_image">

X still reads og:title / og:description / og:image when separate twitter: tags are missing — but without an explicit card type you often get the small summary layout.

How to force a Twitter / X card cache refresh

X caches card markup aggressively. After you change tags or the image:

1. Bump the image URL (?v=2) so the crawler sees a new resource.
2. Open the page once in a private window to confirm the live HTML has the new tags.
3. Use X’s Card Validator / re-paste the URL in a composer draft (tools change names; LinkedIn Post Inspector + Facebook Debugger still help for OG parity).
4. Wait — some caches take minutes to hours even after a successful scrape.

If the validator says “no card found”, fix tags first (absolute og:image, reachable HTTPS, twitter:card), then purge.

How Facebook picks the share preview image

When someone pastes your URL, Facebook’s crawler prefers, in practice:

1. An explicit og:image (absolute https://, raster PNG/JPEG).
2. Otherwise a large enough image embedded in the page HTML.

Relative paths, HTTP→HTTPS mismatches, login walls, and SVG files commonly produce “no image” or stale previews. Set width/height meta, keep the file public, and use the Sharing Debugger’s Scrape Again after every change. Same absolute og:image also drives LinkedIn, Slack, Discord and WhatsApp.

LinkedIn link preview / og:image size

LinkedIn’s crawler reads the same Open Graph tags as Facebook. In 2026 the reliable recipe is still:

• 1200 × 630 px (≈1.91:1) PNG or JPEG — the size LinkedIn’s docs still cite for share images.
• Absolute https:// URL in og:image (relative paths and HTTP redirects often yield a blank card).
• Optional but helpful: og:image:width / og:image:height matching the file.
• Public file: no login wall, no robots block on the image URL.

After you change the image, open LinkedIn Post Inspector, paste the page URL, and re-inspect. LinkedIn caches aggressively; changing only pixels at the same URL may not refresh — bump a query string (?v=2) or rename the file.

Common failures: SVG/WebP as the only og:image, image larger than a few MB, or a preview that still shows an old logo because the Inspector was never re-run. The same 1200×630 asset works for Facebook, X (with twitter:card=summary_large_image), Slack and Discord.

The full tag set to copy

<meta property="og:type" content="website">
<meta property="og:title" content="Your title">
<meta property="og:description" content="One sentence about the page">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/og.png">
<meta name="twitter:card" content="summary_large_image">

FAQ

What is the best OG image size?

1200 x 630 pixels (1.91:1). It displays well on Facebook, X, LinkedIn, Slack and Discord.

Why does my link preview show no image?

The most common causes are a relative og:image URL, an image the crawler can't fetch, or an old cached preview. Use a full https:// URL and re-scrape with LinkedIn Post Inspector or the Facebook Sharing Debugger.

How do I get a large image card on X (Twitter)?

Add <meta name="twitter:card" content="summary_large_image"> alongside your og:image tag.

Do I need separate twitter:image tags?

No. X falls back to the Open Graph tags (og:title, og:description, og:image) when twitter: tags are missing.

Why does WhatsApp show no thumbnail for my link?

Use an absolute https:// og:image URL (JPEG/PNG, preferably under ~300 KB), make sure the image is publicly fetchable, and bump ?v=2 after changes — WhatsApp caches previews aggressively and has no public debugger.

What size should a LinkedIn share image be?

Use 1200 × 630 (1.91:1) JPEG/PNG with an absolute https og:image, then re-check with LinkedIn Post Inspector. Details: LinkedIn og:image.

Related guides: App Store screenshot sizes (6.5" / 2026) · Favicon not updating (cache bust) · What's New from a changelog

On DEV: App Store screenshot sizes · Favicon cache fixes · ogkit tool