Comment créer l'arborescence d'un site web ?

Lors de la création ou de la refonte d'un site internet, il est essentiel de structurer le contenu. Pour ce faire, il faut commencer par élaborer l'architecture du site, nommée aussi arborescence. C'est ce qui va permettre d'organiser l'ensemble des pages web pour construire un parcours utilisateur efficace, fluide et ergonomique. Cette hiérarchie des contenus permettra d'accroître l'expérience utilisateur et de booster le référencement naturel. Comment créer l'arborescence d'un site web ? Zoom sur les étapes et les logiciels de création.

Pourquoi l'arborescence du site web est-elle importante ?

Guider les intervenants au projet

L'arborescence du site web est matérialisée sous forme de diagramme de type carte mentale. Ce support de travail permet de visualiser le menu de navigation et l'emplacement des liens internes. Chef de projet, responsable SEO et développeur : plusieurs personnes collaborent dans le cadre de la création ou de la refonte d'un site web. Grâce à l'arborescence, tous les intervenants sont d'accord et avancent dans la même direction.

Tracer un parcours utilisateur optimal

L'arborescence du site web est déterminante du parcours utilisateur. Proposer un menu de navigation logique et des liens internes pertinents guide naturellement les visiteurs vers les informations souhaitées. Les visiteurs gagnent du temps, et trouvent facilement les contenus qu'ils recherchent. En conséquence :

• L'expérience utilisateur (UX) est bonne.
• Le taux de rebond est faible.
• Le temps de visite est élevé.
• Le taux de conversion est optimisé.

Améliorer le référencement naturel du site

Google tient compte des statistiques d'utilisation des sites web pour les classer dans les résultats de recherche : une bonne UX contribue au référencement naturel (SEO) du site.

D'un point de vue plus technique :

• Une bonne arborescence facilite le travail du robot d'exploration Googlebot. Les pages du site web sont mieux indexées : Google les propose plus volontiers dans les résultats de recherche.
• Créer « une structure de site logique qui facilite la navigation » est une pratique recommandée par Google pour obtenir des sitelinks. Ces liens complémentaires augmentent la visibilité du site web.

À noter qu'à des fins de SEO, Google conseille, au-delà d'une bonne arborescence, de créer et envoyer un sitemap si le site est très volumineux, récent ou riche en contenus images et vidéo.

GlooMaps

GlooMaps est un outil en ligne simple et gratuit. Il permet de créer en quelques clics l'arborescence d'un site web. Il est possible d'intégrer des couleurs aux différents niveaux pour un rendu très visuel. Des fonctionnalités de partage via lien et d'exportation aux formats PDF, PNG ou XML sont disponibles.

MindMeister

MindMeister est un outil efficace de cartographie mentale. Il aide à mettre à plat et organiser toutes les idées. Il est facile à prendre en main et permet une approche très complète d'organisation. Il est également collaboratif et s'exporte en de nombreux formats.

Il est disponible en version gratuite mais limitée à 3 cartes mentales. Au-delà, il faut compter un abonnement entre 5,99 € et 15,99 € par mois, selon le besoin.

Cacoo

Cacoo est un outil ergonomique de dessin en ligne, qui permet la création de plans de site. Il est simple d'utilisation et permet d'incorporer plusieurs éléments dans l'arborescence par glisser-déplacer. Il est également collaboratif.

Il existe en version gratuite ou en version payante à partir de 6 $ par utilisateur et par mois, selon le besoin.

FlowMapp

FlowMapp est un outil en ligne pour optimiser l'expérience utilisateur sur les sites web. Il permet de créer des sitemaps visuels et des flux d'utilisateurs, et d'identifier le comportement de navigation des internautes.

Il est disponible en version gratuite pour un projet jusqu'à 15 pages, d'une taille maximale de 100 MB. Sinon, FlowMapp propose 3 offres en fonction du nombre de projets et de l'espace de stockage. Les abonnements débutent à 6,75 $ par mois.

MindNode

Logiciel de brainstorming visuel, MindNode permet d'organiser les idées et de construire un plan de site. L'outil existe uniquement sous forme d'application iOS, à télécharger dans l'App Store ou le Mac App Store. Il est disponible en version gratuite limitée, et propose un abonnement à partir de 2,99 $ par mois pour accéder à des fonctionnalités enrichies.

Dyno Mapper

Dyno Mapper est un outil spécialisé dans l'élaboration de plans visuels de site, très prisé par les webmasters. Il permet d'établir facilement des sitemaps interactifs, à partir d'URL ou de fichiers XML. Les collaborateurs peuvent ajouter divers éléments comme des commentaires, des catégories ou des données analytiques.

