Frontend Beauty
ESC

Type to search the knowledge base.

Metadata API for SEO

Next.js Metadata API sets titles, descriptions, Open Graph, and dynamic SEO fields in the App Router.

intermediate3 min read
  • nextjs
  • metadata-api

The Metadata API configures <title>, description, Open Graph, robots, and more from layout.tsx / page.tsx without hand-editing <head> tags in every leaf.

Docs: Metadata and OG images.

Static metadata

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Billing settings',
  description: 'Manage your plan and invoices.',
  openGraph: {
    title: 'Billing settings',
    description: 'Manage your plan and invoices.',
    type: 'website',
  },
};

Dynamic metadata

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

Title templates

In a layout:

export const metadata: Metadata = {
  title: { default: 'Acme', template: '%s · Acme' },
};

Child pages set title: 'Pricing' → Pricing · Acme.

Practical SEO checklist

  1. Unique title/description per indexable page.
  2. Canonical URLs when needed.
  3. robots for private app shells.
  4. OG images for share previews (opengraph-image.tsx file convention exists).
  5. Do not block critical metadata on extremely slow fetches without timeouts.

Interview out-loud

“I export metadata or generateMetadata from page/layout segments to set title, description, and Open Graph. Layouts provide title templates; dynamic routes load data for per-page SEO. Private areas set robots noindex when appropriate.”

Further reading

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Quick self-test

Explain the concept in 60 seconds, write a minimal code sample from memory, name one footgun, and point to the primary docs. If any of those fail, reread the worked example and rebuild it in a scratch file until the model sticks under interview pressure.

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Related guides