Les balises META fournissent des données supplémentaires utiles sur vos pages Web. Assurez-vous de savoir comment les inclure lorsque vous utilisez Nuxt.

Nuxt.js est un framework puissant pour créer des applications Vue.js côté serveur. En plus de fournir une base solide pour la création d'applications complexes, Nuxt.js facilite également l'ajout de balises méta à vos pages.

Découvrez comment inclure des balises méta dans votre application Nuxt pour améliorer le référencement et la visibilité de votre site sur les réseaux sociaux.

Les balises META sont des extraits de code qui fournissent des informations sur une page Web. Ces balises sont présentes dans le code source HTML, tout comme le contenu de votre page, mais elles ne sont pas visibles sur la page elle-même.

Les balises META peuvent fournir des informations telles que le titre de la page, la description et les mots-clés. Ils sont également utilisés pour fournir des informations pour le partage sur les réseaux sociaux et l'optimisation des moteurs de recherche.

instagram viewer

Avant de plonger dans l'ajout de balises méta, créez une nouvelle application Nuxt.js. Pour cela, assurez-vous d'avoir Node.js installé sur votre appareil. Ensuite, ouvrez votre terminal et exécutez la commande suivante :

npx créer-nuxt-app mon-application

Cela créera une nouvelle application Nuxt.js dans un répertoire appelé mon-application. Suivez les invites pour configurer votre application selon vos besoins.

Une façon d'ajouter des balises méta à votre application Nuxt.js consiste à les ajouter globalement. Pour ce faire, ajoutez une balise de titre et deux balises méta: une pour le jeu de caractères et une pour la fenêtre d'affichage. Ouvrez votre nuxt.config.js fichier et ajoutez une propriété head au module.exports objet:

module.exports = {
 diriger: {
 titre: "Mon application",
 méta: [
 { jeu de caractères: 'utf-8' },
 { nom: 'fenêtre', contenu: 'width=device-width, initial-scale=1' }
 ]
 }
}

Ajout de balises Meta sur des pages uniques

Parfois, vous souhaiterez peut-être ajouter des balises META uniquement à des pages spécifiques de votre application. Pour ce faire, vous pouvez ajouter une propriété head à la définition du composant de la page :