L’arborescence d’un site web permet d’avoir une vision globale du site et des différents chemins de navigation, avant de préparer la refonte du site. Réaliser le plan de son propre site Web est souvent une chose très difficile à faire. Il n’est jamais facile d’organiser des contenus, qui sont souvent plus hétérogènes que ce qu’on avait imaginé au départ. Par-dessus tout, concevoir une arborescence signifie classer, faire des choix, et cela peut prendre du temps. C’est un exercice difficile, mais tellement important. Sans une navigation bien pensée, un site Web, aussi joli soit-il, a peu de chances d’atteindre ses objectifs. Cet article doit vous donner toutes les clés pour comprendre les enjeux de créer l’arborescence de votre site Internet.

L’arborescence d’un site, une étape fondamentale dans la création de votre site Web

De l’arborescence au storyboard

L’arborescence d’un site se présente généralement sous la forme d’un diagramme qui organise les pages en sections et définit les différents niveaux de navigation. Il s’agit généralement de la première étape de la conception d’un site Web. Une fois l’arborescence du site validée, l’ensemble de l’équipe reçoit une vue d’ensemble du site. L’étape suivante consiste à créer les zonages des pages, c’est-à-dire découper les pages principales en zones. Par exemple, un rectangle horizontal pour le logo et le menu principal, un rectangle vertical à gauche pour le menu secondaire, etc. Ensuite, on passe des zonages aux wireframes où l’on ajoute les principaux textes et composants graphiques. Puis, enfin, des wireframes aux maquettes graphiques du site.

Faire attention à l’arborescence pour guider au mieux vos visiteurs

C’est bien sûr le premier défi. Il est d’usage de dire qu’une page accessible en 3 clics est inutile. Organiser une grande quantité d’informations est souvent très difficile. Il n’y a pas de recettes miraculeuses ! Vous devez mettre en place un premier plan de navigation, observer ce qu’il se passe et l‘améliorer progressivement. Une navigation optimale peut se baser sur plusieurs choses :

Un menu de navigation principal, éventuellement avec un menu secondaire qui apparaît dans l’aperçu du menu principal.
Menu de navigation secondaire, il peut s’agir du menu fils de l’élément sélectionné dans le menu principal, mais cela peut aussi être un menu complètement différent.
Moteur de recherche interne.
Barre latérale, où vous pouvez promouvoir la navigation via des suggestions de produits ou d’articles.
Pied de page, avec accès aux principales catégories du site Web ou aux pages clés.

Si votre arborescence est bien pensée, vous pourriez mettre en place une navigation efficace pour toutes les situations. Concevoir une arborescence, ce n’est pas seulement classer le contenu en catégories et sous-catégories, c’est anticiper les processus. Si un visiteur accède à la page XY via un canal d’acquisition payant, et qu’il est intéressé par le produit ABC, aura-t-il un accès facile à la page cible ? Il est difficile d’anticiper tous les processus. Prendre trois profils de visiteurs, chacun arrivant via un canal différent, avec des besoins différents sur une page de destination différente, peut être très utile pour affiner sa structure arborescente et lui donner vie.

Faire attention à son arborescence afin d’améliorer son indexation naturelle

La structure arborescente de votre site Web aura un impact significatif sur son indexation naturelle, mais aussi sur la hiérarchie des pages de votre site Web. Les moteurs de recherche analysent les liens entre les pages de votre site pour comprendre sa structure générale et déterminer quelles sont les pages clés. Plus une page est « profonde », moins elle sera prise en compte.

Concrètement, une catégorie de 3ème ou 4ème niveau sera référencée, mais les moteurs de recherche lui accorderont peu d’importance par rapport à une catégorie de premier ou de second niveau. Des techniques existent, comme l’utilisation d’une page supplémentaire, mais il est généralement recommandé d’avoir trois niveaux hiérarchiques maximum.

