social-metadata-hardening

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.

仓库: enesbala5/config
最近来源活动: 2026年8月6日 16:50
检测到的 SKILL.md 语言: 英语
星标: 5
分支: 0

安装方式

默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。

检查来源文件

决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。

返回搜索返回安装

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],
    },
  };
}

// app/about/page.js
import { buildSocialMetadata } from '@/lib/socialMetadata';

export const metadata = buildSocialMetadata({
  title: 'About Us | My Site',
  description: 'Learn about our team and mission.',
  path: '/about',
  image: '/images/og/about.jpg',
  imageAlt: 'The My Site team',
});

// app/blog/[slug]/page.js
import { buildSocialMetadata } from '@/lib/socialMetadata';

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return buildSocialMetadata({
    title: `${post.title} | My Blog`,
    description: post.excerpt,
    path: `/blog/${params.slug}`,
    image: post.ogImage || '/images/og/default.jpg',
    imageAlt: post.title,
  });
}

export const metadata = {
  metadataBase: new URL('https://www.yourdomain.com'), // REQUIRED for absolute URLs
  ...buildSocialMetadata({
    title: 'My Site — Tagline Here',
    description: 'Site-wide description.',
    path: '/',
    image: '/images/og/home.jpg',
  }),
};

# Verify your OG image is reachable and correct size
curl -sI https://www.yourdomain.com/images/og/home.jpg | grep -i "content-type\|content-length\|status"

curl -s https://www.yourdomain.com/blog/my-post | grep -i "og:\|twitter:"