Cum setezi metadate de pagină (titlu, descriere) în Next.js?

Question

IT Interview Practice · Accepted Answer

App Router are o **API de metadate** încorporată pentru etichetele SEO (``, `<meta>`, Open Graph, etc.) — exporți metadate dintr-un `layout.tsx` sau `page.tsx` și Next.js redă etichetele corecte `<head>`. ## Metadate statice ```tsx // app/about/page.tsx import type { Metadata } from "next"; export const metadata: Metadata = { title: "About Us", description: "Learn about our company and team.", openGraph: { title: "About Us", images: ["/og-about.png"], }, }; export default function About() { return <h1>About</h1>; } ``` Next.js citește obiectul `metadata` exportat și generează `<title>`, `<meta name="description">`, etichete OG, etc. — nicio editare manuală `<head>` necesară. ## Metadate dinamice (depind de date) Pentru pagini al căror titlu depinde de conținut preluat (postare blog, produs), exportă o funcție async `generateMetadata`: ```tsx // app/blog/[slug]/page.tsx export async function generateMetadata({ params }): Promise<Metadata> { const post = await getPost(params.slug); // fetch the post return { title: post.title, description: post.excerpt, openGraph: { images: [post.coverImage] }, }; } ``` Aceasta rulează pe server și permite fiecărei pagini dinamice să aibă metadate precise și specifice conținutului — esențial pentru SEO și partajarea pe rețelele sociale a conținutului dinamic. ## Metadate se fuzionează în jos pe copac ```tsx // app/layout.tsx — defaults + a title template export const metadata: Metadata = { title: { default: "My Site", template: "%s | My Site" }, // child titles become "About | My Site" }; ``` Metadate definite într-un layout sunt **fuzionate** cu (și pot fi anulate de) pagini copil — deci setezi implicite pe întregul site o singură dată și valori per pagină acolo unde este necesar. `template` adaugă automat numele site-ului. ## Metadate bazate pe fișiere ```text app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts ``` Fișierele speciale generează automat metadate/rutele corespunzătoare. ## De ce este important Metadate bune conduc SEO și previzualizări de partajare socială. API de metadate o face declarativă și type-safe — `metadata` statică pentru pagini fixe, `generateMetadata` async pentru pagini bazate pe date, și implicite la nivel de layout cu șabloane — înlocuind gestionarea manuală `<head>` cu un sistem curat, renderizat de server.

Metadate statice

Metadate dinamice (depind de date)

Metadate se fuzionează în jos pe copac

Metadate bazate pe fișiere

De ce este important

Întrebări conexe