Il possède différents styles de structures de site entièrement personnalisables. De plus, il intègre des fonctionnalités telles que le suivi de mots-clés ou l'audit de contenu.

Dyno Mapper se décline en 3 offres à partir de 49 $ par mois.

Slickplan

Slickplan est un logiciel en ligne pour concevoir des arborescences de site en quelques minutes. Intuitive, son interface s'utilise en glisser-déposer. Collaboratif, cet outil propose la personnalisation de chaque élément pour améliorer au mieux la structure et la navigation utilisateur.

Après une version d'essai gratuite de 14 jours, il est disponible en 4 abonnements à partir de 10,79 $ par mois.

Balsamiq

Balsamiq est une référence dans le secteur des logiciels de wireframe. Il permet de définir une structure de site de manière très complète. C'est depuis longtemps le logiciel favori des chefs de projet web. Il est payant, compter un abonnement mensuel à partir de 9 $ par mois.

Comment créer une arborescence de site web ?

Rechercher des mots-clés pertinents

Afin que chaque page corresponde à une requête, il est essentiel d'établir une liste des mots-clés sur lesquels se positionner. Pour cela, il est important de rechercher les mots-clés les plus pertinents en fonction du contenu proposé.

Des outils comme SEMrush, Ubersuggest ou encore l'outil de planification Google Ads peut aider à les déterminer. Le but est de choisir les bons mots-clés adaptés à chaque page, catégorie et sous-catégorie afin d'apparaître de manière efficace dans les résultats de recherche.

Organiser et structurer le contenu

Lors d'une refonte d'un site web, il est important de lister tous les contenus existants et de les organiser par catégorie. Cela permettra d'avoir une vision globale et claire. La démarche est également similaire pour la conception d'un site web.

De manière générale, il est conseillé de ne pas construire une structure trop profonde pour éviter que l'internaute ne se perde.

Le niveau 1 correspond à la page d'accueil, puis les autres niveaux aux différentes catégories et sous-catégories. Les contenus les plus importants doivent être accessibles le plus rapidement possible, en un clic. C'est pourquoi il est important qu'ils se trouvent sur la page d'accueil ou header.

Pour une expérience utilisateur réussie, il est recommandé de ne pas proposer un contenu à plus de 3 clics. Plus une page sera profonde, moins elle sera visitée. D'où l'importance du maillage interne ou d'une structure en silo, qui permet de faciliter la navigation.

Par ailleurs, cette organisation minutieuse permettra de construire une structure d'URL, basée sur la hiérarchie du site internet. En un coup d'œil, le visiteur doit être capable de savoir à quel niveau de l'arborescence il se trouve.

Analyser la concurrence

Faire un rapide tour de la concurrence permet de s'assurer de pas avoir oublié une catégorie. Mais aussi de regarder comment les sites concurrents sont organisés. Ils peuvent être une réelle source d'inspiration ou au contraire mettre le doigt sur les erreurs à éviter.

Schématiser le schema de l'arborescence

Une fois le contenu hiérarchisé, il reste à le schématiser. Pour cela, les logiciels sont utiles pour créer l'arborescence du site web. Mais il est tout à fait possible de l'établir à main levée sur papier ou sur PowerPoint. L'important est d'avoir une représentation visuelle claire du plan du site.

Vérifier l'arborescence aux réalités des parcours de navigation et du SEO

L'étape finale pour construire une bonne arborescence est la vérification. Cela permet d'optimiser au mieux la structure et de mettre en évidence les améliorations à apporter. Pour cela, il est nécessaire d'effectuer différents scénarios en fonction de plusieurs critères.

Il faut tenir compte du profil de l'internaute (son âge, sa catégorie socio-professionnelle, son niveau de maîtrise du web), de son objectif (son intention de recherche), du canal d'acquisition (comment est-il arrivé sur le site internet ?), de la page d'atterrissage (sur quelle page va-t-il arriver ?).

L'objectif est de s'assurer du parcours de l'internaute, mais aussi de celui des robots. Il faut donc veiller à la hiérarchisation des catégories, ainsi qu'à leur cohérence.

Comment modifier l'arborescence de son site web ?

1 - Poser le contexte

L'arborescence d'un site web est évolutive. Il est nécessaire de la modifier dans trois contextes :

