Next.js Metadata API: Control Your Site's Preview
The Next.js Metadata API is a structured way to control your page's <head> for SEO and social sharing. It lets you define titles, descriptions, and Open Graph images for crawlers and link previews.
Why it exists
Managing the HTML <head> is critical for SEO and how your site appears when shared. Doing this manually is error-prone, especially in dynamic applications where titles, descriptions, and images change per page. The Metadata API provides a centralized, type-safe way to manage this within the Next.js App Router.
The mental model
Think of the Metadata API as a configuration file for your page's identity. Instead of writing raw HTML tags like <title> or <meta>, you export a JavaScript object from your layout.js or page.js file. Next.js then takes this object and renders the correct HTML in the server-rendered response.
How it works
Next.js looks for a special metadata export in your route segments (page.js or layout.js). For static metadata, you export a plain object. For dynamic metadata that depends on route parameters, like a blog post title, you export an async function called generateMetadata. Next.js also supports file-based metadata: placing a file like opengraph-image.jpg or robots.txt in a route segment applies it to that route and its children. Metadata is merged from the root layout down to the page, with child routes overriding parent settings.
When to use it
Use it in any Next.js App Router project to manage SEO and social sharing. It's the standard way to set page titles, descriptions, canonical URLs, and social media card images (Open Graph and Twitter). It's also used for generating sitemap.xml for crawlers.
When not to use it
This API is specific to the Next.js App Router. If you are using the older Pages Router, you would use the <Head> component from next/head instead. It's also not a full replacement for complex structured data (JSON-LD), though you can include JSON-LD scripts through the metadata object.
One canonical example
To set a dynamic title for a blog post page at app/blog/[slug]/page.js, you would fetch the post data and use generateMetadata. The function receives the route params as an argument. For example: export async function generateMetadata({ params }) { const post = await getPost(params.slug); return { title: post.title }; }. This ensures each blog post page has a unique, SEO-friendly title in its HTML <head>.
Interview question
In the Next.js App Router, how is metadata primarily defined for a page or layout?
- a.By creating a metadata.json configuration file in the project's root directory.
- b.By embedding HTML <meta> and <title> tags directly in the component's JSX.
- c.By exporting a JavaScript object or an async generateMetadata function from page.js or layout.js.Correct
- d.By importing and using the <Head> component from next/head within the page component.
Why? this is the answer
The Metadata API in the App Router works by exporting a JavaScript object for static metadata or an async generateMetadata function for dynamic metadata from page.js or layout.js. Option D describes the method used in the older Pages Router, not the App Router.
Just read this? Test yourself on what you have been reading.
Read the original → nextjs.org
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on next.js — each one lists the topics its interview covers.
See open roles