Comment construire l'arborescence d'un site web : méthode, exemples et modèles

L'arborescence d'un site web est le plan hiérarchisé de toutes ses pages, dessiné avant la première maquette. Elle dit quelles rubriques existent, ce qui se range dessous, et par quel chemin un visiteur passe de l'accueil à la page qui l'intéresse.

C'est le livrable le moins cher à modifier et le plus coûteux à ignorer. Une rubrique mal nommée se corrige en trente secondes sur un tableau blanc. La même erreur découverte six mois après la mise en ligne coûte une refonte de navigation, un plan de redirections et souvent quelques semaines d'instabilité dans les positions.

Ce guide donne la méthode complète : la définition, les 7 étapes, trois arborescences prêtes à copier, les règles chiffrées avec leur statut réel, les outils et le protocole de test à passer avant de lancer le design UX/UI.

L'arborescence d'un site web est la représentation en arbre de toutes ses pages : une page d'accueil, des rubriques de premier niveau, des sous-rubriques et des pages finales. Elle fixe la profondeur, les libellés du menu et les chemins d'URL avant toute conception graphique.

Le vocabulaire compte, parce qu'il revient à chaque réunion. Une rubrique est une entrée de premier niveau. Une sous-rubrique se range dessous. On parle de page mère et de page fille pour décrire ce lien de parenté, et de profondeur pour compter les niveaux entre l'accueil et une page donnée. Le fil d'Ariane affiche ce chemin au visiteur, en haut de page.

Qui la construit ? Rarement une seule personne. Le dirigeant apporte les priorités commerciales, le responsable marketing la demande réelle, le designer la logique de parcours. Quand l'arborescence sort d'une seule tête, elle finit par reproduire l'organigramme de l'entreprise au lieu des besoins du visiteur. C'est le travers classique des organisations où chaque service réclame sa rubrique.

Et ce qu'elle n'est pas : ni une maquette, ni un fichier technique. Aucune couleur, aucune police, aucun texte rédigé. Des noms de pages et des liens de parenté, rien d'autre. Cette pauvreté est volontaire, et c'est elle qui permet de retravailler la structure dix fois dans une matinée sans jeter le moindre pixel.

Trois documents se font systématiquement confondre dans les briefs, parce que le mot plan traîne dans les trois. L'arborescence sert à décider, le plan de site sert à orienter le visiteur, le sitemap XML sert à parler aux robots d'exploration. Ils ne s'adressent pas aux mêmes personnes, ne se produisent pas au même moment et ne se ressemblent pas.

La confusion coûte du temps en réunion et parfois de l'argent. Si un prestataire répond à une demande d'arborescence en envoyant un fichier sitemap.xml, il a répondu à côté : ce fichier liste les URL d'un site déjà construit, il ne décide de rien.

Gardez cette mise au point sous la main avant le premier atelier, elle fait gagner un quart d'heure de discussion.

Selon la documentation Google Search Central, regrouper des sujets proches dans des répertoires aide Google à comprendre à quelle fréquence les URL d'un répertoire changent. L'arborescence donne donc au moteur une carte de vos thématiques et du rythme auquel chacune bouge. Elle range vos pages et elle explique vos priorités.

Côté exploration, la profondeur agit comme un filtre. Une page posée au quatrième niveau, avec un seul lien entrant depuis un menu déroulant, sera vue moins souvent qu'une page de rubrique liée depuis l'accueil. Rien de magique : le maillage interne suit l'arbre, et le budget d'exploration suit le maillage. C'est le mécanisme détaillé dans notre guide sur l'impact de l'architecture web sur la visibilité SEO.

Le silo thématique découle du même principe. Regrouper sous une rubrique unique toutes les pages qui traitent d'un sujet crée un ensemble cohérent, plus facile à interpréter qu'une dizaine de pages dispersées à des niveaux différents.

