Generate Rich Social Media Previews

This skill fixes social sharing so every important URL unfurls as a rich card across LinkedIn, X, Facebook, WhatsApp, Slack, Discord, and Telegram. It diagnoses the common causes of broken previews: missing og:title/description/image, relative image URLs (must be absolute), wrong image dimensions (not the 1200x630px OG standard), a Twitter card type left at summary instead of summary_large_image, platform caching of stale metadata, or metadata injected via client-side JavaScript that crawlers never execute. It provides a complete Next.js App Router buildSocialMetadata helper that always produces absolute image/page URLs, detects MIME type from the file extension, and emits the full gold-standard metadata block: canonical alternates, Open Graph (title, description, url, type, images with explicit secureUrl/width/height/alt/type), and Twitter card fields with summary_large_image. It shows how to apply the helper on static pages (direct export const metadata), dynamic pages like blog posts (generateMetadata per-slug), and the homepage/root layout (where metadataBase must be set as a required base for relative URLs). It defines an OG image checklist (1200x630px 2:1 ratio, under 8MB for Facebook's limit, served over HTTPS, hyphenated filenames, JPEG/PNG for broadest crawler support, publicly reachable with no auth) with a curl command to verify image reachability and headers. Platform-specific notes cover Facebook's aggressive caching (use the Sharing Debugger to force recrawl), X/Twitter's card validator and absolute-URL requirement, LinkedIn's hard caching and og:-tag-only support (ignoring twitter: tags) with a minimum 1.91:1 aspect ratio, WhatsApp/Telegram's hours-long cache, and Slack/Discord's shared OG-tag support (Discord additionally supporting og:type = article). Debugging steps include curling the raw HTML to confirm tags are present in the initial response (not JS-injected), validating with each platform's official debugger tool, and forcing a cache refresh via each debugger's rescrape function after deploying fixes. A full checklist covers metadataBase, shared-helper usage, absolute URLs, secureUrl parity, correct image specs, twitter:card type, alt text, server-rendered tags, and post-deploy cache refresh across all platforms.

Use it when shared links show missing, stale, cropped, or incorrect previews on social/chat platforms, when auditing Open Graph/Twitter card/image/metadataBase coverage in a web app, or before launch when every public page needs predictable rich previews across major platforms. It cannot force an immediate cache refresh on every social platform - some previews may remain stale after a correct fix until the platform's own cache expires or is manually rescraped - and it requires publicly reachable deployed URLs for reliable validation with platform debugger tools. It does not replace brand, accessibility, or legal review of image text, alt text, or preview copy.

Inputs: the page's title, description, path, and OG image (plus alt text), and whether it's a static, dynamic, or homepage route.
Outputs: a reusable buildSocialMetadata helper and its applied usage in Next.js metadata exports, an OG-image validation checklist, and a debugging/cache-refresh workflow across all major sharing platforms.

return {
  openGraph: {
    title, description, url: pageUrl, type: 'website',
    images: [{ url: imageUrl, secureUrl: imageUrl, width: 1200, height: 630, alt: imageAlt || title }],
  },
  twitter: { card: 'summary_large_image', title, description, images: [imageUrl] },
};

Web developers and marketing/SEO teams who need every shareable page to render correctly as a rich preview card across social and chat platforms before or after launch.