Ajouter un Sitemap Dynamique à Next.js 13.3+

Comme beaucoup d'entre vous, j'ai rencontré des défis pour comprendre comment ajouter un sitemap dynamique à mon site web Next.js. J'ai passé du temps à chercher des solutions et à expérimenter différentes approches. Dans cet article, je vais partager mes découvertes et vous guider à travers le processus d'ajout d'un sitemap dynamique à votre site Next.js, en mettant l'accent sur la version 13.3 et ultérieure.

Qu'est-ce qu'un Sitemap et pourquoi en avez-vous besoin ?

Un sitemap est un fichier contenant une liste de toutes les pages d'un site web, ainsi que leurs relations les unes avec les autres. Il aide les moteurs de recherche à explorer et à comprendre la structure du site. Les sitemaps peuvent également fournir des informations essentielles sur chaque page, telles que la date de la dernière mise à jour et la fréquence de modification. Avoir un sitemap est particulièrement important pour les sites web plus grands ou ceux ayant des structures complexes, car il facilite la découverte et l'indexation de toutes les pages du site par les moteurs de recherche.

Google recommande l'utilisation de sitemaps pour les nouveaux sites web avec peu de liens externes et pour les sites web dont le contenu n'est pas bien relié. Dans tous les cas, un sitemap peut améliorer le référencement (SEO) d'un site web en fournissant des informations précieuses aux moteurs de recherche et en améliorant la navigation du site.

Sitemaps Statiques vs Dynamiques

Il existe deux principaux types de sitemaps : les sitemaps statiques et les sitemaps dynamiques. Un sitemap statique est créé manuellement et répertorie toutes les pages d'un site web. Généralement créé au format XML, ce type de sitemap est soumis aux moteurs de recherche pour les aider à découvrir et à indexer toutes les pages du site. En revanche, un sitemap dynamique est généré automatiquement et mis à jour par le serveur du site chaque fois qu'une page est ajoutée ou supprimée. Ce type de sitemap est utile pour les sites web plus importants ou plus complexes, où le suivi manuel de toutes les pages est difficile. Bien que les deux types de sitemaps servent le même objectif, les sitemaps dynamiques sont généralement plus efficaces, car ils éliminent la nécessité de mises à jour manuelles.

Ajout d'un Sitemap à partir du Répertoire "pages"

Pour commencer, vous pouvez ajouter un sitemap dynamique à votre site Next.js en utilisant le répertoire "pages". Créez un fichier "sitemap.xml.js" à l'intérieur du dossier "pages" et ajoutez un composant SiteMap par défaut :

// pages/sitemap.xml.js
export default function SiteMap() {}

Le rôle principal de ce composant est de rendre la page du sitemap lorsque l'URL "/sitemap.xml" est accédée. Le contenu réel proviendra de la fonction "getServerSideProps", qui obtiendra les URL de tous les articles, appellera la fonction de rendu du sitemap et enverra la réponse avec l'en-tête "Content-Type" au format "text/xml".

Pour générer le sitemap XML, vous pouvez implémenter une fonction "generateSiteMap" qui extrait les URL de tous les articles, ajoute les liens vers toutes les pages statiques et les rend dans le format XML :

// pages/sitemap.xml.js
import { getSortedPostsData } from "../lib/posts";

export async function getServerSideProps({ res }) {
  const posts = getSortedPostsData();

  // Générez le sitemap XML avec les données du blog
  const sitemap = generateSiteMap(posts);

  res.setHeader("Content-Type", "text/xml");
  // Envoyez le XML au navigateur
  res.write(sitemap);
  res.end();

  return {
    props: {},
  };
}

Ajout d'un Sitemap au Répertoire "app"