La profondeur des pages est loin d’être le seul défi SEO à inclure dans vos réflexions sur l’arborescence du site. Le plus important peut être d’organiser le contenu de son site Web afin de rapprocher au maximum les pages liées au même champ sémantique. Dans le jargon SEO, le terme architecture en silo est utilisé lorsque toutes les pages d’une catégorie appartiennent au même champ sémantique.

Qu’est-ce qu’une arborescence en silo ?

Dans ce type d’architecture, les silos, c’est-à-dire les différents champs sémantiques du site Web, doivent être suffisamment indépendants. Il y a la possibilité d’utiliser des liens à l’intérieur du contenu de la page pour mettre en évidence certaines pages spécifiques du silo.

La stratégie du maillage interne est un sujet vaste et fascinant. Pour que vous ayez des idées claires lorsque vous travaillez sur votre arborescence, voici trois règles essentielles :

Plus une page est élevée dans la hiérarchie de votre plan, meilleure sera son indexation,
De plus, plus une page recevra de liens d’autres pages de votre site Web, meilleure sera son indexation,
Enfin, plus une page reçoit (et envoie) des liens de pages proches sur le plan sémantique, meilleure sera son indexation.

Une dernière chose : tous les liens internes ne sont pas égaux. Un lien du menu principal sera davantage mis en évidence qu’un lien dans le pied de page. Un lien à l’intérieur du contenu sera davantage en évidence qu’un lien dans la barre latérale.

Les étapes importantes pour créer l’arborescence de son site web

Étape 1

Créez une liste des pages Web que le site contient ou contiendra. Assurez-vous que chaque élément répertorié sera une page de votre site Web. En fonction de la taille de votre site, attribuez une référence à chaque page pour vous aider à créer l’arborescence et à suivre la progression à mesure que vous développez votre site.

Étape 2

À l’aide de listes à puces, organisez le plan pour afficher les relations parent-enfant entre chaque page de votre site Web. Par exemple, le site Web d’un magasin de vêtements peut avoir des pages parents de premier niveau qui mènent aux vêtements pour hommes, femmes et enfants. Chacune de ces pages contiendrait des types de vêtements tels que des chemises et des pantalons, menant éventuellement à des pages pour des produits individuels.

Étape 3

Commencez à créer votre diagramme en dessinant un rectangle pour chaque catégorie. Insérez un titre court pour chaque page de premier niveau dans votre diagramme.

Étape 4

Dessinez des rectangles pour chaque sous-catégorie sous l’une de vos catégories de niveau supérieur. Par exemple, dessinez quatre rectangles sous la catégorie supérieure des vêtements pour hommes. Cela pourra être chemises, pantalons, shorts et manteaux. Alignez ces rectangles côte à côte pour illustrer que les pages qu’ils représentent sont au même niveau dans la structure de votre site Web.

Étape 5

Connectez les pages de sous-catégories à la catégorie de niveau supérieur à laquelle elles appartiennent comme si vous créiez le diagramme hiérarchique d’une organisation. Par exemple, tracez des lignes à partir des pages chemises, pantalons, shorts et manteaux jusqu’à la catégorie parent des vêtements pour hommes.

Étape 6

Continuez à diviser votre diagramme en sous-catégories jusqu’à ce que l’arborescence contienne la quantité de détails dont vous avez besoin pour développer efficacement votre site Web.

Étape 7

Remplissez les sections du diagramme pour toutes les catégories de premier niveau de votre site Web de la même manière. Par exemple : pour les vêtements femmes et enfants.

Pour vous assurer d’une arborescence méticuleusement pensée pour plaire aux algorithmes et à vos visiteurs, il est également possible de vous faire accompagner par une agence web.

Un projet web ? Parlons-en ! Audit gratuit

Elaine Goldfarb

Elaine, Directrice de production et pilier de l'agence Churchill depuis près 20 ans, a guidé et supervisé d'innombrables refontes de sites internet, affirmant sa position en tant que véritable experte en création de site web. Avec une profonde connaissance en UX, design et développement, elle est la force motrice derrière la transformation digitale de + de 150 clients.