Guide SEO pour Nuxt

Documentation Officielle

Module Nuxt SEO

@nuxtjs/sitemap : Génère automatiquement un sitemap XML pour aider les moteurs de recherche à indexer les pages. @nuxtjs/robots : Crée un fichier robots.txt pour gérer l’accès des robots d’indexation. nuxt-schema-org : Intègre facilement des balises de schéma JSON-LD pour enrichir les résultats de recherche. nuxt-seo-experiments : Permet d’expérimenter différentes optimisations SEO. nuxt-og-image : Génère des images pour les aperçus sociaux. nuxt-link-checker : Vérifie la validité des liens pour éviter les erreurs 404.

Ce guide vous montre comment configurer le SEO dans un projet Nuxt en utilisant différents modules populaires pour optimiser la visibilité de votre site dans les moteurs de recherche.

Installation des modules SEO

1. Installation de base

   Installez le module SEO en exécutant la commande suivante dans votre terminal :

   npx nuxi@latest module add seo

   Cela installe les modules SEO pour Nuxt et vous donne accès à une base solide pour optimiser votre site.

2. Configuration de base

   Configurez les informations de base de votre site dans nuxt.config.ts :

   nuxt.config.ts

   export default defineNuxtConfig({
   ...
       site: {
           url: 'https://www.example.com',
           name: 'An example name for my site.',
       },
   ...
   });

   • url : L’URL de base de votre site pour générer les liens et métadonnées.
   • name : Nom de votre site qui sera utilisé dans les balises méta et partages sociaux.

@nuxtjs/robots

Documentation officielle

1. Installation

   Pour créer et gérer le fichier robots.txt, ajoutez @nuxtjs/robots :

   npx nuxi@latest module add robots

2. Configuration du module

   Ajoutez le module dans nuxt.config.ts et configurez-le pour contrôler l’accès des robots d’indexation :

   nuxt.config.ts

   export default defineNuxtConfig({
       ...
       modules: [
           "@nuxtjs/robots",
       ],
       ...
   });

3. Configuration de robots.txt

   Définissez vos règles dans la section robots :

   nuxt.config.ts

   export default defineNuxtConfig({
       ...
       robots: {
           allow: '/',
           disallow: [
           '/icons/',
           '/images/',
           ],
           blockNonSeoBots: true,
           credits: false,
       },
       ...
   });

   • allow : Définit les pages que les moteurs de recherche peuvent explorer.
   • disallow : Bloque certaines pages ou répertoires spécifiques.
   • blockNonSeoBots : Limite l’accès aux bots non-SEO.
   • credits : Masque la référence du module dans robots.txt pour un rendu plus propre.

@nuxtjs/sitemap

Documentation officielle

Le module @nuxtjs/sitemap génère automatiquement un sitemap XML pour votre site, ce qui permet aux moteurs de recherche de mieux comprendre la structure de vos pages.

1. Installation

   npx nuxi module add @nuxtjs/sitemap

2. Ajouter le module dans nuxt.config.ts

   nuxt.config.ts

   export default defineNuxtConfig({
       ...
       modules: [
           "@nuxtjs/sitemap",
       ],
       ...
   });

3. Configuration du sitemap

   Personnalisez les options de sitemap pour exclure certaines pages du sitemap XML :

   nuxt.config.ts

   export default defineNuxtConfig({
       ...
       sitemap: {
           exclude: [
              '/mentions-legales',
              '/en/legal-notice',
           ],
       },
       ...
   });

   • exclude : Liste des pages à exclure du sitemap, souvent celles qui ne sont pas SEO-friendly.