nextjs-metadata_skill

Overview

This skill provides practical guidance and code patterns for implementing Next.js Metadata API to improve SEO, social previews, and structured data. It covers static and dynamic metadata, OpenGraph/Twitter cards, canonical URLs, and JSON-LD structured data. The content focuses on concrete examples and a checklist to make metadata implementation consistent across an app.

How this skill works

The skill inspects common metadata concerns and maps them to Next.js patterns: the metadata object for static pages and generateMetadata for dynamic routes. It shows how to configure openGraph, twitter, alternates, and canonical URLs, and how to embed JSON-LD using Next.js Script. It also provides a checklist and common issue fixes to validate completeness and quality.

When to use it

• Adding basic SEO and social preview info for static pages
• Generating per-page metadata for dynamic routes (blogs, products)
• Ensuring OpenGraph and Twitter card tags for social sharing
• Embedding structured data (JSON-LD) for articles, products, organizations
• Adding canonical and hreflang to prevent duplicate content

Best practices

• Always include title and description for every page; keep description ~160 characters
• Use export const metadata for static pages and async generateMetadata for pages that fetch data or depend on params
• Provide OpenGraph images at least 1200x630px and set twitter.card to 'summary_large_image'
• Publish JSON-LD via next/script with type='application/ld+json' for articles and products
• Set metadata.alternates.canonical for duplicate-content prevention and alternates for localization

Example use cases

• Static marketing pages with export const metadata for site-wide SEO values
• Blog posts: fetch post data in generateMetadata to populate title, description, and OG images
• E‑commerce product pages: dynamic metadata including price, availability, and product JSON-LD
• Social preview optimization: attach openGraph.images and twitter.card to improve link shares
• Multi‑locale sites: use metadata.alternates to provide canonical and localized URLs