Comment générer un sitemap dynamiquement dans Next.Js ?

Si vous construisez votre site avec Next.js et tirez parti du rendu côté serveur (SSR), vous avez déjà un atout majeur en main. Mais à quoi sert-il d’avoir toutes ces pages générées dynamiquement si les moteurs de recherche ne peuvent pas les trouver ? C’est là qu’intervient le sitemap.

Qu’est-ce qu’un sitemap et quelle est son importance pour le SEO ?

D’après le site sitemaps.org, un sitemap est un fichier XML qui répertorie les URL d’un site Web. Il permet d’inclure des informations supplémentaires sur chaque URL : quand elle a été mise à jour pour la dernière fois, à quelle fréquence elle change et quelle est son importance par rapport aux autres URL du site. Cela permet aux moteurs de recherche d’explorer le site plus intelligemment.

Typiquement, la structure d’un sitemap ressemble à ceci :

<?xml version="1.0" encoding="UTF-8"?>

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

   <url>

      <loc>http://www.example.com/</loc>

      <lastmod>2005-01-01</lastmod>

      <changefreq>monthly</changefreq>

      <priority>0.8</priority>

   </url>

</urlset> 

En général, on ne va utiliser que les balises <loc> et <lastmod>. La balise <loc> permet de définir l’URL de la page, et la balise <lastmod> permet de définir la date de dernière modification de la page. C’est cette dernière balise qui nous intéresse le plus, car elle permet aux moteurs de recherche de savoir si une page a été modifiée depuis leur dernière visite, et ainsi de leur indiquer s’ils doivent l’explorer à nouveau ou non.

Imaginez le sitemap comme une carte détaillée de votre site. Il répertorie toutes les pages importantes, les catégories, les sections et les liens entre elles. Grâce à cette vue d’ensemble, les moteurs de recherche peuvent comprendre rapidement comment vos pages sont connectées les unes aux autres, établissant ainsi une hiérarchie claire. Cela permet aux robots d’exploration de suivre les chemins les plus pertinents pour découvrir toutes vos pages.

Comment générer un sitemap dynamique dans notre application Next.js ?

La démarche pour créer le sitemap est plutôt simple. Nous allons nous reposer sur la fonction getServerSideProps de Next.js pour générer le sitemap à la volée.

1. Créer un fichier sitemap.xml.jsx

Dans le dossier pages, créez un fichier sitemap.xml.jsx. Ce fichier sera utilisé pour générer le sitemap lorsque l’on accédera à l’URL /sitemap.xml.

Contrairement aux fichiers composants habituels, on ne va rien retourner dans notre fonction principale. En effet, on va se servir de la fonction getServerSideProps fournie par Next.Js afin de récupérer des données côté serveur et de les passer au composant. Dans notre cas, cette fonction servira à générer le sitemap, puis l’écrire directement dans la réponse HTTP.

function generateSitemap() { ... }

export async function getServerSideProps({ res }) {
    // récupération des données afin de connaître les url à fournir au sitemap
    const data = fetch('/posts');

    // génération du sitemap
    const sitemap = generateSitemap(data);

    // réponse à la requête avec ce sitemap
    res.setHeader('Content-Type', 'text/xml');
    res.write(sitemap);
    res.end();

    return {props: {}};
}

2. Récupérer les différentes URL possibles

Pour générer le sitemap, nous avons besoin de récupérer toutes les URL possibles de notre site. Par exemple, pour ce blog, je récupère la liste de mes fichiers existants via mon API. Cela pourrait tout aussi bien venir d’une base de données. Le but est simplement de récupérer une liste afin de créer plusieurs <url>.

Je récupère ainsi via mon API un tableau contenant les noms des posts et leur date de dernière modification :

[
    {
        name: 'redux',
        lastMod: '2023-01-31'
    },
    {
        name: 'usecontext',
        lastMod: '2023-02-01'
    },
]

3. Générer le sitemap

Une fois que l’on a récupéré les données, on peut générer le sitemap. Pour cela, on va créer la fonction generateSiteMap qui va prendre en paramètre les données récupérées précédemment.

function generateSiteMap(posts) {
    return `<?xml version="1.0" encoding="UTF-8"?>
   <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   // on affiche d'abord les url statiques
   <url>
    <loc>${DOMAIN}</loc>
   </url>
   <url>
    <loc>${DOMAIN}/posts</loc>
   </url>
   // puis celles récupérées via nos données externes !
   ${posts.map((file) => (`<url>
        <loc>${`${DOMAIN}/posts/${file.name}`}</loc>
        <lastmod>${file.lastMod}</lastmod>
    </url>`)).join('')}
   </urlset>
 `;
}

Et voilà, c’est tout ! À chaque fois que vous ou Google irez sur l’URL /sitemap.xml, le sitemap sera regénéré.