Balises meta et référencement SEO

Nuxt nous permet de définir les balises <meta> par défaut pour notre application dans le fichier nuxt.config.js en utilisant la propriété head. Cela permet d'ajouter un titre et une description par défaut pour le référencement ou bien définir la fenêtre d'affichage ou ajouter la favicon.

Nuxt nous propose trois façons différentes d'ajouter des métadonnées à l'application :

Utiliser globalement le fichier nuxt.config.js
Utiliser localement la propriété head comme un objet
Utiliser localement la propriété head comme une fonction pour que nous ayons accès aux données et aux propriétés calculées.

Paramètres globaux

Nuxt nous permet de définir les balises <meta> par défaut pour notre application dans le fichier nuxt.config.js en utilisant la propriété head. Cela permet d'ajouter un titre et une description par défaut pour le référencement ou bien définir la fenêtre d'affichage ou ajouter la favicon.

nuxt.config.js

export default {
  head: {
    title: 'mon titre de site web',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: 'ma description de site web'
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  }
}

Cela nous donnera le même titre et la même description sur chaque page.

Configuration locale

Nous pouvons également ajouter des titres et des meta pour chaque page en utilisant la propriété head à l'intérieur de notre balise de script sur chaque page.

pages/index.vue

<script>
export default {
  head: {
    title: "Page d'accueil",
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: "Description de la page d'accueil"
      }
    ],
  }
}
</script>

Utiliser head comme objet pour définir un titre et une description uniquement pour la page d'accueil.

pages/index.vue

<template>
  <h1>{{ title }}</h1>
</template>
<script>
  export default {
    data() {
      return {
        title: "Page d'accueil"
      }
    },
    head() {
      return {
        title: this.title,
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: "Description de la page d'accueil"
          }
        ]
      }
    }
  }
</script>

Utiliser head comme une fonction pour définir un titre et une description uniquement pour la page d'accueil. En utilisant une fonction, nous avons accès aux données (data) et aux propriétés calculées (computed).

Nuxt utilise vue-meta pour mettre à jour l'en-tête et les méta data de notre application.

Pour éviter toute duplication lors de l'utilisation de composants enfants, veuillez donner un identifiant unique avec la clé hid à la méta description. De cette façon, vue-meta saura qu'il doit écraser la balise par défaut.

Pour en savoir plus sur les options disponibles pour la propriété head, on peut consulter la documentation de vue-meta .

Ressources externes

Nous pouvons inclure des ressources externes telles que des scripts et des polices de caractères en les ajoutant globalement au fichier nuxt.config.js ou localement dans l'objet ou la fonction head.

Nous pouvons également passer à chaque ressource un body : true optionnel afin d'inclure la ressource avant la balise de fermeture </body>.

Configuration globale

nuxt.config.js

export default {
  head: {
    script: [
      {
        src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
      }
    ],
    link: [
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap'
      }
    ]
  }
}

Configuration locale

pages/index.vue

<template>
  <h1>Page avec jQuery et la police police de caractère Roboto</h1>
</template>

<script>
  export default {
    head() {
      return {
        script: [
          {
            src:
              'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
          }
        ],
        link: [
          {
            rel: 'stylesheet',
            href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap'
          }
        ]
      }
    }
  }
</script>

<style scoped>
  h1 {
    font-family: Roboto, sans-serif;
  }
</style>