Generate Dynamic Metadata per Page

Next.js

React

JavaScript

Technical Specification

Use generateMetadata to set page title and description based on dynamic route params.

Input/Output Samples

Input:/blog/next-routing

Output:Title 'Blog - next-routing'

Optimal Logic Path

export async function generateMetadata({ params }) {
  return {
    title: `Blog - ${params.slug}`,
  };
}

export default function BlogPostPage({ params }) {
  return <h1>{params.slug}</h1>;
}

Architectural Deep-Dive

Dynamic metadata allows unique SEO for each dynamic route.