devLap

What Is an OG Image? Why Your Shared Links Look Broken

javascript dev.to

When someone shares your URL on Slack, X, or LinkedIn, the platform fetches a small metadata snapshot of your page and renders a preview card. The image in that card is the OG image. If you have not explicitly set one, the platform either guesses (often badly) or shows nothing at all.

What "OG" stands for

OG is short for Open Graph, a protocol Facebook introduced in 2010 to give websites a standard way to describe themselves to social crawlers. The spec defines a set of <meta> tags you put in your page's <head>. The most important ones are:

<meta property="og:title"       content="Page title" />
<meta property="og:description" content="One-sentence description." />
<meta property="og:image"       content="https://yoursite.com/og/home.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url"         content="https://yoursite.com/" />
Enter fullscreen mode Exit fullscreen mode

Every major platform reads these tags: Facebook, LinkedIn, X, Slack, Discord, iMessage, WhatsApp, and Teams. The og:image tag is the one that fills the visual slot in the preview card.

Why shared links look broken without one

When a platform crawler visits your URL and finds no og:image tag, it either:

  • Picks the first image it finds on the page (often a logo, icon, or product thumbnail that was not designed for 1200 by 630)
  • Falls back to a gray placeholder
  • Shows nothing

None of those outcomes help. A broken preview costs clicks because users cannot tell at a glance what the link is about. A well-set OG image does the opposite: it communicates the content before anyone reads the title.

The standard dimensions

The universally safe size is 1200 by 630 pixels (a 1.91:1 ratio). This is what Facebook, LinkedIn, X, Slack, and Discord all render as a full-width card. Below 600 by 315 most platforms shrink the image to a small thumbnail beside the title instead of a full card.

Set the width and height tags alongside the image URL:

<meta property="og:image"        content="https://yoursite.com/og/post-slug.webp" />
<meta property="og:image:width"  content="1200" />
<meta property="og:image:height" content="630" />
Enter fullscreen mode Exit fullscreen mode

For exact breakdowns by platform see Open Graph image sizes and dimensions.

X (Twitter) cards

X reads og:image automatically, but to trigger the large preview format you need one extra tag:

<meta name="twitter:card"  content="summary_large_image" />
<meta name="twitter:image" content="https://yoursite.com/og/post-slug.webp" />
Enter fullscreen mode Exit fullscreen mode

Without twitter:card set to summary_large_image, X collapses your preview to a small thumbnail regardless of your og:image dimensions.

Why one image per page beats one image for everything

A global fallback image (like your homepage hero) keeps every shared link looking identical. A per-page OG image tells the reader at a glance what that specific page is about. Blog posts, product pages, and documentation pages all carry different information, and the preview card is the first signal users see in a feed.

The friction here is design. Creating a unique image for every page does not scale unless you automate it.

Automating OG images with a screenshot API

The scalable approach: build one HTML template that renders your brand, title, and description at 1200 by 630, then capture it with a screenshot API once per page. The template lives in your codebase; the API handles the headless browser.

curl https://api.grabbit.live/v1/grabs \
  -H "Authorization: Bearer sk_live_..." \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://yoursite.com/og?title=What+Is+an+OG+Image&category=Guides",
    "width": 1200,
    "height": 630,
    "format": "webp"
  }'
Enter fullscreen mode Exit fullscreen mode

The response gives you a hosted image_url you can use directly in your og:image tag:

{"id":"grb_01jx...","status":"done","image_url":"https://cdn.grabbit.live/grabs/grb_01jx....webp","width":1200,"height":630,"format":"webp","bytes":41280,"execution_ms":870}
Enter fullscreen mode Exit fullscreen mode

Call the API once at publish time or on the first request, store the returned URL, and serve it on every subsequent visit. One API call per unique page; no design tool required.

For a step-by-step walkthrough of the template-and-capture pattern see How to generate dynamic OG images from any URL. For full API details see the Grabbit screenshot API.

Checking what your OG image actually looks like

After adding the tags, verify the result before publishing:

  • Facebook: Sharing Debugger shows exactly what the crawler sees and lets you force a re-scrape to clear stale cache.
  • LinkedIn: Post Inspector works the same way.
  • X: The X Card Validator previews the card layout, including whether summary_large_image is triggering.

Crawlers cache aggressively. If you update your og:image tag and the old image still shows up, hit the platform's debugger to force a fresh fetch. For the full preview workflow, including how to test from localhost, see how to test and preview your OG image before publishing.

Common reasons the tag is set but the image still does not appear

  • The image URL returns a redirect instead of the image directly; some crawlers do not follow redirects
  • The image is behind authentication or a firewall the crawler cannot reach
  • The image is smaller than 200 by 200 pixels (Facebook's minimum for displaying a full-width card)
  • The page renders the og:image tag via JavaScript after load; crawlers typically execute little to no JavaScript, so server-render your meta tags

Server-side rendering or static generation of meta tags is the reliable approach. If your framework generates og:image at request time on the server, the crawler will always see it.

Originally published on the Grabbit blog.

Source: dev.to

arrow_back Back to Tutorials