An OG image (Open Graph image) is the preview image that social platforms display when a URL is shared. You control it by adding a meta property='og:image' tag to your page's HTML head, pointing to an image hosted at a public URL. Without it, platforms either guess which image to show or display nothing.

Why is there no image when I share my link?

The most common causes are a missing og:image meta tag, a tag that points to a URL the crawler cannot reach, or an image that is too small (Facebook requires at least 200 by 200 pixels). Add the tag, ensure the image URL is publicly accessible, and re-scrape your page through the platform's debugger to clear the cached result.

What size should an OG image be?

1200 by 630 pixels at 1.91:1 ratio. That is the size Facebook, LinkedIn, X, Slack, and Discord all render as a full-width preview card. Include og:image:width and og:image:height meta tags so platforms reserve the correct space before the image loads.

How do I add an OG image to my website?

Add three meta tags inside your HTML head: meta property='og:image' with the image URL, meta property='og:image:width' set to 1200, and meta property='og:image:height' set to 630. For X, add meta name='twitter:card' with value 'summary_large_image' and meta name='twitter:image' with the same URL.

Do I need separate OG images for X (Twitter) and Facebook?

Not necessarily. A 1200 by 630 pixel image works across Facebook, LinkedIn, X, Slack, and Discord. X reads og:image if no twitter:image tag is present. The only reason to add a separate twitter:image is to serve a different image specifically on X.

Can I generate OG images automatically for every page?

Yes. Build a single HTML template that accepts title and other fields as URL query parameters, host it at a route like /og, then call a screenshot API once per unique page. Store the returned image URL and wire it into your og:image tag. That one template generates every image without manual design work.

Back to blog

OG images

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

June 13, 2026 · 5 min read · Grabbit Team

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/" />

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" />

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" />

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"
  }'

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
}

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.

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.

FAQ

What is an OG image?: An OG image (Open Graph image) is the preview image that social platforms display when a URL is shared. You control it by adding a meta property='og:image' tag to your page's HTML head, pointing to an image hosted at a public URL. Without it, platforms either guess which image to show or display nothing.
Why is there no image when I share my link?: The most common causes are a missing og:image meta tag, a tag that points to a URL the crawler cannot reach, or an image that is too small (Facebook requires at least 200 by 200 pixels). Add the tag, ensure the image URL is publicly accessible, and re-scrape your page through the platform's debugger to clear the cached result.
What size should an OG image be?: 1200 by 630 pixels at 1.91:1 ratio. That is the size Facebook, LinkedIn, X, Slack, and Discord all render as a full-width preview card. Include og:image:width and og:image:height meta tags so platforms reserve the correct space before the image loads.
How do I add an OG image to my website?: Add three meta tags inside your HTML head: meta property='og:image' with the image URL, meta property='og:image:width' set to 1200, and meta property='og:image:height' set to 630. For X, add meta name='twitter:card' with value 'summary_large_image' and meta name='twitter:image' with the same URL.
Do I need separate OG images for X (Twitter) and Facebook?: Not necessarily. A 1200 by 630 pixel image works across Facebook, LinkedIn, X, Slack, and Discord. X reads og:image if no twitter:image tag is present. The only reason to add a separate twitter:image is to serve a different image specifically on X.
Can I generate OG images automatically for every page?: Yes. Build a single HTML template that accepts title and other fields as URL query parameters, host it at a route like /og, then call a screenshot API once per unique page. Store the returned image URL and wire it into your og:image tag. That one template generates every image without manual design work.

Capture any website with one API call

Get a free test key and capture your first screenshot in two minutes.

Get your free test key Learn more

Written by

Grabbit Team

Screenshots as a service

The team behind Grabbit, the screenshot API for developers and AI agents. We write about web capture, rendering, and automating screenshots at scale.

Keep reading

OG images

Open Graph Image Sizes and Dimensions: The Complete 2026 Guide

The right Open Graph image size is 1200 by 630 pixels. Here are the exact dimensions for Facebook, X, LinkedIn, Slack, and Discord, plus how to generate OG images from a URL.

Jun 10, 2026 · 4 min read

OG imagesHow to Generate Dynamic OG Images from Any URL

OG images

How to Generate Dynamic OG Images from Any URL

Generate a unique Open Graph image for every page by pointing a screenshot API at your HTML template. One template, zero design work, scales to any number of pages.

Jun 12, 2026 · 4 min read