social-metadata-hardening

name	social-metadata-hardening
description	Fix social sharing previews so URLs render as rich cards on Facebook, LinkedIn, X/Twitter, WhatsApp, Telegram, and more. Covers OG tags, Twitter cards, absolute image URLs, and debugging.
category	seo
risk	safe
source	self
source_type	self
date_added	2026-05-31
author	Whoisabhishekadhikari
tags	["seo","open-graph","twitter-card","social-sharing","og-image","nextjs","metadata"]
tools	["claude","cursor","gemini","claude-code"]
version	1.0.0

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.yourdomain.com';
  
  // Always produce an absolute URL
  const imageUrl = image?.startsWith('http') ? image : `${baseUrl}${image}`;
   pageUrl  = ;
  
  
   ext = imageUrl.().().();
   mimeMap = { : , : , : , :  };
   imageType = mimeMap[ext] || ;

   {
    title,
    description,
    : { : pageUrl },
    : {
      title,
      description,
      : pageUrl,
      : ,  
      : [{
        : imageUrl,
        : imageUrl,   
        : imageWidth,
        : imageHeight,
        : imageAlt || title,
        : imageType,
      }],
    },
    : {
      : ,  
      title,
      description,
      : [imageUrl],
    },
  };
}