Nuxt.js est un framework puissant pour construire des applications Vue.js côté serveur. En plus de fournir une base solide pour construire des applications complexes, Nuxt.js facilite l’ajout de balises méta à vos pages.
Découvrez comment inclure des balises méta dans votre application Nuxt afin d’améliorer le référencement de votre site et sa visibilité sur les médias sociaux.
Les métabalises sont des bouts de code qui fournissent des informations sur une page web. Ces balises sont présentes dans la source HTML, tout comme le contenu de votre page, mais elles ne sont pas visibles sur la page elle-même.
Les métabalises peuvent fournir des informations telles que le titre de la page, la description et les mots-clés. Elles sont également utilisées pour fournir des informations pour le partage sur les médias sociaux et l’optimisation des moteurs de recherche.
Avant de plonger dans l’ajout de balises méta, créez une nouvelle application Nuxt.js. Pour cela, assurez-vous que Node.js est installé sur votre appareil. Ensuite, ouvrez votre terminal et exécutez la commande suivante :
npx create-nuxt-app my-app
Cela créera une nouvelle application Nuxt.js dans un répertoire appelé mon-app. Suivez les instructions pour configurer votre application comme il se doit.
Ajouter des métabalises globalement
Une façon d’ajouter des métabalises à votre application Nuxt.js est de les ajouter globalement. Pour ce faire, ajoutez une balise title 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 et ajoutez une propriété head au fichier module.exports objet :
module.exports = {
head: {
title: 'My App',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
]
}
}
Ajout de métabalises sur les pages individuelles
Il peut arriver que vous souhaitiez ajouter des balises méta uniquement à certaines pages de votre application. Pour ce faire, vous pouvez ajouter une propriété head à la définition du composant de la page :
<template>
<div>
<h1>About Us</h1>
</div>
</template><script>
export default {
head: {
title: 'About Us',
meta: [
{ name: 'description', content: 'Learn more about our company' }
]
}
}
</script>
Ajout dynamique de métabalises
L’ajout dynamique de métabalises vous permet de générer des métabalises spécifiques pour chaque page, en fonction du contenu. Cela peut être utile lorsque vous avez plusieurs pages avec différents types de contenu et que vous souhaitez les optimiser pour les moteurs de recherche et le partage sur les médias sociaux.
Par exemple, disons que vous avez une section blog dans votre application Nuxt.js avec plusieurs articles. Pour optimiser chaque article de blog pour les moteurs de recherche et les médias sociaux, vous pouvez…
