Construire un sitemap avec Next.js

Aujourd'hui, la majorité des sites webs proposent un sitemap qui répertorie l'ensemble des pages de leur application.

Ce sitemap est généralement proposé au format XML et permet aux différents moteurs de recherche d'indexer et découvrir facilement toutes les pages disponibles.

Lorsque vous utilisez le framework Next.js, vous avez la possibilité de construire un sitemap statique ou dynamique selon si ces pages sont statiques ou au contraire si vos différentes pages dépendent de données extérieures (CMS, API...).

Selon les recommandations de Google, la création et la mise à disposition d'un sitemap est conseillée dans le cas où votre site est volumineux, possède peu de liens externes pour y accéder ou est récent.

Générer un sitemap statique

Grâce au système de routage par fichiers de Next.js avec l'App Router, vous pouvez facilement mettre en place un sitemap.

Pour se faire, un fichier sitemap.xml devra être créé à la racine du dossier app (dossier racine de votre routage).

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://monsite.fr</loc>
    <lastmod>2024-09-10T15:02:24.021Z</lastmod>
    <changefreq>monthly</changefreq>
    <priority>1</priority>
  </url>
  <url>
    <loc>https://monsite.fr/contact</loc>
    <lastmod>2024-09-10T15:02:24.021Z</lastmod>
    <changefreq>monthly</changefreq>
    <priority>1</priority>
  </url>
</urlset>

De cette manière, en développement ou production, ce sitemap sera accessible via l'url /sitemap.xml.

Cette option de génération de sitemap est compatible avec un déploiement en export statique, une des possibilités de déploiement proposée par le framework.

Génération d'un sitemap dynamique avec Next.js

Toujours dans le routage de votre application, nous allons pouvoir définir un sitemap grâce à la création d'un fichier sitemap.ts ou sitemap.js.

Ce fichier sera automatiquement reconnu par le framework comme étant un fichier de routage spécifique et le retour de la fonction exportée par défaut dans le fichier constituera le contenu de votre fichier sitemap.xml de sortie.

En exemple, un fichier sitemap.ts pourrait ressembler à :

import type { MetadataRoute } from 'next'
 
export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://monsite.fr',
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 1,
    },
  ]
}

L'intérêt principal de générer le sitemap de cette manière est que nous pouvons inclure des URL de manière dynamique avec une récupération depuis un appel asynchrone comme depuis une API ou un CMS par exemple :

import { getArticlesListUris } from "@/api/cms";

export default async function sitemap() {

  const articles = await getArticlesListUris();
  const articlesMapped = articles.map((article) => ({
    url: `https://monsite.fr/articles/${article.attributes.uri}`,
    lastModified: article.attributes.updatedAt,
    changeFrequency: "monthly",
    priority: 0.8,
  }));

  return [
    {
      url: "https://monsite.fr",
      lastModified: homepage.updatedAt,
      changeFrequency: "monthly",
      priority: 1,
    },
    {
      url: "https://monsite.fr/articles",
    },
    ...articlesMapped,
  ];
}

Si votre application est multilingue, vous pouvez également préciser des URL relatives qui existent dans d'autres langues :

import type { MetadataRoute } from 'next'
 
export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://monsite.fr',
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 1,
      alternates: {
        languages: {
          en: 'https://monsite.fr/en',
          de: 'https://monsite.fr/de',
        },
      },
    },
  ]
}

Les paramètres du sitemap

En plus de lister l'ensemble des url de votre application, vous pouvez inclure plusieurs paramètres supplémentaires à chacune de vos URL pour décrire notamment la date de dernière modification, les fréquences de modification par exemple. L'ensemble des types de retour possibles est disponible ici.

Envoyer un sitemap

Une fois votre sitemap créé et votre application déployée en production, vous pouvez choisir d'envoyer directement votre sitemap aux moteurs de recherche pour leur permettre de commencer l'exploration de votre application.

Utilisez pour ceci la Search Console de Google où vous pourrez envoyer l'URL complète de votre sitemap ou encore l'outil Webmaster de Bing par exemple.

Une fois le sitemap envoyé une première fois, les robots des moteurs de recherche s'occuperont de parcourir le sitemap autant de fois que nécessaire pour découvrir les potentielles URL de votre site qui ont été ajoutées, modifiées ou retirées.