nextjs-metadata

Implement Next.js metadata for SEO, OpenGraph, and structured data.

2|Updated Jan 3, 2026

Search Tags:#metadata #nextjs #seo #structured-data #opengraph #generateMetadata

Ready to run

npx skills add https://github.com/jovermier/cc-stack-marketplace --skill nextjs-metadata

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: nextjs-metadata
Source: https://github.com/jovermier/cc-stack-marketplace/tree/main/plugins/cc-nextjs/skills/nextjs-metadata
Command: npx skills add https://github.com/jovermier/cc-stack-marketplace --skill nextjs-metadata

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about nextjs-metadata

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I add dynamic metadata in Next.js for dynamic routes?▼

Add dynamic metadata in Next.js by implementing the generateMetadata function to compute titles, descriptions, and OpenGraph data from route params or fetched content. This replaces static exports for pages requiring unique SEO attributes per route.

What is the difference between static metadata exports and generateMetadata in Next.js?▼

Static metadata exports define a fixed metadata object for consistent SEO basics across a route, while generateMetadata dynamically computes metadata values at request time using route parameters or external data for unique page attributes.

How do I configure OpenGraph and Twitter cards for social sharing in Next.js?▼

Configure OpenGraph and Twitter cards in Next.js by defining image and description properties within your metadata object. This optimizes social sharing previews by supplying platforms with the exact visual and text assets needed.

Do I need TypeScript to implement Next.js metadata for SEO?▼

TypeScript is not strictly required to implement Next.js metadata for SEO. You only need a Next.js project and basic TypeScript or JavaScript knowledge to export a metadata object or implement generateMetadata.

How do I add JSON-LD structured data to a Next.js page?▼

Add JSON-LD structured data to a Next.js page by injecting JSON-LD scripts directly into your components. This provides search engines with explicit schema information to generate rich results for your content.

How do I set canonical URLs in Next.js to prevent duplicate content?▼

Set canonical URLs in Next.js by defining canonical link properties within your metadata configuration. This prevents duplicate content issues by signaling the primary version of a page to search engines.