• Le site est mal référencé. L'arborescence n'explique pas à elle seule la faiblesse du référencement, mais c'est une piste à explorer. C'est souvent en outre le point de départ d'une stratégie de SEO : commencer par revoir l'arborescence du site web permet d'améliorer la forme du contenu, avant d'améliorer le fond du contenu.
• L'expérience utilisateur est médiocre. Concrètement : les données de web analytics sont mauvaises, ce qui permet de déduire que la navigation n'est pas facile. Ces données peuvent aussi suggérer que le choix des mots-clés n'est pas pertinent. Se positionner sur un mot-clé qui ne correspond pas au contenu de la page risque en effet d'entraîner un fort taux de rebond.
• La stratégie de positionnement change. En cas de développement d'un nouveau produit ou de création d'un blog, par exemple, modifier l'arborescence du site web est nécessaire. Il faut mettre en valeur les nouvelles pages, ou a minima s'assurer qu'elles sont correctement maillées. À l'inverse, la modification de l'arborescence est requise pour supprimer un contenu. C'est le cas par exemple quand une entreprise cesse de proposer une certaine catégorie de services.

2 - Cerner les objectifs

Selon le contexte, les objectifs diffèrent. Cerner le ou les objectifs est essentiel, car cela guide toutes les étapes suivantes du travail de modification d'arborescence. Illustrations.

• Contexte SEO : l'objectif consiste à améliorer la lisibilité de l'architecture du site par les moteurs de recherche. Il faut alors entreprendre un travail de fond. Le squelette tout entier est reconstruit. Les différents onglets sont réorganisés et les liens internes sont mis à jour, pour se conformer à la logique de compréhension des robots d'exploration.
• Contexte UX : l'objectif consiste à améliorer certaines données de web analytics, dans un objectif final de conversion. S'il faut augmenter le nombre de visites d'une page, par exemple, le travail de modification de l'arborescence est centré sur cette page. Renforcer son maillage interne ou la rendre accessible en un seul clic sont alors de bonnes pratiques à mettre en œuvre.
• Contexte stratégique : l'objectif consiste à mettre à jour l'arborescence du site web conformément à la nouvelle stratégie. Pour mettre en valeur un contenu, par exemple, il est judicieux d'ajouter des boutons de call-to-action (CTA) sur des pages mères ; s'il faut supprimer du contenu obsolète, il est important de vérifier qu'aucun lien interne ne pointe plus vers la page.

3 - Isoler les parties du squelette à modifier

La modification de l'arborescence d'un site web est censée améliorer son référencement naturel. Mais le temps que les robots d'exploration indexent les contenus nouvellement structurés, le SEO risque d'être impacté à la baisse. Pour limiter ce risque, il est important de faire les modifications strictement nécessaires. Ainsi, les robots « reconnaissent » plus facilement le site.

Les visiteurs habitués au site web peuvent également mettre du temps à s'approprier la nouvelle navigation. Si une carte de chaleur indique que les internautes cliquent majoritairement sur une commande, par exemple, modifier l'emplacement ou l'aspect de cette commande est risqué en matière d'UX.

Pour ces raisons, il faut isoler les parties du squelette à modifier, et travailler exclusivement sur ces contenus. Cette bonne pratique en outre facilite le travail du développeur, et limite le risque d'erreurs.

Concrètement : à cette étape, il s'agit d'établir la liste des modifications requises eu égard aux objectifs. Cette liste constitue le support auquel se référer par la suite.

4 - Déplacer, fractionner, fusionner, ajouter, supprimer

Modifier l'arborescence d'un site web, techniquement, nécessite d'effectuer une ou plusieurs des actions suivantes.

• Déplacer une page. Si une sous-catégorie de produits n'a visiblement pas sa place dans la catégorie initiale, par exemple, il faut la déplacer au niveau du menu de navigation, dans un objectif de SEO ou d'UX.
• Fractionner une page. Si les internautes ne font pas défiler la page jusqu'en bas, par exemple, il est pertinent de la fractionner en deux pages distinctes pour assurer la visibilité de tout le contenu. Il faut pour cela créer un lien interne, un CTA ou un nouvel onglet de navigation.
• Fusionner des pages. Si une page est peu consultée, par exemple, son contenu peut être migré vers une autre page. Il faut alors supprimer l'onglet ou le lien de redirection qui permettait d'accéder à la page fusionnée.
• Ajouter une page. Cette action est nécessaire pour présenter un nouveau produit ou service, par exemple.
• Supprimer une page. Cette action est nécessaire pour rendre inaccessible du contenu obsolète.

