Comment concevoir l’arborescence de votre site web ?

L’arborescence d’un site web est le plan hiérarchique de ses pages : la page d’accueil en haut, puis les rubriques principales, les sous-rubriques et les pages de détail, reliées comme les branches d’un arbre. Pour la concevoir, on part des objectifs du site et des besoins des visiteurs, on inventorie les contenus, on les regroupe en rubriques compréhensibles, puis on teste le plan avec de vrais utilisateurs avant de passer aux maquettes.

C’est la première étape de la création ou de la refonte d’un site, et l’une des plus structurantes : sans une organisation claire, un site, aussi beau soit-il, n’atteint pas ses objectifs. On détaille ici à quoi sert l’arborescence, la méthode en sept étapes, la question de la profondeur, son lien avec le référencement naturel, deux exemples concrets et les erreurs courantes.

• Qu’est-ce que l’arborescence d’un site web ?
• Pourquoi l’arborescence est-elle si importante ?
• À quel moment la concevoir dans un projet ?
• Comment créer l’arborescence de votre site en 7 étapes ?
• Combien de niveaux prévoir ?
• Quel est le lien entre arborescence et référencement ?
• À quoi ressemble une bonne arborescence ?
• Comment traduire l’arborescence en navigation ?
• Quelles erreurs éviter ?
• Questions fréquentes
• Sources

Qu’est-ce que l’arborescence d’un site web ?

L’arborescence prend généralement la forme d’un schéma : un rectangle par page, des traits pour relier chaque page à sa page parente. Elle montre deux choses : quelles pages existent, et comment elles sont rangées. On parle de niveau 1 pour les rubriques accessibles directement depuis l’accueil, de niveau 2 pour leurs sous-rubriques, et ainsi de suite.

Il ne faut pas la confondre avec deux notions voisines :

• Le menu est une traduction partielle de l’arborescence à l’écran. Toutes les pages n’y figurent pas.
• Le sitemap XML est un fichier technique qui liste les URL du site pour les moteurs de recherche. Il ne décrit pas la hiérarchie.

L’arborescence relève d’une discipline plus large, l’architecture de l’information, que nous détaillons dans notre article sur l’architecture de l’information en web design.

Pourquoi l’arborescence est-elle si importante ?

Concevoir une arborescence oblige à classer et à faire des choix. C’est un travail qui prend du temps, car les contenus d’un site sont presque toujours plus hétérogènes qu’on ne le pense au départ. Mais c’est ce travail qui conditionne trois résultats :

• Les visiteurs trouvent ce qu’ils cherchent. Un visiteur qui ne comprend pas où cliquer quitte le site. Une arborescence claire réduit l’effort nécessaire pour atteindre une information.
• Les moteurs de recherche comprennent le site. Ils découvrent les pages en suivant les liens et déduisent de l’organisation quelles pages sont importantes et de quoi elles parlent.
• Le projet reste maîtrisé. L’arborescence validée donne à toute l’équipe une vision commune : liste des pages à concevoir, contenus à rédiger, gabarits à prévoir. Elle sert de base au devis et au planning.

À quel moment la concevoir dans un projet ?

L’arborescence arrive juste après la définition des objectifs et des cibles, et avant tout travail graphique. L’enchaînement classique est le suivant :

1. objectifs du site et profils de visiteurs ;
2. inventaire des contenus et arborescence ;
3. zoning : on découpe chaque type de page en grandes zones (un bloc pour le logo, un pour le menu principal, un pour le contenu, etc.) ;
4. wireframes : on place les principaux textes et composants dans ces zones ;
5. maquettes graphiques, puis développement.

Pour une refonte, on part de l’existant : on analyse les pages qui reçoivent du trafic et des liens, on repère ce que les visiteurs cherchent sans le trouver, et on corrige l’organisation en préservant ce qui fonctionne. C’est l’une des premières étapes de nos projets de refonte de site internet, notamment pour éviter de perdre les positions acquises dans Google.

Comment créer l’arborescence de votre site en 7 étapes ?

1. Définir les objectifs et les profils de visiteurs

Que doit produire le site : des demandes de devis, des ventes, des candidatures, des inscriptions ? Définissez ensuite deux ou trois profils de visiteurs types. Pour chacun, notez par où il arrive (recherche Google, publicité, réseaux sociaux, lien direct), ce qu’il cherche et la page où il doit aboutir. Ces parcours rendent l’arborescence réaliste : un visiteur arrivé par une publicité sur un produit doit pouvoir atteindre la page de ce produit, puis le formulaire de contact, sans détour.

2. Inventorier les contenus

Dressez la liste de toutes les pages que le site contient ou contiendra, dans un tableur. Vérifiez que chaque ligne correspond bien à une page. Attribuez une référence à chacune (1, 1.1, 1.2, 2…) : elle servira à construire le schéma et à suivre l’avancement du projet.

