Why is metadata important?

Providing high quality metadata can:

increase your search ranking as pages can provide easy hints to search engines about their purpose
provide a better use experience as they navigate your website, create bookmarks etc.

Two Key Ways

There are two key ways to provide metadata using code in NextJS:

export a metadata object
export a generateMetadata function

Simple `metadata` object

At its simplest you can export a metadata object from your page file.

This is demonstrated in the below example where the different pages export a metadata object.

app/page.tsx

app/about/page.tsx

app/contact/page.tsx

import styles from "./page.module.css";
import { Metadata } from "next";

export const metadata: Metadata = {
  title: "Home",
  description: "Welcome to our home page",
};

export default function Page() {
  return (
    <div className={styles.root}>
      <h1 className={styles.title}>Welcome to our home 🏡</h1>
    </div>
  );
}

Metadata in `layout` vs `page`

You can provide a common metadata for a section of your site by exporting it from a layout file instead of a page file. You can even override portions of the metadata of your layout from your page.

This is demonstrated in the below example where we provide a common title and a description for the dashboard section, and override the title in the individual pages.

app/dashboard/layout.tsx

app/dashboard/security/page.tsx

app/dashboard/subscription/page.tsx

import { type Metadata } from "next";

export const metadata: Metadata = {
  title: "Dashboard",
  description: "Manage your user settings and preferences",
};

export default function Layout({ children }: React.PropsWithChildren) {
  return children;
}

Dynamic `generateMetadata` function

If you want to dynamically create the metadata by querying an external data source, you can export a generate metadata function from your layout or page module and use it to implement your custom business logic.

This is demonstrated in the below example where we load content from an external CMS (content management system).

app/cms/[slug]/page.tsx

import { fetchPageContent } from "@/api/cms";
import { SimpleContent } from "@/lib/SimpleContent";
import { type Metadata } from "next";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const content = await fetchPageContent(slug);
  return {
    title: content.title,
    description: content.description,
  };
}

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const content = await fetchPageContent(slug);
  return <SimpleContent {...content} />;
}

Accessing parent metadata with `generateMetadata`

With the generate metadata function you are even passed in the metadata that was returned by some parent layout, so you can build on top of that parent result customizing it further for your page.

This is demonstrated below where we customize the metadata in the dashboard pages building on top of the title returned by the dashboard layout.

app/dashboard/layout.tsx

app/dashboard/security/page.tsx

app/dashboard/subscription/page.tsx

export const metadata = {
  title: "Dashboard",
  description: "Manage your user settings and preferences",
};

export default function Layout({ children }: React.PropsWithChildren) {
  return children;
}

Transcript