Checklist SEO per l'App Router: metadata e generateMetadata, metadataBase, template dei titoli, canonical, hreflang, sitemap.ts, robots.ts e immagini OG, con codice.
Nell'App Router i tag SEO arrivano da un oggetto metadata esportato o da una funzione generateMetadata nei file layout e page, che funzionano solo nei Server Components. Imposta metadataBase una volta nel layout radice, aggiungi app/sitemap.ts e app/robots.ts, dai a ogni route un canonical tramite alternates e metti un file opengraph-image accanto alle pagine che ne hanno bisogno.
Dove si trova ogni elemento
L'App Router ha soluzioni integrate per quasi ogni attività di SEO tecnica, ma sono sparse in una dozzina di pagine di documentazione. Questa checklist le raccoglie in ordine, con codice da copiare per ogni voce, e le caselle ti permettono di seguire i progressi del tuo progetto man mano.
No. L'oggetto metadata e generateMetadata sono supportati solo nei Server Components, perché Next.js deve risolverli sul server prima del rendering. Tieni la pagina come Server Component e importa un client component per le parti interattive.
Le versioni attuali di Next.js passano params e searchParams come Promise, quindi scrivi const { slug } = await params dentro una generateMetadata async. Il codice scritto per le versioni precedenti che legge params.slug direttamente va aggiornato.
Usa generateSitemaps in un file sitemap.ts. Restituisce un elenco di id, e l'export di default costruisce una sitemap per ogni id. In Next.js 16 l'id arriva come Promise. I file sono serviti a percorsi come /product/sitemap/1.xml.
No, a meno che tu non lo imposti. Aggiungi alternates.canonical nei metadata di ogni route, di solito come percorso relativo tipo /blog/my-post, e lascia che metadataBase lo trasformi in un URL completo.
No, un segmento di route può esportare l'uno o l'altro. Usa l'oggetto statico quando nulla dipende dalla richiesta o da dati recuperati, e generateMetadata quando invece ne dipende.
Si imposta una volta in app/layout.tsx. Le pagine figlie che esportano title: "Pricing" diventano Pricing | Northside.
params viene atteso con await. getPost rappresenta la tua funzione per i dati.
Restituisce una voce per ogni URL. changeFrequency e priority sono facoltativi e Google li ignora, quindi sono omessi.
Genera robots.txt nella radice del sito.
Disegna un'immagine di condivisione da 1200 per 630 a partire dal titolo dell'articolo con ImageResponse di next/og. Gli export alt, size e contentType diventano tag og.
Immagini di condivisione basate su file
metadataBase impostato in app/layout.tsx
Permette a ogni altro campo URL di essere un percorso relativo
Template del titolo più valore predefinito nel layout radice
Dà a ogni pagina un suffisso coerente come | Acme
Titolo e descrizione unici in ogni pagina
metadata statici o generateMetadata per ogni route
Canonical su ogni route indicizzabile
hreflang per le route tradotte
alternates.languages, oppure nella sitemap
app/sitemap.ts elenca solo URL canonici attivi
Dividila con generateSitemaps quando è grande
app/robots.ts con una riga sitemap
Blocca solo aree come /admin o /api
Immagine Open Graph per le route principali
file opengraph-image con testo alternativo
noindex sulle route povere di contenuto o private
robots: { index: false } nei metadata di quella route
Contenuto renderizzato sul server
Controlla il sorgente della pagina, non solo la vista del browser
{count} di {total} completati
Inizia gratis · Nessuna carta di credito richiesta