Next.js version 13 a introduit un nouveau répertoire "app", qui est destiné à remplacer le répertoire "pages" à long terme. En conséquence, le rendu côté serveur (à l'aide de "getServerSideProps") a été remplacé par les Server Components. Cela signifie que nous ne pouvons plus nous fier à "getServerSideProps" pour rendre notre page de sitemap.

Cependant, dans Next.js 13.2 et les versions précédentes, nous pouvons utiliser les "Route Handlers" pour obtenir le même comportement. Les "Route Handlers" permettent de créer des gestionnaires de demandes personnalisées pour des routes spécifiques à l'aide des API Web Request and Response. Ils servent de remplacement aux Routes API du répertoire "pages".

Après avoir déplacé le fichier "sitemap.xml.js" dans le répertoire "app" et changé son nom en "route.js", vous pouvez créer un gestionnaire de demande GET personnalisé pour cette route :

// app/sitemap.xml/route.js
import { getSortedPostsData } from "../lib/posts";

function generateSiteMap(posts) {
  return `<?xml version="1.0" encoding="UTF-8"?>
   <urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">
     <!-- Ajoutez manuellement les URL statiques -->
     <url>
       <loc>${URL}</loc>
     </url>
     <url>
       <loc>${URL}/portfolio</loc>
     </url>
     <url>
       <loc>${URL}/blog</loc>
     </url>
     ${posts
       .map(({ id }) => {
         return `
           <url>
               <loc>${`${URL}/blog/${id}`}</loc>
           </url>
         `;
       })
       .join("")}
   </urlset>
 `;
}

export function GET() {
  const posts = getSortedPostsData();
  const body = generateSiteMap(posts);

  return new Response(body, {
    status: 200,
    headers: {
      "Cache-control": "public, s-maxage=86400, stale-while-revalidate",
      "content-type": "application/xml",
    },
  });
}

Ajout d'un Sitemap en utilisant Next.js 13.3 et plus récent

Next.js version 13.3 a introduit l'API de métadonnées basées sur des fichiers, qui simplifie le travail avec les mét

adonnées des pages en exportant un objet Metadata. Cela facilite non seulement la gestion des sitemaps statiques et dynamiques, mais élimine également la nécessité de générer manuellement le sitemap.

Utilisez un fichier "sitemap.js" pour effectuer la majeure partie de la logique répétitive liée à la création du sitemap de votre site web. Vous pouvez mapper les articles et les URL statiques sur les propriétés d'un objet Sitemap, puis retourner cet objet :

// app/sitemap.js
import { getSortedPostsData } from "../lib/posts";

const URL = "https://votresite.com";

export default async function sitemap() {
  const posts = getSortedPostsData.map(({ id, date }) => ({
    url: `${URL}/blog/${id}`,
    lastModified: date,
  }));

  const routes = ["", "/portfolio", "/blog"].map((route) => ({
    url: `${URL}${route}`,
    lastModified: new Date().toISOString(),
  }));

  return [...routes, ...posts];
}

N'oubliez pas d'inclure le champ "lastModified" pour afficher la date de la dernière modification de chaque page. Cette information peut être utile pour les moteurs de recherche lorsqu'ils parcourent et indexent votre site web.

Une fois ces modifications effectuées, en visitant "votresite.com/sitemap.xml", vous devriez voir le sitemap mis à jour, rendu à partir du répertoire "app".

Résumé

L'ajout d'un sitemap à un site web est un aspect important de l'optimisation pour les moteurs de recherche, en particulier pour les sites web de grande taille. Il aide les moteurs de recherche à comprendre la structure d'un site, à découvrir toutes ses pages et à les parcourir efficacement.

Cet article a montré comment ajouter un sitemap dynamique à un site Next.js 13, qui est automatiquement mis à jour chaque fois que de nouvelles pages sont ajoutées ou supprimées. Il a été expliqué comment créer un sitemap dynamique pour les sites Next.js en utilisant soit le répertoire "pages" soit le répertoire "app".

Un sitemap dynamique est plus efficace qu'un sitemap statique, surtout pour les sites web plus grands ou plus complexes. En mettant en œuvre les techniques discutées dans cet article, vous pouvez vous assurer que vos sites web sont facilement découvrables par les moteurs de recherche, améliorant ainsi leurs performances en matière de référencement (SEO).