social-metadata-hardening

Social Metadata Hardening Skill

Fix social sharing so every important URL unfurls as a rich card across all platforms.

---

When to Use

• Use when shared links show missing, stale, cropped, or incorrect previews on social and chat platforms.
• Use when auditing Open Graph, Twitter/X card, image URL, alt text, or metadataBase coverage in a web app.
• Use before launch when every public page needs predictable rich previews across LinkedIn, X, Facebook, WhatsApp, Slack, Discord, and Telegram.

---

Why Previews Break

Problem	Root Cause
No preview at all	Missing og:title, og:description, or og:image
Broken image	Relative URL (must be absolute)
Wrong image size	Image not 1200×630px (OG standard)
Plain text card	Twitter card type missing or set to summary
Stale preview	Platform caching old metadata
Metadata missing on crawl	Tags added by client-side JS (crawlers don't run JS)

---

The Gold Standard Metadata Block

Every shareable page needs ALL of these in static HTML:

// Next.js App Router — lib/socialMetadata.js
export function buildSocialMetadata({
  title,
  description,
  path,          // '/blog/my-post'
  image,         // '/images/og/my-post.jpg' or full URL
  imageAlt,
  imageWidth = 1200,
  imageHeight = 630,
}) {
  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || 'https://www.y