skills.rest
xabierlameiro
xabierlameiroCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

nextjs-metadata-functions

Reference Next.js 16 App Router metadata functions for SEO configuration.

Updated Mar 8, 2026
Search Tags:#next.js#metadata#seo#app router#opengraph#twitter cards#image response
One-click install
npx skills add https://github.com/xabierlameiro/price-tracker --skill nextjs-metadata-functions
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-metadata-functions
Source: https://github.com/xabierlameiro/price-tracker/tree/main/.agents/skills/nextjs-metadata-functions
Command: npx skills add https://github.com/xabierlameiro/price-tracker --skill nextjs-metadata-functions

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a comprehensive reference for Next.js 16 App Router metadata functions, enabling precise control over SEO, Open Graph, Twitter cards, and more for improved search engine visibility and social sharing.

Core Features & Use Cases

  • Dynamic Metadata: Learn to use generateMetadata for data-driven titles, descriptions, and social media tags.
  • Viewport Control: Configure generateViewport for optimal display across devices and set theme colors.
  • Static Generation: Understand generateStaticParams for building static routes and sitemaps.
  • Image Generation: Master generateImageMetadata and ImageResponse for dynamic Open Graph images.
  • Use Case: When optimizing a blog post for search engines, use this Skill to ensure the title, description, openGraph, and twitter metadata are correctly configured using generateMetadata.

Quick Start

Consult the nextjs-metadata-functions skill for details on configuring the Open Graph title and description for a Next.js page.

Frequently Asked Questions about nextjs-metadata-functions

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

FAQPage Schema
How do I generate dynamic metadata for SEO in Next.js App Router?▼

Use the `generateMetadata` function in the Next.js App Router to dynamically define titles, descriptions, and Open Graph tags. This function fetches data to provide data-driven SEO metadata for your pages.

What is the best way to create dynamic Open Graph images in Next.js?▼

Create dynamic Open Graph images in Next.js by using `generateImageMetadata` and `ImageResponse`. These functions allow you to build custom OG images dynamically for improved social sharing optimization.

How do I configure the viewport and theme color in Next.js?▼

Configure the viewport in Next.js by exporting the `generateViewport` function. This allows you to set optimal display configurations across devices and dynamically define theme colors.

When do I need to use generateStaticParams for Next.js SEO?▼

Use `generateStaticParams` in Next.js when you need to pre-render dynamic routes at build time. This static generation process helps build static routes and sitemaps, improving search engine crawling.

Can I dynamically generate Twitter cards in Next.js App Router?▼

Yes, you can generate Twitter cards in the Next.js App Router using the `generateMetadata` function. You can dynamically define the `twitter` metadata fields to optimize social sharing visibility.

Related Skills

Explore More Software Engineering Skills→
ai-enhanced-engineerai-enhanced-engineer
3

nextjs-16-app-router

Guide Next.js 16 App Router projects with React 19 and Turbopack.

Official
Advanced
Ali1razAli1raz
2

nextjs-seo

Implement metadata, Open Graph, Twitter Cards, JSON-LD, sitemaps, and robots.txt for Next.js 13+ App Router.

Community
Advanced
prototypdigitalprototypdigital

payload-cache-revalidation

Standardize cache tag generation and revalidation hooks for Next.js and Payload CMS.

Official
Advanced
shahmirerrorshahmirerror

repl-seo-optimizer

Automate SEO issue review and remediation across web frameworks.

Community
Intermediate