og image examples that show eight mistakes teams make with Open Graph cards — and a safer alternative beside each one. Sketches are HTML/CSS with made-up publishers only: no real brands, logos or screenshots of live sites.
Last checked: October 2026 (platform size data).
These sketches compare common Open Graph mistakes with a safer alternative. Cards use made-up publishers and HTML/CSS only — no real logos, no screenshots of live sites. Use them as a checklist before you ship an og:image.
Link previews are not your homepage layout. Facebook, LinkedIn, WhatsApp and X fetch the first HTML response, read a handful of tags, and draw a compact card. When the image is tiny, relative, overweight, oddly cropped or low contrast, the card looks unfinished even if the page itself is polished. Walk the list below, then verify a live URL with theLink Preview Checkeror resize art in theImage Resizer.
A 200×200 (or smaller) file often collapses to a thumbnail or fails the large-card path. Design at about 1200×630 so Facebook, LinkedIn and WhatsApp have enough pixels after crop.
northline.example
Weekly field notes
A short dispatch from the workshop.
Northline Notes
northline.example
Weekly field notes from the workshop
Clear landscape art fills the card so the headline stays readable after crop.
Northline Notes
Crawlers need an absolute https og:image. A path like /og.png is resolved differently (or not at all) by bots. Always publish a full https URL.
cedarpress.example
Launch checklist
Relative /share.png never reaches the crawler.
Cedar Press
cedarpress.example
Launch checklist for share cards
https://cedarpress.example/og/launch.png is fetchable by every bot.
Cedar Press
Platforms crop a few percent from each side. Keep headlines inside a safe inset (about 10%) so titles are not clipped on Facebook or X.
harbordesk.example
EDGE CASE
Type sits on the crop line.
Harbor Desk
harbordesk.example
Keep headlines inside the safe area
Inset typography survives Facebook and X crops.
Harbor Desk
WhatsApp is picky about file weight. Practical max about 600 KB; aim for 200-400 KB. Heavy PNGs often disappear from chat previews.
rivermail.example
Product update
2.4 MB PNG — chat cards often drop the image.
River Mail
rivermail.example
Product update worth opening
Compressed JPG in the 200-400 KB range keeps the WhatsApp thumbnail.
River Mail
og:image:alt describes the share image for accessibility and some clients. Empty alt is a soft miss — add a short plain-language description of the artwork.
lumenlab.example
Research brief
Card image has no og:image:alt.
Lumen Lab
lumenlab.example
Research brief with described art
Alt: “Landscape card with brief title on a soft blue field.”
Lumen Lab
Two titles or two og:image tags from a theme plus a plugin confuse crawlers. Keep exactly one title, one description and one primary og:image in the first HTML response.
atlasweekly.example
Title A / Title B
Plugin and theme both emit og:title.
Atlas Weekly
atlasweekly.example
One clear title for the card
A single og:title and og:image in the head.
Atlas Weekly
A tall 9:16 story frame letterboxes or crops awkwardly in landscape feeds. Prefer ~1.91:1 (1200×630) for link previews unless you intentionally target Pinterest’s 2:3 pins.
pinepaper.example
Tall story frame
9:16 art wastes space in link cards.
Pine & Paper
pinepaper.example
Landscape preview that fits feeds
1.91:1 matches Facebook, LinkedIn and WhatsApp cards.
Pine & Paper
Pale grey type on a washed background fails when platforms recompress the image. Use strong contrast so the headline still reads after JPG encoding.
signaldraft.example
Almost invisible headline
Low contrast disappears after recompression.
Signal Draft
signaldraft.example
Bold headline on a dark band
High contrast survives social recompression.
Signal Draft
Workflow
Treat each “bad” card as a smell test for your own head tags. View Source (not DevTools Elements) and confirm a single absolute https og:image, a landscape canvas near 1200×630, and a file light enough for WhatsApp. Keep headlines inside a safe inset; add og:image:alt; avoid duplicate titles from themes and plugins. For a printable tag list and platform size table, open theOG tags cheat sheet.
After you fix artwork, change the image path or query string so caches pick up the new file, then rescrape Facebook and LinkedIn. The sketches here never claim to reproduce a vendor pixel-perfectly — they teach the failure mode. Official pixel rows and status labels still live in our size guides andplatforms.ts data (last checked October 2026).
If you only remember three rules: absolute https images, roughly 1.91:1 at 1200×630, and keep WhatsApp files in the 200-400 KB range. Everything else on this page is a variation of those three. When a card still looks wrong after a deploy, the problem is usually cache, a second competing tag, or a file the crawler cannot download anonymously — not the CSS on your marketing page.
Each answer matches the short explanation on the example cards above.
A 200×200 (or smaller) file often collapses to a thumbnail or fails the large-card path. Design at about 1200×630 so Facebook, LinkedIn and WhatsApp have enough pixels after crop.
Crawlers need an absolute https og:image. A path like /og.png is resolved differently (or not at all) by bots. Always publish a full https URL.
Platforms crop a few percent from each side. Keep headlines inside a safe inset (about 10%) so titles are not clipped on Facebook or X.
WhatsApp is picky about file weight. Practical max about 600 KB; aim for 200-400 KB. Heavy PNGs often disappear from chat previews.
og:image:alt describes the share image for accessibility and some clients. Empty alt is a soft miss — add a short plain-language description of the artwork.
Two titles or two og:image tags from a theme plus a plugin confuse crawlers. Keep exactly one title, one description and one primary og:image in the first HTML response.
A tall 9:16 story frame letterboxes or crops awkwardly in landscape feeds. Prefer ~1.91:1 (1200×630) for link previews unless you intentionally target Pinterest’s 2:3 pins.
Pale grey type on a washed background fails when platforms recompress the image. Use strong contrast so the headline still reads after JPG encoding.