Next.js 13: Nuova API Metadata per il supporto SEO
Tabella dei contenuti:
- Introduzione
- Come funziona il file
head in Next 13 e versioni successive
- Aggiornamenti di Next 13.3: il file
head viene deprecato e rimosso
- Nuova funzione metadata nel file
layout.js
- Utilizzo della chiave "Title" nell'oggetto "metadata"
- Utilizzo di template per il titolo predefinito
- Aggiunta di metadati personalizzati nelle singole pagine senza layout
- Utilizzo della chiave "Description" nell'oggetto "metadata"
- Altre opzioni disponibili nell'oggetto "metadata"
- Conclusioni
📝 Introduzione
Se hai creato di recente un'app Next 13, in particolare dopo l'uscita di Next 13.2, potresti aver notato una differenza nel file head all'interno della directory dell'app. La buona notizia è che a partire dalla versione 13.3, il file head è stato deprecato e rimosso. In questa guida, ti mostrerò come utilizzare la nuova funzione di metadata presente nel file layout.js per gestire i metadata del tuo sito in modo più efficiente.
📝 Come funziona il file head in Next 13 e versioni successive
Il file head era precedentemente utilizzato per conservare i metadata delle pagine in Next. Tuttavia, a partire dalla versione 13.3, questo file è stato deprecato e rimosso. Quindi, se stai sviluppando un'app Next 13.2 o successiva, dovrai utilizzare il file layout.js per gestire i metadata del tuo sito.
📝 Aggiornamenti di Next 13.3: il file head viene deprecato e rimosso
Nella versione 13.3 di Next, è stata effettuata una modifica significativa eliminando il file head e introducendo una nuova modalità di gestione dei metadata. Ciò è stato fatto per semplificare il processo di sviluppo e rendere più coerente la struttura del progetto Next.
📝 Nuova funzione metadata nel file layout.js
Nel file layout.js di Next 13.2 e versioni successive, è presente una nuova funzione chiamata const metadata. Questa funzione è dove è possibile inserire i metadata del sito. Vediamo insieme le varie opzioni disponibili all'interno dell'oggetto metadata.
📝 Utilizzo della chiave "Title" nell'oggetto "metadata"
Una delle chiavi più importanti nell'oggetto metadata è il title. Questo controllo il nome del tuo sito e il titolo visualizzato nella scheda del browser. Puoi facilmente modificare il titolo del tuo sito apportando le opportune modifiche nella sezione metadata del tuo file layout.js.
📝 Utilizzo di template per il titolo predefinito
Se desideri avere un template predefinito per il titolo del tuo sito e apportare modifiche solo nelle pagine specifiche, puoi utilizzare la funzione di template per il titolo. Aggiungi semplicemente un oggetto con il valore predefinito per il titolo nel tuo file layout.js, quindi utilizza la chiave template con il segno di percentuale %s nelle pagine specifiche per aggiornare il titolo di quella pagina.
📝 Aggiunta di metadati personalizzati nelle singole pagine senza layout
Se desideri aggiungere metadati a una singola pagina che non fa uso di un layout separato, puoi farlo direttamente nella pagina stessa. Basta dichiarare una variabile di oggetto metadata all'inizio della pagina e impostare le varie chiavi, come title e description, per personalizzare i metadati della pagina.
📝 Utilizzo della chiave "Description" nell'oggetto "metadata"
Un'altra chiave importante nell'oggetto metadata è la description. Questa permette di fornire una descrizione del contenuto della pagina, che può essere visualizzata nei risultati di ricerca di Google o in altre impostazioni del sito.
📝 Altre opzioni disponibili nell'oggetto "metadata"
Oltre alle opzioni menzionate in precedenza, ci sono molte altre chiavi disponibili nell'oggetto metadata. Ad esempio, è possibile specificare le parole chiave per aiutare i motori di ricerca a comprendere il contenuto del tuo sito, impostare informazioni per i social media con chiavi come open graph e Twitter, controllare il comportamento dei robot e molto altro ancora.
📝 Conclusioni
A partire dalla versione 13.3 di Next, il file head è stato deprecato e rimosso, quindi è necessario utilizzare la nuova funzione di metadata nel file layout.js per gestire i metadata del sito. Questo nuovo approccio semplifica la gestione dei metadata e consente di avere un maggiore controllo sui vari aspetti del tuo sito. Prova questa nuova funzionalità e goditi una migliore gestione dei metadata in Next!
📚 Risorse:
FAQ
Domanda: Posso ancora utilizzare il file head in Next 13.3 e versioni successive?
Risposta: No, a partire dalla versione 13.3 il file head è stato deprecato e rimosso. È necessario utilizzare il file layout.js per gestire i metadata.
Domanda: Posso modificare il titolo del mio sito in base alla pagina corrente?
Risposta: Sì, è possibile utilizzare il template per il titolo predefinito nel file layout.js e aggiornare il titolo nella pagina specifica utilizzando la chiave template con %s.
Domanda: Posso aggiungere metadati personalizzati a una singola pagina senza un layout separato?
Risposta: Sì, è possibile aggiungere metadati personalizzati direttamente nella pagina stessa utilizzando l'oggetto metadata.
Domanda: Cosa succederà se aggiorno a Next 13.3 ma continuo a utilizzare il file head?
Risposta: Se aggiorni a Next 13.3 ma continui a utilizzare il file head, il tuo sito potrebbe non funzionare correttamente. È importante effettuare la migrazione al nuovo sistema di metadata nel file layout.js.
Domanda: Dove posso trovare ulteriori informazioni sulle opzioni disponibili nell'oggetto metadata?
Risposta: Puoi trovare ulteriori informazioni sulle opzioni disponibili nell'oggetto metadata nella documentazione ufficiale di Next.js, il link è disponibile nelle risorse di questa guida.
AI SEO Assistant
WHY YOU SHOULD CHOOSE Proseoai
