Comment ajouter des Meta Tags dans Nuxt.js
Nuxt.js est un cadre puissant pour construire des applications Vue.js côté serveur. En plus de fournir une base solide pour la construction 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 afin d’améliorer le référencement de votre site et sa visibilité sur les médias sociaux.
Que sont les balises méta ?
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 des médias sociaux et l’optimisation des moteurs de recherche.
Ajouter les balises méta
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 :
Cela créera une nouvelle application Nuxt.js dans un répertoire appelé mon-app. Suivez les invites pour configurer votre application si nécessaire.
Ajouter des métabalises globalement
Une façon d’ajouter des balises méta à 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 le viewport. Ouvrez votre fichier nuxt.config.js et ajoutez une propriété head au fichier module.exports à l’objet
Ajout de métabalises sur des 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 :
Ajout de métabalises de manière dynamique
L’ajout dynamique de balises méta vous permet de générer des balises méta 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 générer dynamiquement des balises méta.
En générant dynamiquement ces balises méta, vous pouvez fournir des informations plus détaillées sur chaque article de blog aux moteurs de recherche et aux plateformes de médias sociaux. Cela peut aider à augmenter la visibilité, les taux de clics et l’engagement pour nos articles de blog.
Exécution de l’application
Une fois que vous avez ajouté des balises méta à votre application Nuxt.js, vous devez l’exécuter pour voir les changements en action. Vous pouvez le faire en utilisant le serveur de développement Nuxt.js, qui suit le même processus que l’application React.js.
Pour démarrer le serveur de développement, ouvrez votre terminal, naviguez jusqu’au répertoire de votre application et exécutez la commande suivante :
Cela démarrera le serveur de développement et lancera votre application dans un navigateur web. Si vous ouvrez la source de la page du navigateur et que vous regardez la section « head », vous devriez voir les balises méta.
Il est important de noter que les balises méta générées par Nuxt.js ne sont visibles par les moteurs de recherche et les plateformes de médias sociaux que lorsque la page est rendue côté serveur. Si vous utilisez un rendu côté client, les métabalises peuvent ne pas être visibles par les moteurs de recherche et les plateformes de médias sociaux.
Améliorez le classement de votre site web grâce aux métabalises
En plus d’améliorer l’apparence de vos pages web lorsqu’elles sont partagées sur les plateformes de médias sociaux, les balises méta peuvent améliorer le classement de votre site dans les résultats des moteurs de recherche. En fournissant des informations précises et pertinentes sur les métabalises, vous pouvez aider les moteurs de recherche à comprendre le contenu de vos pages web et à mieux les classer pour les requêtes de recherche pertinentes.
S’abonner à notre lettre d’information
Comment ajouter des meta tags dans Nuxtjs ?
Nuxt vous offre trois façons différentes d’ajouter des méta-données à votre application :
- Globalement en utilisant la configuration nuxt. js.
- Localement en utilisant l’en-tête comme un objet.
- Utiliser localement l’en-tête comme une fonction afin d’avoir accès aux données et aux propriétés calculées.
Comment ajouter une balise meta avec js ?
Insérer et d’autres balises à l’aide de Javascript
- var headTag = document.getElementsByTagName(‘HEAD’)[0]; var charsetTag = document.createElement(‘META’) ;
- var headTag = document.getElementsByTagName(‘HEAD’)[0]; var emulationTag = document.createElement(‘META’) ;
- // créer une fonction personnalisée, qui prend deux paramètres :
Comment ajouter une balise de métadonnées ?
Pour ajouter la balise méta description à la page de votre site web, localisez la balise du code HTML. Une méta description est un élément d’information important pour les moteurs de recherche et les utilisateurs.
Comment ajouter une balise canonique dans Nuxt ?
Nous pouvons ajouter le lien canonique à notre page slug et utiliser les paramètres de la route pour obtenir l’url correcte. { hid : ‘canonical’, rel : ‘canonical’, href : `https://jamstack-explorers-nuxt-mission/${this.$route.params.slug}`, }, Et maintenant vous verrez que nous avons l’url canonique correcte sur chaque page.
