What is the Metadata API in Next.js?

Next.jsMiddle~2 min read

The Metadata API in Next.js is a built-in mechanism for managing a page's metadata: <title>, <meta>, Open Graph, Twitter Cards, favicon, and other data in <head>.

Simply put:

The Metadata API is a way to describe SEO and meta information declaratively and safely, right in the code.

Why the Metadata API is needed

It solves several problems at once:

centralized SEO management
automatic generation of <head>
metadata inheritance through layouts
correct behavior with Server Components
less manual work with <Head />

How the Metadata API is used

1. Static metadata

You can export a metadata object:

export const metadata = {
  title: 'Home page',
  description: 'Site description'
}

Next.js itself turns this into <title> and <meta> tags.

2. Dynamic metadata

If the data depends on parameters or the request, a function is used:

export async function generateMetadata({ params }) {
  return {
    title: `Post ${params.slug}`,
    description: 'Post description'
  }
}

The metadata will be computed on the server before the page is rendered.

Where the Metadata API can be used

The Metadata API works in:

page.tsx
layout.tsx
route groups
nested layouts

Metadata:

is inherited top-down
can be supplemented or overridden

What can be described through the Metadata API

Through the API, you can set:

title (including templates)
description
keywords
robots
icons (favicon)
Open Graph (og:title, og:image, etc.)
Twitter Cards
alternates (canonical, hreflang)

All of this is described with a plain object, without manual HTML.

Why the Metadata API is better than `<Head />`

`<Head />`	Metadata API
Manual tag management	Declarative approach
Duplicates are possible	Next.js merges them itself
Works only on the client	Works on the server
No inheritance	Has inheritance
You must track the order	Order is automatic

The Metadata API fits better into the App Router architecture.

Connection with layouts

Layouts are often used for:

shared SEO settings for a section
title templates
shared OG tags

export const metadata = {
  title: {
    template: '%s | My Site',
    default: 'My Site'
  }
}

Pages inside automatically substitute their own values.

Summary

The Metadata API in Next.js is:

the official way to work with SEO
part of the App Router architecture
server-side and safe
supports inheritance
eliminates manual <head> management

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.