William Gaonarc'h

Développeur Fullstack

Ajouter des pages dynamiques dans le sitemap d’un site Nuxt

Le sitemap est un fichier XML qui liste toutes les pages de votre site pour les moteurs de recherche comme Google.
Pour un site Nuxt utilisant Nuxt Content ou des pages générées dynamiquement, il est important que le sitemap inclue toutes les pages, y compris celles créées automatiquement.


⚡ Pourquoi un sitemap dynamique ?

Un sitemap statique ne listera que les pages que vous écrivez à la main dans la configuration.
Mais si vous ajoutez régulièrement :

  • des articles Markdown (/content/blog/*.md)
  • des projets (/content/projets/*.md)
  • des pages générées depuis un CMS ou une API

Alors vous devez générer le sitemap automatiquement, pour que Google indexe correctement toutes vos pages.


✅ Méthode simple avec Nuxt Content

  1. Installer le module sitemap :

npm install @nuxtjs/sitemap Ajouter le module dans nuxt.config.ts :

modules: '@nuxtjs/sitemap', '@nuxt/content' Utiliser globby pour lister vos fichiers Markdown dans /content :

import { globby } from "globby";

export default defineNuxtConfig({ sitemap: { hostname: "https://mon-site.fr",

urls: async () => {
  const files = await globby("content/**/*.md");

  return files.map((file) => {
    let path = file.replace("content", "").replace(/\.md$/, "");

    if (path.endsWith("/index")) {
      path = path.replace("/index", "");
    }

    return path === "" ? "/" : path;
  });
}

} }) 📄 Explication du code globby("content/**/*.md") → récupère tous vos fichiers .md dans le dossier /content.

replace("content", "") → enlève le préfixe /content pour obtenir l’URL correcte.

replace(/.md$/, "") → enlève l’extension .md.

Gestion de index.md → /content/index.md devient /.

Résultat : chaque fichier .md est transformé en route utilisable dans le sitemap.

🚀 Avantages Automatique : pas besoin d’ajouter chaque page manuellement.

Compatible Nuxt Content : fonctionne avec toutes vos collections (blog, projets, pages).

SEO-friendly : Google et autres moteurs voient toutes vos pages dynamiques.

Flexible : vous pouvez filtrer vos collections ou ajouter des métadonnées comme lastmod.

💡 Exemple pratique Si vous avez :

/content/blog/article-1.md /content/projets/projet-1.md /content/index.md Le sitemap généré sera :

/blog/article-1 /projets/projet-1 Et chaque nouvelle page ajoutée dans /content apparaîtra automatiquement dans le sitemap.

✅ Conclusion Créer un sitemap dynamique pour Nuxt est facile et fiable avec @nuxtjs/sitemap et globby. Que vous ayez des pages Markdown, des projets ou des articles de blog, tout est pris en compte automatiquement, ce qui améliore l’indexation et le SEO de votre site.