Static Metadata

Generating SEO tags with the Metadata API.

Next.js2 min readConcept 54 of 66

The Metadata API

Search Engine Optimization (SEO) requires injecting <title> and <meta> tags into the <head> of your HTML document.

In the Next.js App Router, you do this by simply exporting a static metadata object from any page.tsx or layout.tsx file.

No More React Helmet

In standard React, developers relied on third-party libraries like react-helmet to inject SEO tags.

Because Next.js streams the HTML response from the server, it needs absolute control over the <head>. The Metadata API is deeply integrated with React's streaming architecture, ensuring that SEO tags are always sent to the browser before the body content begins.

Implementation

1. Open a page.tsx or layout.tsx file.

2. Add: export const metadata = { title: 'My Site', description: 'A great site' }.

3. That's it. Next.js will automatically generate the corresponding <title> and <meta name="description"> tags in the HTML.

Object to HTML

Examine how the Next.js compiler takes a simple JavaScript object and automatically transforms it into standard HTML <head> tags.

page.tsx

import type { Metadata } from 'next';
export const metadata: Metadata = {
title: "Acme Shoes",
description: "The best shoes.",
openGraph: {
title: "Acme Shoes Store",
}
};
export default function Page() {
return <h1>Store</h1>;
}

Compiled HTML <head>

<html>
<head>
// Generated from title
<title>Acme Shoes</title>
// Generated from description
<meta name="description" content="The best shoes."/>
// Generated from openGraph
<meta property="og:title" content="Acme Shoes Store"/>
</head>
<body>
<h1>Store</h1>
</body>
</html>

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1How do you define static SEO tags in a Next.js App Router page?

Remember this

  • Export a static metadata object from page.tsx or layout.tsx to set SEO tags.
  • Do NOT manually render <title> or <meta> tags in your components.
  • Do NOT use the legacy next/head component in the App Router.
  • Metadata exported from a layout applies to all child pages, unless a child page overrides it.

Done with this concept?

Mark it complete to track your progress. No login needed.