CodePark/ questions / Metadata & SEO
START PRACTICINGPRACTICE
Frontend question · Next.js › Metadata & SEO

How do you set page titles and meta tags in the App Router?

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await getPost(slug);
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: { images: [post.coverUrl] },
  };
}

Use the Metadata API in layout.tsx or page.tsx.

There are two ways:

  • Static values: export a metadata object with fields like title, description and openGraph.
  • Values from data or params: export an async generateMetadata function that returns the same shape.

Next.js merges metadata from the root layout down to the page. So a layout can define title.template, like "%s | Store", and each page fills in its own title. Next.js renders the final tags into the head.

Both exports work only in Server Components. They replace next/head from the Pages Router.

  • Export a static metadata object or an async generateMetadata function.
  • These exports work only in layouts and pages that are Server Components.
  • Metadata merges from the root down, and title.template sets a title pattern.
  • The Metadata API replaces next/head.