Inspiration

26 real OG image examples — brands, blogs & indie sites

Every card below is the actual og:image that site serves today — live, not a screenshot. Steal the patterns, thengenerate your own orcheck how yours compares.

SaaS & Productivity

Photography, illustration and brand gradients — the three directions SaaS brands take when trust matters more than novelty.

Stripe og:image example — StripePhotography + brand gradient overlay — premium and instantly recognizable.Check this site →

Linear og:image example — LinearNear-black product aesthetic; the card looks like the app feels.Check this site →

Notion og:image example — NotionIllustration-forward and human — stands out in a feed full of gradients.Check this site →

Figma og:image example — FigmaA rare animated GIF og:image — motion stops the scroll.Check this site →

Slack og:image example — SlackReal product UI as the hero — shows the product instead of describing it.Check this site →

Airtable og:image example — AirtableClean illustration plus a headline — readable even as a tiny thumbnail.Check this site →

Basecamp og:image example — BasecampHand-drawn illustration style — personality no template can fake.Check this site →

Developer Tools

Dark themes, wordmarks and geometry. Dev tools know their audience screenshots everything — including the preview card.

GitHub og:image example — GitHubEvent-branded artwork — ties the link preview to a campaign.Check this site →

Astro og:image example — AstroLogo on brand gradient — simple, always on-brand, zero maintenance.Check this site →

Next.js og:image example — Next.jsDark background, logo, tagline — the dev-tool trifecta.Check this site →

Tailwind CSS og:image example — Tailwind CSSGenerated dynamically per page (Next.js opengraph-image convention).Check this site →

Cloudflare og:image example — CloudflareOrange on dark — brand color used at full strength, no logo needed.Check this site →

Bun og:image example — BunBenchmark-flavored share card — speaks straight to its audience.Check this site →

Vercel og:image example — VercelHigh-contrast black/white geometry — unmistakable at any size.Check this site →

Netlify og:image example — NetlifyA disciplined default card — consistent on every page of the site.Check this site →

Media & Publishing

Publications lean on brand lockups and editorial illustration — their og image is the new front page.

The Verge og:image example — The VergeBold yellow brand strip — color as identity.Check this site →

WIRED og:image example — WIREDLogo lockup only — the minimal end of the spectrum.Check this site →

Smashing Magazine og:image example — Smashing MagazineMascot illustration with personality — memorable in a crowded feed.Check this site →

Blogs & Indie Sites

Personal blogs and independent sites — proof you do not need a design team, just a system. Note how the best ones generate a unique card per post automatically.

Lee Robinson og:image example — Lee RobinsonAuto-generated per post — a system, not a designer.Check this site →

Overreacted (Dan Abramov) og:image example — Overreacted (Dan Abramov)Gatsby-generated cards with huge doodle typography.Check this site →

levels.io og:image example — levels.ioThe indie-hacker flagship — one strong photo, zero fuss.Check this site →

Indie Hackers og:image example — Indie HackersCommunity cards with faces — people click people.Check this site →

sive.rs og:image example — sive.rsOne photo, held for years — consistency beats novelty.Check this site →

Cassidy Williams og:image example — Cassidy WilliamsPersonal brand card — bold name, bold color, done.Check this site →

E-commerce & Platforms

Commerce brands sell with photography and human faces — their previews have to work harder than a logo.

Shopify og:image example — ShopifyCommerce photography that says "business" before a word is read.Check this site →

WordPress.com og:image example — WordPress.comFresh photography + headline combo — welcoming, not corporate.Check this site →

Live cards, not screenshots — these are the og:image tags each site serves today. Run a check on any of them →

Make one like these in 30 seconds

Eight templates, your colors, your text — rendered in your browser, downloaded as PNG.

Open the free OG image generator →Check your current og:image →