I meta tag forniscono utili dati aggiuntivi sulle tue pagine web. Assicurati di sapere come includerli quando usi Nuxt.

Nuxt.js è un potente framework per la creazione di applicazioni Vue.js con rendering lato server. Oltre a fornire una solida base per la creazione di applicazioni complesse, Nuxt.js semplifica anche l'aggiunta di meta tag alle tue pagine.

Scopri come includere i meta tag nella tua app Nuxt per migliorare la SEO e la visibilità del tuo sito sui social media.

I meta tag sono frammenti di codice che forniscono informazioni su una pagina web. Questi tag sono presenti nel sorgente HTML, proprio come il contenuto della tua pagina, ma non sono visibili sulla pagina stessa.

I meta tag possono fornire informazioni come il titolo della pagina, la descrizione e le parole chiave. Sono anche utilizzati per fornire informazioni per la condivisione sui social media e l'ottimizzazione dei motori di ricerca.

Prima di immergerti nell'aggiunta di meta tag, crea una nuova app Nuxt.js. Per questo, assicurati di averlo

instagram viewer
Node.js installato sul tuo dispositivo. Quindi, apri il tuo terminale ed esegui il seguente comando:

npx create-nuxt-app mia-app

Questo creerà una nuova app Nuxt.js in una directory chiamata mia-app. Segui le istruzioni per configurare la tua app secondo necessità.

Un modo per aggiungere meta tag alla tua app Nuxt.js è aggiungerli a livello globale. Per fare ciò, aggiungi un tag title e due meta tag: uno per il set di caratteri e uno per il viewport. Apri il tuo nuxt.config.js file e aggiungi una proprietà head al file module.exports oggetto:

modulo.esporta = {
 Testa: {
 titolo: "La mia app",
 Meta: [
 { set di caratteri: 'utf-8' },
 { nome: 'finestra', contenuto: 'larghezza=larghezza-dispositivo, scala-iniziale=1' }
 ]
 }
}

Aggiunta di meta tag su singole pagine

A volte potresti voler aggiungere meta tag solo a pagine specifiche nella tua app. Per fare ciò, puoi aggiungere una proprietà head alla definizione del componente per la pagina: