How to Use generateMetadata in Next.js for Dynamic Page Metadata

In Next.js, use the generateMetadata async function inside your page or layout to dynamically create metadata like title and description. This function returns an object with metadata fields that Next.js uses to set the page's head tags automatically.

Syntax

The generateMetadata function is an async function exported from a page or layout file. It returns an object containing metadata properties such as title, description, and others.

Example properties include:

• title: The page title shown in the browser tab.
• description: A short summary for search engines.
• openGraph: Metadata for social sharing.

javascript

export async function generateMetadata({ params, searchParams }) {
  return {
    title: 'Page Title',
    description: 'Page description for SEO',
    openGraph: {
      title: 'Open Graph Title',
      description: 'Open Graph description',
      url: 'https://example.com/page'
    }
  };
}

Example

This example shows a Next.js page that uses generateMetadata to set a dynamic title and description based on the page parameter.

javascript

export async function generateMetadata({ params }) {
  const { slug } = params;
  return {
    title: `Post: ${slug}`,
    description: `Details about post ${slug}`
  };
}

export default function PostPage({ params }) {
  return (
    <main>
      <h1>Post: {params.slug}</h1>
      <p>This is the content of the post.</p>
    </main>
  );
}

Output

<main>
  <h1>Post: example-post</h1>
  <p>This is the content of the post.</p>
</main>

Common Pitfalls

• Not exporting generateMetadata as an async function causes errors.
• Returning incomplete or incorrect metadata objects can lead to missing page titles or descriptions.
• Using generateMetadata in client components instead of server components or layouts is not supported.
• Forgetting to handle dynamic parameters properly can cause metadata to be static or incorrect.

javascript

/* Wrong: synchronous function */
export function generateMetadata() {
  return { title: 'Static Title' };
}

/* Right: async function */
export async function generateMetadata() {
  return { title: 'Static Title' };
}

Quick Reference

Use generateMetadata to create dynamic metadata for SEO and social sharing. It must be an async function returning an object with metadata fields. Place it in your page or layout files. Use params and searchParams to customize metadata based on URL.

Property	Description	Example
title	Page title shown in browser tab	'My Page Title'
description	Short summary for SEO	'This page explains...'
openGraph	Metadata for social sharing	{ title: 'OG Title', url: 'https://...' }
twitter	Twitter card metadata	{ card: 'summary_large_image' }

Key Takeaways

Always export generateMetadata as an async function from your page or layout.

Return an object with metadata fields like title and description for dynamic SEO.

Use params and searchParams to customize metadata based on the URL.

generateMetadata runs on the server and updates head tags automatically.

Avoid using generateMetadata in client components or without async keyword.