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:"