Côté conversion, l'effet est plus direct encore. Un visiteur qui ne trouve pas votre page tarifs ne négocie pas : il repart. Les libellés de rubriques comptent souvent plus que le graphisme, et un menu bien nommé rattrape un design moyen. L'inverse n'a jamais marché. Nos bonnes pratiques de navigation web reprennent ce point en détail.

Une réserve honnête : personne ne peut vous promettre un gain chiffré à l'avance sur ce seul levier. L'arborescence conditionne le plafond de vos résultats, elle ne les produit pas toute seule.

La méthode tient en sept étapes, dans cet ordre. L'erreur la plus fréquente consiste à sauter l'inventaire pour dessiner l'arbre tout de suite : on redessine alors le site existant avec ses défauts, en croyant repartir de zéro. Comptez une demi-journée pour un site vitrine et deux à trois jours pour un site de plus de cinquante pages.

Étape 1. Cadrer l'objectif et les parcours prioritaires. Une seule question : que doit faire le visiteur avant de partir ? Demander un devis, télécharger un document, créer un compte. Deux ou trois parcours suffisent, et ils dictent ce qui monte au premier niveau. Un brief de design web écrit fait gagner deux réunions à cette étape.

Étape 2. Inventorier l'existant. Listez chaque URL vivante avec son titre, son type, son mot-clé principal et son rôle. Si vous refondez un site, c'est l'étape qui décide de ce que vous gardez, fusionnez ou supprimez. Notre guide d'audit de site web décrit la collecte. Le modèle d'inventaire ci-dessous se copie directement dans un tableur.

Étape 3. Recueillir la demande réelle. Trois sources gratuites suffisent pour commencer : les requêtes de la Search Console, le moteur de recherche interne du site, et la liste des questions que votre équipe commerciale entend au téléphone. Cette troisième source est la plus négligée et souvent la plus utile.

Étape 4. Regrouper par tri par cartes. Écrivez chaque page sur une carte, puis demandez à des utilisateurs de constituer des paquets et de les nommer. Vous découvrirez que vos catégories internes ne survivent pas au contact du réel.

Étape 5. Nommer les rubriques avec les mots du client. Solutions, Expertise, Univers : ces libellés ne veulent rien dire pour un visiteur pressé. Écrivez Services, Tarifs, Réalisations. Un libellé compris vaut mieux qu'un libellé élégant, et cette étape est celle où les désaccords internes remontent le plus.

Étape 6. Fixer la profondeur et les URL. L'arbre se traduit en chemins. Selon les recommandations d'URL de Google, il vaut mieux des mots lisibles que des identifiants numériques, et des traits d'union plutôt que des tirets bas pour séparer les mots. Une URL comme /services/portails-web/ se lit sans effort et reflète l'arbre.

Étape 7. Valider avant les maquettes. Un test d'arbre de trente minutes évite trois semaines de correction. La méthode complète est décrite plus bas.

Une remarque de terrain : les étapes 4 et 5 se font ensemble, jamais séparément. Regrouper sans nommer produit des paquets que personne ne sait annoncer dans un menu.

Trois niveaux, trois clics, sept rubriques : ces chiffres circulent depuis vingt ans et se transmettent comme des lois. Ils n'en sont pas. Ce sont des règles de pouce, souvent utiles, et il vaut mieux savoir laquelle repose sur quelque chose de solide avant de refuser une rubrique supplémentaire à un client en réunion.

Dans Flat vs. Deep Website Hierarchies, Kathryn Whitenton (Nielsen Norman Group, 2013) compare les deux extrêmes et conclut qu'aucune réponse universelle n'existe. Elle documente en revanche un cas parlant : un site hospitalier dont le menu affichait plus de 32 entrées noyait les visiteurs au lieu de les aider. La recommandation qui en sort est méthodologique, pas numérique : observez vos propres utilisateurs plutôt que d'appliquer un seuil trouvé dans un article.

