skills.rest
jovermier
jovermierCOMMUNITY
Explore all skills by this author →
Website𝕏@jrovermierGitHub

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
One-click install
npx skills add https://github.com/jovermier/cc-stack-marketplace --skill nextjs-metadata
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
bilalmkbilalmk
1

nextjs-devtools

Inspect Next.js routes, components, and build configuration via MCP tools.

Community
Intermediate
KylerDKylerD
14

web-discoverability

Configure SEO meta tags, OpenGraph, sitemaps, and robots.txt for web discoverability.

Community
Intermediate
JaivishChauhanJaivishChauhan
6

nextjs-core

Organize Next.js 15 apps with App Router and Server Components.

Community
Intermediate
TheTesseractAITheTesseractAI

repl-seo-optimizer

Reviews and fixes SEO issues in Replit web projects including meta tags and crawlability optimization.

Community
Intermediate