Add the Open Graph core tags

Q: Do I need both Open Graph and Twitter Card tags?

X (formerly Twitter) falls back to Open Graph if no twitter: tags are present, so OG alone covers most of the surface. Add Twitter Card tags only if you need a different image or summary on X — see Twitter Card tags.

Q: What if my page already has a ` ` and meta description?

Search engines read and . Social platforms read og:title and og:description. They're separate fields with separate intents (search snippets vs share previews), so duplicate them rather than skipping the OG versions.

What this check does

Scans the page <head> for four meta tags: og:title, og:description, og:image, and og:url. These are the minimum Open Graph properties every major social, messaging, and chat platform reads when someone pastes your link.

Why it matters

When the tags are missing, the link unfurl on Facebook, LinkedIn, X, Slack, Discord, iMessage, WhatsApp, and Telegram falls back to a bare URL with maybe a scraped page title — no preview image, no description. Click-through on a no-preview card is a fraction of a card with a 1200×630 image.

Open Graph is also the data Google uses for the “About this result” panel and for AI-search citation cards. A page without OG tags shows up as a plain link while competitors show up as full cards.

How to fix it

Put the four tags in the <head> of every public page. Values can mirror your <title> and meta description but should be tuned for social — a touch more click-worthy, a hand-picked image.

<head>
  <meta property="og:title" content="Free SEO audit in 60 seconds — MetricSpot">
  <meta property="og:description" content="See what AI agents and Google see on your site. 91 checks, no signup.">
  <meta property="og:image" content="https://metricspot.com/og/home.png">
  <meta property="og:url" content="https://metricspot.com/">
  <meta property="og:type" content="website">
</head>

Astro / Next.js — generate per-page values from frontmatter:

---
const { title, description, ogImage } = Astro.props;
const url = Astro.url.href;
---
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={new URL(ogImage, Astro.site).href} />
<meta property="og:url" content={url} />

WordPress — Yoast SEO, Rank Math, and SEOPress all output these tags automatically. Open one of them, set the social defaults under SEO → Social, and override per-post as needed.

Image rules. PNG or JPG, ≥1200×630 (1.91:1), under 5 MB. See the dedicated Open Graph image page for size/format detail.

Test before shipping — paste the URL into Facebook’s Sharing Debugger and LinkedIn’s Post Inspector and click “Scrape Again” to bust the cache.

Frequently asked questions

Do I need both Open Graph and Twitter Card tags?

X (formerly Twitter) falls back to Open Graph if no twitter: tags are present, so OG alone covers most of the surface. Add Twitter Card tags only if you need a different image or summary on X — see Twitter Card tags.

What if my page already has a `<title>` and meta description?

Search engines read <title> and <meta name="description">. Social platforms read og:title and og:description. They’re separate fields with separate intents (search snippets vs share previews), so duplicate them rather than skipping the OG versions.

Why does my preview still look wrong after I added the tags?

Facebook, LinkedIn, and Slack aggressively cache scraped previews — sometimes for weeks. Run the URL through the platform’s debugger and click the “Re-scrape” button. Your changes won’t appear until the cache is flushed.