Retenez quand même trois repères et leur statut. Une profondeur de 3 niveaux sous l'accueil est une convention de métier confortable, pas une contrainte technique. Un menu principal de 5 à 7 entrées vient de la règle des 7 plus ou moins 2, que Nielsen Norman Group ne reprend plus comme seuil fixe. Au-delà de 30 entrées visibles d'un coup, le cas documenté en 2013 montre que le visiteur décroche.

Un avis, à contre-courant de ce qu'on lit ailleurs : la profondeur est rarement le vrai problème. Un quatrième niveau bien annoncé se parcourt sans peine, alors qu'un deuxième niveau appelé Univers arrête tout le monde.

Voici trois arbres complets, écrits en listes indentées plutôt qu'en images, pour que vous puissiez les copier dans un tableur ou un document en dix secondes. Ils correspondent aux trois familles de projets que nous voyons le plus souvent. Adaptez les libellés à votre secteur, gardez la logique de niveaux.

Site vitrine, 12 pages. L'arbre le plus courant pour une PME ou un cabinet.

• Accueil
• Services
  • Landing pages
  • Site corporate
  • Portail web
• Réalisations
  • Étude de cas 1
  • Étude de cas 2
• À propos
  • Équipe
  • Recrutement
• Blog
• Contact

Site e-commerce. La profondeur augmente d'un cran parce que le catalogue impose une couche de sous-catégories.

• Accueil
• Boutique
  • Catégorie
    • Sous-catégorie
      • Fiche produit
  • Nouveautés
  • Promotions
• Guides d'achat
• Service client
  • Livraison et retours
  • Questions fréquentes
• Mon compte
• Contact

Portail client. Deux arbres cohabitent : la partie publique qui doit convertir, et la partie connectée qui doit servir.

• Partie publique
  • Fonctionnalités
  • Tarifs
  • Connexion
• Tableau de bord (après connexion)
  • Mes projets
  • Documents
  • Facturation
  • Messages
• Administration
  • Utilisateurs et rôles
  • Journal d'activité
• Aide

Le nombre de pages n'est pas un détail de confort : il conditionne le budget. Sur notre page tarifs, une landing page couvre 1 à 5 pages et démarre à €1 500, un site corporate couvre 10 à 30 pages et démarre à €5 000, un portail web part de 50 pages et démarre à €9 000. Une arborescence qui passe de 12 à 40 pages en cours de projet change donc de catégorie de prix, pas seulement de calendrier.

Trois modèles se partagent la quasi-totalité des sites professionnels. Le modèle hiérarchique range les pages par niveaux successifs. Le modèle plat pose tout au premier niveau. Le modèle hub-and-spoke organise un ensemble de pages autour d'un pivot central qui les relie toutes. Le choix se fait sur le volume de contenu prévu à deux ans, pas sur le volume actuel.

En pratique, le hiérarchique convient aux sites d'entreprise avec 2 à 3 niveaux, le plat aux sites de moins de 20 pages, le hub-and-spoke aux blogs et centres de ressources. Chaque modèle a son mode de défaillance : le hiérarchique enterre des pages au niveau 4, le plat fait déborder le menu, le hub-and-spoke laisse le pivot orphelin quand le maillage est bâclé.

Un outil d'arborescence sert à trois choses : dessiner l'arbre, inventorier l'existant, tester le résultat. Aucun outil ne fait bien les trois, et c'est pour cela que la question du choix se pose moins qu'on ne le croit. La répartition qui fonctionne se fait donc par usage, et gardez à l'esprit que les offres gratuites de ces produits évoluent souvent.

Pour dessiner, GlooMaps et Octopus.do produisent un arbre exportable en quelques minutes et conviennent aux sites de moins de cinquante pages. Slickplan va plus loin sur la collaboration et l'export. FigJam, Miro et Whimsical ne sont pas spécialisés mais font parfaitement l'affaire quand l'atelier réunit plusieurs personnes, et vous les avez sans doute déjà.

Pour inventorier, Screaming Frog explore un site existant et sort la liste complète des URL avec leurs titres et leur profondeur. La Search Console de Google donne gratuitement les pages indexées et les requêtes qui les amènent. Ces deux sources alimentent le modèle d'inventaire donné plus haut.

