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.
Que sont les métabalises ?
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.
Ajout des métabalises
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 générer dynamiquement des balises méta.
<template>
<div>
<h1>{{ post.title }}</h1>
<p>{{ post.body }}</p>
</div>
</template>
<script>
export default {
async asyncData({ params }) {
const post = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`)
.then(res => res.json())
return { post }
},
head() {
return {
title: this.post.title,
meta: [
{ hid: 'description', name: 'description', content: this.post.body },
{ hid: 'og:title', property: 'og:title', content: this.post.title },
{ hid: 'og:description', property: 'og:description', content: this.post.body },
{ hid: 'og:image', property: 'og:image', content: this.post.image },
{ hid: 'og:url', property: 'og:url', content: `https://example.com/blog/${this.post.id}` },
{ hid: 'article:published_time', property: 'article:published_time', content: this.post.date },
{ hid: 'article:author', property: 'article:author', content: this.post.author },
{ hid: 'article:section', property: 'article:section', content: this.post.category }
]
}
}
}
</script> 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 permet d’augmenter la visibilité, le 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 :
npm run dev 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 balises méta
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 aidez les moteurs de recherche à comprendre le contenu de vos pages web et à mieux les classer pour les requêtes de recherche pertinentes.
