Come impostare i metadati della pagina (titolo, descrizione) in Next.js?

Question

Accepted Answer

L'App Router ha un'API **Metadata** integrata per i tag SEO (``, `<meta>`, Open Graph, ecc.) — esporti i metadati da un `layout.tsx` o `page.tsx` e Next.js renderizza i tag `<head>` corretti. ## Metadati statici ```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 legge l'oggetto `metadata` esportato e genera `<title>`, `<meta name="description">`, tag OG, ecc. — senza necessità di modificare manualmente `<head>`. ## Metadati dinamici (dipendono dai dati) Per le pagine il cui titolo dipende da contenuti recuperati (un post di blog, un prodotto), esporta una funzione asincrona `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] }, }; } ``` Questa viene eseguita sul server e consente a ogni pagina dinamica di avere metadati accurati e specifici del contenuto — essenziale per la SEO e la condivisione social di contenuti dinamici. ## I metadati si uniscono lungo l'albero ```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" }; ``` I metadati definiti in un layout vengono **uniti** a (e possono essere sovrascritti da) pagine figlie — quindi puoi impostare i valori predefiniti a livello di sito una sola volta e valori per pagina dove necessario. Il `template` aggiunge automaticamente il nome del sito. ## Metadati basati su file ```text app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts ``` I file speciali generano automaticamente i metadati/percorsi corrispondenti. ## Perché è importante I buoni metadati aumentano la SEO e le anteprime di condivisione social. L'API Metadata la rende dichiarativa e type-safe — `metadata` statico per pagine fisse, `generateMetadata` asincrono per pagine guidate dai dati, e valori predefiniti a livello di layout con template — sostituendo la gestione manuale di `<head>` con un sistema pulito e renderizzato dal server.