3. Regrouper les contenus comme vos visiteurs les regrouperaient

Le piège classique est de calquer l’arborescence sur l’organigramme de l’entreprise. Vos visiteurs, eux, raisonnent selon leurs besoins. Pour connaître leur logique, la méthode de référence est le tri de cartes (card sorting) : des participants rangent des cartes portant le nom des contenus dans les groupes qui leur semblent naturels. Le Nielsen Norman Group recommande au moins 15 participants pour une étude qualitative.

4. Organiser la hiérarchie parent-enfant

À l’aide de listes à puces imbriquées, organisez les pages en relations parent-enfant. Le site d’un magasin de vêtements aura par exemple des pages de premier niveau Homme, Femme et Enfant. Chacune contient des catégories (chemises, pantalons, shorts, manteaux), qui mènent aux fiches produits.

5. Dessiner le schéma

Dessinez un rectangle pour chaque rubrique de premier niveau avec un titre court. Placez en dessous, côte à côte, les rectangles des sous-rubriques pour montrer qu’elles sont au même niveau, puis reliez-les à leur parent par des traits, comme un organigramme. Continuez jusqu’au niveau de détail nécessaire, puis faites de même pour chaque rubrique. Un tableur, une feuille de papier ou un outil de schéma en ligne suffisent.

6. Nommer les rubriques et prévoir les URL

Utilisez les mots de vos visiteurs, pas votre jargon interne : « Nos tarifs » plutôt que « Offres commerciales ». Les noms de rubriques inspirent aussi la structure des adresses : Google recommande d’utiliser des mots utiles aux visiteurs dans les URL et de regrouper les sujets proches dans des répertoires.

7. Tester l’arborescence avant de la figer

Le test d’arborescence (tree testing) consiste à présenter la hiérarchie seule, sans design, et à demander à des participants où ils chercheraient telle information. Si beaucoup se trompent de branche, la structure ou les libellés sont à revoir. Là où le tri de cartes aide à imaginer des regroupements, le test d’arborescence sert à évaluer une structure déjà proposée. Comme le résume le Nielsen Norman Group : si vous ne vérifiez pas, vous devinez. Après la mise en ligne, les statistiques de visite et les recherches internes prendront le relais pour améliorer le plan progressivement.

Combien de niveaux prévoir ?

On entend souvent qu’une page doit être accessible en trois clics maximum. Cette « règle des trois clics » n’a jamais été confirmée par une étude publiée, rappelle le Nielsen Norman Group. Ce qui compte n’est pas le nombre de clics, mais le fait qu’à chaque étape le visiteur sache clairement où cliquer.

Il existe tout de même un équilibre à trouver :

• Trop profond (beaucoup de niveaux, peu de choix à chaque niveau) : les pages importantes sont enfouies, les visiteurs abandonnent, et ces pages reçoivent peu de liens internes.
• Trop plat (tout au premier niveau) : des menus interminables où plus rien ne ressort.

Pour la plupart des sites vitrines et des petits sites e-commerce, deux ou trois niveaux sous l’accueil suffisent. Les sites plus vastes compensent la profondeur par un moteur de recherche interne, des filtres et des liens transversaux.

Quel est le lien entre arborescence et référencement ?

Selon Google, la grande majorité des nouvelles pages qu’il découvre chaque jour le sont en suivant des liens. L’arborescence, qui détermine les liens entre vos pages, a donc un effet direct sur la découverte et la compréhension de votre site. Quelques principes :

• Chaque page importante doit recevoir au moins un lien depuis une autre page du site : c’est une recommandation explicite de Google.
• Une page proche de l’accueil et souvent liée est plus facile à découvrir, pour les robots comme pour les visiteurs, qu’une page enfouie au quatrième niveau et liée d’un seul endroit.
• Regroupez les contenus d’un même thème. On parle d’organisation en silos lorsque chaque rubrique rassemble des pages du même champ sémantique, reliées entre elles par des liens dans le contenu. Cela aide les moteurs à comprendre votre spécialité sur chaque sujet.
• Tous les liens ne se valent pas. Un lien dans le menu principal ou dans le corps du texte est plus visible qu’un lien en pied de page. Soignez les textes de lien : Google recommande des ancres descriptives plutôt que « cliquez ici ». Notre article sur les liens internes détaille ce point.
• Ajoutez un fil d’Ariane. Il indique la position de la page dans la hiérarchie du site, aide le visiteur à remonter d’un niveau, et peut être balisé en données structurées (BreadcrumbList) pour s’afficher dans les résultats de Google.
• Déclarez un sitemap XML dans la Search Console : il complète les liens et aide Google à trouver toutes vos pages. Un fichier est limité à 50 000 URL ou 50 Mo non compressé ; au-delà, on le découpe. Voir notre article sur les sitemaps.

À quoi ressemble une bonne arborescence ?

