name: nextjs-metadata description: Next.js Metadata API for SEO, OpenGraph tags, structured data, and social sharing. Use when implementing metadata, SEO, or social media previews.

Next.js Metadata

Expert guidance for implementing effective metadata in Next.js.

Quick Reference

What Do You Need?

1. Static metadata - metadata object for fixed values
2. Dynamic metadata - generateMetadata for dynamic values
3. OpenGraph - Social sharing images and descriptions
4. Structured data - JSON-LD for rich results
5. Canonical URLs - Preventing duplicate content

Specify a number or describe your metadata scenario.

Routing

Essential Principles

Every page needs metadata: Title, description, OpenGraph image minimum.

Static for static pages: Use metadata object when values don't change.

Dynamic for dynamic routes: Use generateMetadata when data comes from params or fetch.

OpenGraph for sharing: Ensure pages look good when shared on social media.

Structured data for rich results: Use JSON-LD for articles, products, organizations.

Code Patterns

Static Metadata

// app/page.tsx
import { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'My App',
  description: 'Description for search engines',
  openGraph: {
    title: 'My App',
    description: 'Description for social sharing',
    images: ['/og-image.jpg'],
  },
}

export default function Page() {
  return <div>...</div>
}

Dynamic Metadata

// app/blog/[slug]/page.tsx
import { Metadata } from 'next'

export async function generateMetadata(
  { params }: { params: { slug: string } }
): Promise<Metadata> {
  const post = await fetchPost(params.slug)

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      images: [post.ogImage],
    },
  }
}

export default function BlogPost({ params }: { params: { slug: string } }) {
  // ...
}

Structured Data

import Script from 'next/script'

export default function ArticlePage({ post }: { post: Post }) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: post.title,
    datePublished: post.publishedAt,
    author: { '@type': 'Person', name: post.author.name },
  }

  return (
    <>
      <Script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
      <article>{post.content}</article>
    </>
  )
}

Metadata Checklist

Common Issues

Reference Index

Success Criteria

Metadata is complete when:

• Every page has title and description
• OpenGraph tags present (title, description, image)
• OG image is 1200x630px minimum
• Dynamic routes use generateMetadata
• Canonical URLs set for duplicate content
• Structured data for content types (articles, products)