og:image is the preview image shown when your URL gets shared on Twitter, LinkedIn, Slack, or Facebook. Without one, your link looks broken — just a flat URL with no thumbnail. With a good one, click-through on social shares lifts by 2–5×. It is the single most under-invested piece of metadata on most B2B sites.
What og:image actually is
Open Graph (OG) is a protocol Facebook introduced in 2010 and the rest of the web adopted. It is just a set of <meta> tags in the <head>of your page:
<meta property="og:title" content="...">
<meta property="og:description" content="...">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:url" content="https://example.com/page">When someone shares your URL, the receiving platform fetches your page, reads these tags, and renders the preview card. og:image is the visual portion of that card.
Dimensions that actually work
1200×630 pixels. This is the size every platform agrees on. Twitter, LinkedIn, Slack, Discord, Facebook, and iMessage all render this without cropping. Anything smaller gets upscaled and looks blurry. Anything wildly different gets cropped or rejected. The 1.91:1 ratio is also the size Facebook recommends and Twitter's “large image card” uses.
Some platforms support square 600×600 OG images for compact previews, but 1200×630 covers everything. Don't overthink it.
What to actually put on it
- The page title. Large, readable from a thumbnail.
- Your logo or brand mark. Small, in a consistent corner.
- A category badge or eyebrow. “Guide,” “Comparison,” “Pricing” — helps the reader categorize.
- One color background. Avoid busy images. Text on a solid (or subtly gradient) background reads at thumbnail size.
What not to put: a photo of your team, a screenshot of your dashboard, a word-cloud of your features. These look fine full-size, illegible at thumbnail.
Three ways to make one
1. Dynamically per page (best). If you're on Next.js App Router, create app/opengraph-image.tsx (or per-route variants) and use Vercel's ImageResponse to render at the edge. Each route gets its own image automatically. InBuild does this on every route — 400+ unique OG images, generated on demand, no design work per page.
2. A single brand template (good). Design one 1200×630 PNG in Figma or Canva. Use it across every page. The cost is one image; the benefit is every share has a preview. Most sites would dramatically improve by just doing this.
3. Pull from your content (situational). If your page is product- or photo-heavy (e.g. a blog post about a real event), use the featured image as og:image directly. Make sure it crops well at 1.91:1.
How to verify your og:image is working
- Paste your URL into Facebook's Sharing Debugger. See exactly what Facebook will render.
- Paste it into LinkedIn Post Inspector. Force a re-scrape if the image is cached.
- Use our free OG preview tool to see how the same URL renders on Twitter, LinkedIn, Slack, and Facebook side-by-side.
Three common mistakes
1. Setting openGraph in metadata without images.In Next.js, defining the openGraph object overrides the file-based opengraph-image.tsx discovery. If you define openGraph, you must also include the images array. We learned this the hard way on our homepage — metadata blocked the file-discovered image and every share went imageless for two weeks.
2. Using a relative URL. Always use an absolute URL for og:image. Twitter and LinkedIn ignore relative URLs and silently drop the image.
3. Forgetting to update after redesign. Facebook caches OG images for 7+ days. After a major redesign, manually re-scrape every important page in the Sharing Debugger to refresh the cache before announcing.