Sitemap XML et robots.txt dans React Router 7 : SEO efficace

À quoi servent les fichiers sitemap.xml et un robots.txt ?

Le bot de Google découvre déjà ta page d’accueil, puis clique sur chaque lien interne. Mais :

• ce crawl peut prendre des semaines ;
• il gaspille son budget sur tes pages de connexion et d’inscription, sans intérêt business.

Deux fichiers très simples règlent ça :

Grâce aux resource routes de React Router 7, ces fichiers sont générés à la volée côté serveur – zéro build script externe.

1. Créer une resource route sitemap.xml

Une resource route n’exporte pas de composant React par défaut : elle renvoie une Response. Ajoute le fichier suivant :

1
import { href } from "react-router";           // helper typé
2
import { serverEnv } from "~/server/env.server";// variables d'env validées par Zod
3

4
// ①  Pages que tu souhaites indexer
5
const pages = [
6
  href("/"),                // page d'accueil
7
  href("/blog"),            // listing blog
8
  // tu peux générer dynamiquement les /blog/:slug depuis la BD ici
9
];
10

11
export function loader() {
12
  const { FRONTEND_URL } = serverEnv;
13

14
  // ②  Transforme chaque URL en bloc <url>
15
  const urls = pages
16
    .map(
17
      (path) => `<url>
18
  <loc>${FRONTEND_URL}${path}</loc>
19
</url>`
20
    )
21
    .join("\n");
22

23
  // ③  Enveloppe le tout dans <urlset>
24
  const xml = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
25
${urls}
26
</urlset>`;
27

28
  // ④  Retourne la réponse XML
29
  return new Response(xml, {
30
    headers: { "Content-Type": "application/xml" },
31
  });
32
}

Points clés reformulés du transcript

• On exporte uniquement loader ; aucune balise React n’est rendue.
• href() assure le typage et évite les fautes de routes.
• L’URL doit être absolue (FRONTEND_URL) sinon Google l’ignore.
• Un urlset minimaliste : pas de lastmod, pas de priority – recommandé par les agences SEO que j’ai consultées : plus léger, plus rapide à parser.

2. Générer robots.txt

Même technique, mais en texte brut :

1
import { serverEnv } from "~/server/env.server";
2

3
export function loader() {
4
  const { FRONTEND_URL } = serverEnv;
5

6
  const txt = `
7
User-Agent: *
8
Allow: /
9
Disallow: /login
10
Disallow: /register
11

12
Sitemap: ${FRONTEND_URL}/sitemap.xml
13
`.trim();
14

15
  return new Response(txt, {
16
    headers: { "Content-Type": "text/plain" },
17
  });
18
}

Ici :

• Allow: / laisse crawler l’ensemble du site,
• Disallow bloque les pages sans valeur SEO,
• la dernière ligne renvoie vers ton sitemap.

3. Tester localement

1
npm run dev
2
open http://localhost:5173/sitemap.xml
3
open http://localhost:5173/robots.txt

Tu dois voir :

• un XML propre, indenté, commençant par <urlset>;
• un .txt clair, content-type text/plain.

4. Déclarer le sitemap à Google

1. Connecte-toi à la Search Console.
2. Ajoute ton domaine (racine + version HTTPS).
3. Menu « Sitemaps » → colle https://mon-domaine.com/sitemap.xml.

Google confirme : « Découvert : X URLs » Tu viens d’économiser des semaines de crawl aléatoire.

5. Foire aux questions

6. Checklist avant prod

• sitemap.xml accessible sans auth.
• Balises <loc> absolues (HTTP S + domaine prod).
• robots.txt bloque /login, /register, tous les slugs sensibles.
• Entrée Search Console créée et sitemap soumis.
• Pipeline CI déployée (voir le module Déploiement).

7. Ce que tu as appris

• Resource routes → fichiers statiques dynamiques sans composant React.
• Génération XML et txt côté serveur avec les bons headers.
• Enrichir ton SEO sans dépendances tierces.
• Utiliser serverEnv validé par Zod pour éviter les URLs manquantes en prod.