nextjs-metadata

What problem does it solve?

This skill guides developers in implementing Next.js metadata to improve search engine visibility, social sharing previews, and structured data integration across pages and routes.

Core Features & Use Cases

• Static metadata: export a metadata object for fixed routes to ensure consistent SEO basics.
• Dynamic metadata: use generateMetadata to compute titles, descriptions, and OpenGraph data from route params or fetched content.
• OpenGraph & Twitter cards: configure images and descriptions to optimize social sharing.
• Structured data: inject JSON-LD scripts for rich results.
• Canonical URLs: define canonical links to prevent duplicate content.
• Use Case: implement metadata for a blog section where each post has unique title and image.

Quick Start

Create a metadata export in app/page.tsx with title and description, and optionally implement generateMetadata for dynamic routes. Use openGraph and images to improve social sharing.