Add an Open Graph image - MetricSpot docs

Q: Why does my image not show up even though I added the tag?

Three usual suspects: (1) the URL is relative (/og.png) instead of absolute (https://example.com/og.png) — most platforms require absolute, (2) the image returns 404 or 500, (3) the platform is showing a cached preview from an earlier version. Run the URL through Facebook's debugger and re-scrape.

Q: Do I need a different image for Twitter/X?

Not unless you want one. X falls back to og:image if no twitter:image is set, but twitter:card should be summary_large_image to get the big card layout. See Twitter Card tags.

Q: What if my page is dynamic and content changes?

Generate a new image at build time (Astro/Next.js — astro-og-canvas, @vercel/og) or at request time (edge functions). For ecommerce, the product page should use a product photo. For blog posts, a templated card with the post title.

What this check does

Looks for <meta property="og:image" content="..."> in the page <head>. The check fails when the tag is missing, when the URL is relative (must be absolute), or when the image returns a non-200 status code.

Why it matters

The OG image is the single biggest visual element of a shared link card. Facebook, LinkedIn, Slack, Discord, iMessage, WhatsApp, Telegram, Mastodon, Bluesky, and most RSS readers all render it the same way: a card with the image on top and title/description below.

A link with a sharp 1200×630 image gets clicked several times more often than the same link with no image. Bare-URL fallbacks look broken — most users assume the page is dead.

The OG image also feeds Google’s “About this result” panel and AI search citation cards, so missing it is an SEO and AI-discoverability problem too, not just a social one.

How to fix it

Put an absolute URL to a 1200×630 PNG or JPG in the page <head:

<meta property="og:image" content="https://example.com/og/home.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="MetricSpot home page screenshot">

The :width, :height, and :alt sub-tags are optional but improve rendering on slow connections and accessibility for screen readers.

Size rules (Facebook’s spec — every other platform follows it):

Aspect ratio 1.91:1 (1200×630 is the canonical size).
Minimum 600×315 — anything smaller renders as a small square instead of a large card.
Maximum 5 MB file size.
Use PNG for text-heavy designs, JPG for photos.

Dynamic OG images — generate a unique image per post automatically:

Vercel OG Image — @vercel/og, JSX → PNG at the edge.
Astro — astro-og-canvas or satori for runtime generation; bake into dist/og/*.png at build time.
WordPress — Yoast Premium, Rank Math, or a plugin like “WP OG Image Auto” overlay the post title on a template.
Cloudinary / Imgix — text-overlay transformations on a base template image.

WordPress — set the post’s featured image, and Yoast/Rank Math will use it as og:image automatically.

Test before shipping — paste the URL into Facebook’s Sharing Debugger and LinkedIn’s Post Inspector. Click “Re-scrape” to refresh the cache after changes.

Frequently asked questions

Why does my image not show up even though I added the tag?

Three usual suspects: (1) the URL is relative (/og.png) instead of absolute (https://example.com/og.png) — most platforms require absolute, (2) the image returns 404 or 500, (3) the platform is showing a cached preview from an earlier version. Run the URL through Facebook’s debugger and re-scrape.

Do I need a different image for Twitter/X?

Not unless you want one. X falls back to og:image if no twitter:image is set, but twitter:card should be summary_large_image to get the big card layout. See Twitter Card tags.

What if my page is dynamic and content changes?

Generate a new image at build time (Astro/Next.js — astro-og-canvas, @vercel/og) or at request time (edge functions). For ecommerce, the product page should use a product photo. For blog posts, a templated card with the post title.