5 - Vérifier la nouvelle arborescence

Plusieurs vérifications doivent être effectuées. Dans un premier temps, il est essentiel de s'assurer qu'aucun lien interne redirige vers un contenu désormais inexistant. Dans un second temps, il est opportun de simuler le nouveau parcours utilisateur, pour vérifier que l'UX est bonne et conforme aux objectifs.

Si besoin, il faut penser à envoyer le nouveau sitemap à Google, à des fins d'indexation des pages nouvellement organisées.

Le guide pour comprendre les langages HTML et CSS.

Découvrez comment utiliser les langages HTML et CSS pour gérer votre site web efficacement.

• Balises HTML à connaître
• Mettre à jour un fichier CSS
• Les écueils à éviter
• Ressources pédagogiques

Télécharger En savoir plus Télécharger

Télécharger

Tous les champs sont obligatoires.

Merci d'avoir soumis le formulaire

Cliquez sur le lien pour accéder au contenu en tout temps

Télécharger

Exemples d'arborescence de site web

Arborescence d'un site de e-commerce

Partant du principe que l'internaute atterrit sur la page d'accueil du site de e-commerce, l'arborescence peut adopter la structure basique suivante.

Page d'accueil :

• Un menu en-tête s'affiche horizontalement. Chaque onglet principal correspond à une catégorie de produits. Des sous-catégories de produits apparaissent au survol des onglets principaux. Exemple : les « robes » et les « jeans » apparaissent sous la catégorie « vêtements femme », les « sacs » et les « ceintures » apparaissent sous la catégorie « accessoires ».
• En haut à droit de la page, un bouton permet d'accéder en un clic à la page du compte client.
• Dans la section supérieure de la page d'accueil, un bandeau défilant redirige vers les pages produits les plus consultées. Exemple : l'utilisateur peut cliquer sur une image pour accéder immédiatement aux « robes ».
• Dans le footer apparaissent des liens de redirection vers les pages qui contiennent les informations légales, le formulaire de contact et la FAQ.

Page catégorie :

• Un sous-menu horizontal, en-dessous du menu en-tête, présente les sous-catégories. Sur la page « vêtements femme », par exemple, la sous-catégorie « robes » est désormais visible immédiatement. L'internaute filtre ainsi facilement sa recherche.
• La page peut présenter la totalité des produits, toutes sous-catégories confondues, sous forme d'images. Chaque image redirige vers la fiche produit correspondante.
• Chaque image peut avoir un bouton d'achat rapide, qui redirige immédiatement vers la page de paiement en ligne sans passer par la page produit.

Page produit :

• La page présente toutes les caractéristiques du produit, ainsi que des photos.
• Un bouton d'ajout au panier redirige vers la page de paiement en ligne.

Arborescence d'un blog

Un blog contient a minima les pages suivantes :

• Une page d'accueil.
• Une page par catégorie d'articles.
• Une page par article.
• Une page d'informations légales.

Le travail d'arborescence porte majoritairement sur le maillage interne. Les articles en effet doivent être pertinemment liés les uns aux autres, pour permettre aux internautes d'enrichir leur niveau d'informations sur le sujet du blog. L'arborescence du blog, en outre, doit être mise à jour au gré des publications.

D'un point de vue stratégique, l'éditeur du blog peut avoir deux objectifs majeurs : obtenir des contacts, et vendre des produits ou services. À cet effet, un formulaire d'inscription à la newsletter et un lien vers le site marchand doivent être ajoutés dans l'arborescence. Le formulaire peut apparaître dans le footer, par exemple, pour être accessible où que l'internaute se trouve dans le blog. Le lien vers le site marchand peut être ajouté dans le contenu des articles pertinents, sous forme de CTA.

Arborescence d'une entreprise de services

L'entreprise de services, qui ne vend pas en ligne, doit inspirer confiance et convaincre de sa performance, pour inciter les visiteurs à la contacter. L'arborescence de son site web peut être simplement structurée ainsi :

• Le menu de navigation horizontal de la page d'accueil présente un onglet « Services », un onglet « L'entreprise », un onglet « Nous contacter ».
• Dans le contenu de la page d'accueil, un bouton redirige vers le blog pour démontrer l'expertise de l'entreprise.
• Sur toutes les pages du site, un bouton redirige vers le formulaire de contact pour renforcer la visibilité de la page de contact.

Pour aller plus loin, découvrez comment évaluer votre site web en utilisant l'outil Website Grader ; ou découvrez les modèles de site web gratuits de HubSpot.