Suggest an editImprove this articleRefine the answer for “What is the Metadata API in Next.js?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**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 more) declaratively and safely, right in the code. **Key point:** metadata is set through a `metadata` object or a `generateMetadata` function, is inherited through layouts, and is generated on the server, unlike a manual `<Head />`.Shown above the full answer for quick recall.Answer (EN)Image**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: ```ts 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: ```ts 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 ```ts 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>` managementFor the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.