Pour tester, Treejack (Optimal Workshop) et Maze permettent de faire passer un test d'arbre à distance, sans maquette.

Une carte heuristique, ou mind map, dépanne au démarrage quand les idées sont encore floues. Elle ne remplace pas l'arbre : une carte heuristique autorise les liens transversaux, une arborescence exige une place unique pour chaque page.

Honnêtement ? Un tableau blanc et un tableur battent n'importe quel outil payant si le travail de nommage est fait sérieusement. Un arbre impeccable produit dans un outil professionnel peut échouer au premier test utilisateur, tout simplement parce que personne n'a discuté des libellés.

Deux méthodes suffisent, et elles se complètent. Le tri par cartes sert à construire l'arbre : vous donnez des cartes, les participants font des paquets. Le test d'arbre sert à le valider : vous donnez l'arbre nu, sans design ni moteur de recherche, et vous demandez aux participants de trouver une information précise. La première ouvre, la seconde vérifie.

Selon Nielsen Norman Group (Samhita Tankala et Katie Sherwin, 2024), un tri de cartes qualitatif demande au moins 15 participants pour comprendre le raisonnement derrière les regroupements, et 30 à 50 participants si vous voulez des résultats généralisables à une population plus large. En dessous de 15, vous récoltez des anecdotes.

Le test d'arbre se prépare en une heure. Écrivez 8 à 10 tâches formulées comme un besoin réel, pas comme un chemin. Demandez où trouver le délai de livraison, jamais cliquez sur Service client puis Livraison. Puis mesurez trois choses par tâche : le taux de réussite, le temps pour arriver au bon endroit, et le nombre d'allers-retours entre rubriques avant la bonne réponse.

Fixez-vous 80 % de réussite par tâche comme objectif, et considérez qu'en dessous de 70 % la rubrique concernée doit être renommée ou déplacée. Ces deux seuils sont des conventions de travail, commodes pour trancher un débat en réunion : aucun organisme ne les publie comme norme, et le chiffre acceptable dépend de la difficulté des tâches que vous avez écrites.

Le détail qui change tout : ce sont les tâches ratées qui apprennent quelque chose, pas les réussies. Regardez systématiquement la rubrique choisie par erreur, elle vous donne le libellé que vos visiteurs attendaient.

Changer d'arborescence sur un site qui reçoit déjà du trafic est l'opération qui fait le plus de dégâts quand elle est improvisée, et elle se passe très bien quand elle est préparée. Le principe tient en une phrase : chaque URL qui disparaît doit pointer vers la page la plus proche de ce qu'elle contenait, avec une redirection permanente 301. Pas vers l'accueil.

Le document central est un tableau de correspondance : ancienne URL, nouvelle URL, type de redirection, page vérifiée après mise en ligne. Il se construit à partir de l'inventaire de l'étape 2, il se relit à deux, et il se teste sur un échantillon avant le jour J.

Rediriger massivement vers la page d'accueil est la faute la plus commune. C'est rapide, ça évite les erreurs 404, et ça détruit la pertinence de chaque redirection. Ce type de renvoi massif est généralement interprété comme une page introuvable déguisée, un soft 404.

Gardez aussi ce qui fonctionne. Si trois pages apportent la moitié de votre trafic organique, leur URL ne bouge pas, même si le nouvel arbre le suggère. Une arborescence propre n'a jamais valu une position perdue. Notre guide de préparation à une refonte détaille la séquence complète.

Prévoyez enfin une baisse temporaire. Le temps que les moteurs réexplorent et réattribuent les signaux, quelques semaines d'instabilité sont normales sur un changement d'arborescence de grande ampleur.

Si vous ne deviez retenir qu'une chose de ce guide : écrivez votre arbre en texte, faites-le tester par dix personnes qui ne travaillent pas chez vous, et ne commencez le design de votre site qu'une fois ce test passé.