Dynamic metadata in Next.js

In this tutorial, you will learn what Dynamic metadata is and how to create it.

What is Dynamic metadata?

Dynamic metadata is generated dynamically based on dynamic routes. This is used for SEO, especially for blog posts, product pages, or user profiles.

Why use Dynamic Metadata?

There are below points show why to use Dynamic Metadata.

1. It is good for SEO ranking.

2. The title & description are dynamic because they change per dynamic page.

3. It is better social sharing (Open Graph tags).

4. Makes pages unique for search engines.

How To Generate Dynamic Metadata?

Step 1: Create a Dynamic page folder structure.


app/blog/[slug]/page.js

Step 2: Create code in it.


export async function generateMetadata({ params }) {
  const { slug } = params;

  return {
    title: `Blog: ${slug}`,
    description: `Read article about ${slug}.`,
  };
}

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

Fetching from API


export async function generateMetadata({ params }) {
  const data = await fetch(`https://api.example.com/blog/${params.slug}`).then(
    res => res.json()
  );

  return {
    title: data.title,
    description: data.excerpt
  };
}