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)