Guida ai nuovi metadata in Next.js 13 con supporto SEO | Tutorial Next.js 13.2

Guida ai nuovi metadata in Next.js 13 con supporto SEO | Tutorial Next.js 13.2

Indice dei contenuti

1. Introduzione
2. La vecchia versione del file head
3. La nuova versione del file layout
4. La chiave "title" nel file metadata
5. Utilizzo dei modelli di titoli
6. Creazione di metadata personalizzati
7. Utilizzo delle descrizioni dei metadata
8. Parole chiave per migliorare la visibilità sui motori di ricerca
9. Utilizzo dei metadata per i social media
10. Altri campi disponibili nei metadata

📄 Introduzione

Nel caso tu abbia creato di recente un'app con Next.js, in particolare dopo l'uscita della versione Next.js 13.2, potresti aver notato una differenza nel file head. In effetti, dalla versione 13.3, il file head è deprecato e rimosso nelle versioni future. In questa guida, vedremo come funziona il nuovo sistema di metadata nel file layout.js e come sfruttare al meglio questa nuova funzionalità.

📄 La vecchia versione del file head

Prima di approfondire il nuovo sistema di metadata nel file layout.js, è importante capire come funzionava la vecchia versione del file head. In precedenza, il file head era il luogo in cui venivano inseriti i metadata dell'app. Tuttavia, con l'introduzione della versione 13.2 di Next.js, tutti i metadata sono stati spostati nel file layout.js.

📄 La nuova versione del file layout

Apriamo il file layout.js nel tuo progetto Next.js (versione 13.2 o successive) e vediamo come funziona il nuovo sistema di metadata. Al suo interno, troverai una sezione chiamata "export const metadata". Questa è la sezione in cui puoi inserire i tuoi metadata.

📄 La chiave "title" nel file metadata

Uno dei tag più importanti nei metadata è "title". Questo tag controlla il nome del tuo sito e il testo visualizzato nella scheda del browser. Ad esempio, se voglio che il titolo del mio sito sia "Il mio sito Next.js", posso specificarlo nel tag "title" del mio metadata.

📄 Utilizzo dei modelli di titoli

In alcuni casi, potresti voler utilizzare un modello di titolo invece di specificare un titolo fisso per ogni pagina del tuo sito. Questo può essere particolarmente utile se desideri mantenere un'unica struttura di titoli per tutto il tuo sito, ma al tempo stesso desideri avere la possibilità di personalizzare il titolo per pagine specifiche. Con Next.js, puoi utilizzare il concetto di "template" per raggiungere questo obiettivo.

📄 Creazione di metadata personalizzati

Oltre al tag "title", esistono anche altri campi disponibili nei metadata che puoi personalizzare per migliorare l'esperienza degli utenti e la visibilità sui motori di ricerca. Ad esempio, puoi aggiungere una descrizione per la tua pagina utilizzando il tag "description".

📄 Utilizzo delle descrizioni dei metadata

Le descrizioni dei metadata sono importanti per migliorare la visibilità delle pagine del tuo sito sui motori di ricerca come Google. La descrizione verrà mostrata nei risultati di ricerca e può influire sulla decisione degli utenti di cliccare sulla tua pagina. Assicurati di utilizzare descrizioni concise e pertinenti per ogni pagina.

📄 Parole chiave per migliorare la visibilità sui motori di ricerca

Oltre alla descrizione, puoi utilizzare le parole chiave nei metadata per aiutare i motori di ricerca a comprendere meglio il contenuto del tuo sito. Le parole chiave possono includere termini specifici legati al tuo sito o all'argomento trattato nella pagina specifica.

📄 Utilizzo dei metadata per i social media

I metadata specifici per i social media possono essere utilizzati per ottimizzare la condivisione dei tuoi contenuti sui social media come Twitter e Facebook. Puoi specificare il titolo, la descrizione, l'immagine e altre informazioni che verranno mostrate quando qualcuno condivide il tuo link su una piattaforma di social media.

📄 Altri campi disponibili nei metadata

Oltre ai campi menzionati in precedenza, ci sono molti altri campi disponibili nei metadata di Next.js. Ad esempio, è possibile gestire il comportamento dei robot sui tuoi siti utilizzando il campo "robots". Puoi anche personalizzare i tuoi icon-favicon e impostare il colore del tema per le pagine specifiche.

FAQ

❓ Come posso utilizzare il nuovo sistema di metadata in Next.js?

Per utilizzare il nuovo sistema di metadata in Next.js, apri il file layout.js del tuo progetto e inserisci i tuoi metadata nella sezione "export const metadata".

❓ Cosa succede se utilizzo ancora il vecchio file head?

Se aggiorni a Next.js 13.2 o versioni successive senza rimuovere il vecchio file head, potresti riscontrare problemi nel funzionamento del tuo sito. È quindi consigliato eliminare il file head e utilizzare il nuovo sistema di metadata nel file layout.js.

❓ Posso personalizzare i metadata per ogni pagina del mio sito?

Sì, puoi personalizzare i metadata per ogni pagina del tuo sito. Puoi inserire i metadata direttamente nel file layout.js o possono essere specificati nelle singole pagine utilizzando l'oggetto "metadata" all'interno del file stesso.

❓ Quali sono gli altri campi disponibili nei metadata di Next.js?

Oltre ai campi "title" e "description", ci sono molti altri campi disponibili nei metadata di Next.js. Alcuni esempi sono "keywords" per le parole chiave, "robots" per il controllo dei robot dei motori di ricerca e "icons" per le icone del sito.

Risorse

• Documentazione di Next.js sui metadata: link
• Esempi di metadata per Next.js: link