Next.js SEO · Part 8 · Metadata API

The Next.js Metadata API

How to set a page's title and description with a metadata object instead of writing head tags by hand, line by line.

What the Metadata API is

Part 2 wrote this HTML by hand:

HTML

<head>
  <title>JavaScript Tutorials</title>
  <meta
    name="description"
    content="Learn JavaScript from scratch."
  />
</head>

In Next.js, those tags don't need to be written by hand. Instead, a JavaScript object holds the metadata, and Next.js generates the matching HTML tags. This is called the Metadata API.

Next.js code

export const metadata = {
  title: "JavaScript Tutorials",
  description: "Learn JavaScript from scratch.",
};

Next.js generates the HTML metadata

Resulting HTML

<title>JavaScript Tutorials</title>
<meta
  name="description"
  content="Learn JavaScript from scratch."
/>

Writing the metadata object

Open app/tutorials/page.tsx in the Next.js project and add the following code:

app/tutorials/page.tsx

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "JavaScript Tutorials for Beginners",
  description:
    "Learn JavaScript step by step with simple examples.",
};

export default function TutorialsPage() {
  return (
    <main>
      <h1>JavaScript Tutorials for Beginners</h1>
      <p>
        Learn JavaScript with beginner-friendly lessons.
      </p>
    </main>
  );
}

This is a complete example for the /tutorials route.

The code, line by line

1.Import the Metadata type

import type { Metadata } from "next";

Metadata is a TypeScript type provided by Next.js. It helps the editor check that only supported metadata properties are used. For example, it can catch a misspelled property.

2.Export the metadata object

export const metadata: Metadata = {

Part	Meaning
export	Makes this value available to Next.js
const	Declares a variable
metadata	The special export name Next.js recognizes
: Metadata	Checks the object against the Metadata type
{ ... }	A JavaScript object containing properties

3.Set the title

title: "JavaScript Tutorials for Beginners",

Next.js uses this to generate the document title.

4.Set the description

description:
  "Learn JavaScript step by step with simple examples.",

Next.js uses this to generate a meta description tag. Google may use the description in a search result snippet, but it can also choose other text from the page.

5.The page component

export default function TutorialsPage() {
  return (
    <main>
      <h1>JavaScript Tutorials for Beginners</h1>
    </main>
  );
}

This defines the visible content of the page. Notice that the metadata object is separate from the component.

The HTML Next.js generates

For this example, the relevant metadata output is:

HTML

<head>
  <title>JavaScript Tutorials for Beginners</title>

  <meta
    name="description"
    content="Learn JavaScript step by step with simple examples."
  />
</head>

Verifying it

With the project running, open http://localhost:3000/tutorials.

1.Check the page source

Right-click and choose View Page Source.
Search for JavaScript Tutorials for Beginners.
Search for name="description".
Check that the description text appears.

2.Check with curl

Terminal

curl -s http://localhost:3000/tutorials

This shows the HTML returned by the local development server. For this simple, static metadata, the title and description should be in the HTML response.