Next.js Metadata & SEO

▲ Next.js Lesson 13 Advanced

Next.js includes a metadata API that dynamically updates page headers (titles, descriptions, keywords), helping search engine crawlers index views correctly.

1 Static and dynamic metadata variables

Next.js supports two ways to configure page metadata:

Static Metadata: Export a static metadata object in your layout or page files for fast, simple header configurations.
Dynamic Metadata: Export a generateMetadata() function for dynamic route parameters (e.g. setting the page title to the name of a specific product).

2 Writing dynamic metadata configurations

Let's check how to configure dynamic page titles and Open Graph fields:

React — Metadata Setup

// Static metadata example
export const metadata = {
  title: 'Home Page | Tech Portal',
  description: 'Welcome to the tech portal home page.'
};

// Dynamic metadata configuration
export async function generateMetadata({ params }) {
  const product = await fetch(`https://api.example.com/products/${params.id}`).then(r => r.json());

  return {
    title: `${product.name} | Tech Portal`,
    description: product.description,
    openGraph: {
      images: [{ url: product.imageUrl }]
    }
  };
}

export default function Page({ params }) {
  return <h1>Dynamic Metadata Page</h1>;
}

3 Code Challenge

Challenge: Add a fallback metadata configuration inside your root layout component, and verify that subpages inherit these properties automatically.