Voici deux exemples simplifiés. Le premier pour le site vitrine d’une entreprise de services :

Accueil
├── Services
│   ├── Service A
│   ├── Service B
│   └── Service C
├── Réalisations
│   └── Étude de cas (une page par projet)
├── Tarifs
├── À propos
│   ├── L'équipe
│   └── Recrutement
├── Blog
│   └── Articles (classés par catégorie)
└── Contact

Le second pour une boutique de vêtements, reprenant l’exemple de la méthode :

Accueil
├── Femme
│   ├── Chemises
│   ├── Pantalons
│   └── Manteaux
├── Homme
│   ├── Chemises
│   ├── Pantalons
│   ├── Shorts
│   └── Manteaux
├── Enfant
│   └── ...
├── Guide des tailles
├── Livraison et retours
└── Contact

Dans les deux cas, les pages légales (mentions légales, conditions générales, politique de confidentialité) existent aussi mais restent en dehors de la navigation principale, généralement dans le pied de page.

Comment traduire l’arborescence en navigation ?

Une arborescence bien pensée permet de mettre en place une navigation efficace dans toutes les situations. Elle s’appuie en général sur plusieurs éléments complémentaires :

• Le menu principal, qui reprend les rubriques de premier niveau, avec éventuellement un sous-menu déroulant.
• Un menu secondaire, qui affiche les pages de la rubrique en cours ou des accès transversaux.
• Le moteur de recherche interne, indispensable dès que le site compte beaucoup de pages ou de produits.
• Les liens dans le contenu et les suggestions (articles liés, produits associés), qui créent des passerelles entre rubriques.
• Le fil d’Ariane, qui situe le visiteur dans la hiérarchie.
• Le pied de page, qui donne accès aux rubriques principales, aux pages clés et aux pages légales.

Pensez aussi au mobile : un menu principal qui tient sur un grand écran peut devenir une longue liste difficile à parcourir sur téléphone. C’est un argument de plus pour limiter le nombre de rubriques de premier niveau. Si vous préparez un nouveau site, nous construisons cette arborescence avec vous en amont de toute création de site internet.

Quelles erreurs éviter ?

• Copier l’organigramme interne au lieu de partir des besoins des visiteurs.
• Utiliser des libellés vagues ou internes (« Solutions », « Univers », « Expertises ») qui ne disent pas ce que contient la rubrique.
• Créer des rubriques quasi vides ou, à l’inverse, un fourre-tout du type « Divers ».
• Placer une même page à plusieurs endroits avec des URL différentes, ce qui crée du contenu dupliqué.
• Oublier les parcours d’entrée : beaucoup de visiteurs n’arrivent pas par l’accueil mais directement sur une page interne, depuis Google ou une publicité.
• Changer l’arborescence d’un site existant sans redirections : chaque ancienne URL doit rediriger vers sa nouvelle adresse, sous peine de perdre trafic et positions.
• Figer le plan : un site vit, l’arborescence doit être revue quand l’offre ou les contenus évoluent.

Questions fréquentes

Quelle différence entre arborescence et sitemap ?

L’arborescence est le plan hiérarchique du site, pensé pour l’organisation des contenus et la navigation. Le sitemap XML est un fichier technique qui liste les URL du site pour les moteurs de recherche, sans décrire la hiérarchie.

Avec quel outil faire une arborescence de site ?

Un tableur suffit pour l’inventaire et la hiérarchie. Pour le schéma, n’importe quel outil de diagramme ou de tableau blanc en ligne fait l’affaire, tout comme une feuille de papier au début. L’outil compte moins que la réflexion.

La règle des trois clics est-elle vraie ?

Non, elle n’a jamais été démontrée par une étude publiée. Les visiteurs acceptent plusieurs clics tant qu’ils savent à chaque étape qu’ils vont dans la bonne direction.

Faut-il refaire l’arborescence lors d’une refonte ?

Il faut au moins la réexaminer. Partez des données de l’ancien site (pages visitées, pages qui génèrent du trafic depuis Google, recherches internes) et prévoyez une redirection pour chaque URL qui change.

Combien de rubriques mettre dans le menu principal ?

Il n’y a pas de nombre magique. Visez le plus petit nombre de rubriques qui couvre clairement vos contenus, avec des libellés distincts, et vérifiez que le menu reste lisible sur mobile.

Sources

• Nielsen Norman Group : The 3-Click Rule for Navigation Is False (Page Laubheimer, 2019)
• Nielsen Norman Group : Card Sorting, définition et recommandations
• Nielsen Norman Group : Tree Testing
• Google Search Central : guide de démarrage SEO (hiérarchie, URL, liens)
• Google Search Central : bonnes pratiques pour les liens
• Google Search Central : données structurées de fil d’Ariane (BreadcrumbList)
• Google Search Central : créer et envoyer un sitemap