logo-small logo-small_halloween

Penser la navigation d‘un site, entre UX et SEO

55
Wow-Score
Le Wow-Score montre la capacité d'engagement d'un billet de blog. Il est calculé en fonction de la corrélation entre le temps de lecture actif de l'utilisateur, sa vitesse de défilement et la longueur de l'article.
En savoir plus

Penser la navigation d‘un site, entre UX et SEO

Benjamin Thiers
Penser la navigation d‘un site, entre UX et SEO

Le maillage interne est une composante essentielle de votre référencement naturel : produire des contenus de qualité ne suffit pas : vous devez aussi penser à hiérarchiser et lier vos contenus entre eux pour faciliter la navigation des internautes et améliorer votre SEO. Voici plusieurs points de vigilance et conseils pratiques pour vous aider à proposer la meilleure navigation possible aux internautes et aux robots d'indexation.

Des éléments de navigation variés

Lorsqu'on vous parle de maillage interne, vous pensez certainement à vos menus de navigation : des listes de liens présents en tête de page, en pied de page ou en barre latérale, qui renvoient vers des catégories ou des pages.

Or, les menus ne sont pas les seuls éléments de navigation à votre disposition : d'autres éléments viennent contribuer au déploiement de votre stratégie de maillage interne. Citons pêle-mêle :

  • les liens contextuels, intégrés au coeur de vos textes
  • les boutons d'appels à l'action (CTA ou Call To Action) : devis, accès à la page de téléchargement d'un livre blanc, prise de rendez-vous, etc...
  • le fil d'Ariane, ou "breadcrumb trail" en anglais

Pour chaque élément, je vous propose des conseils et bonnes pratiques à mettre en oeuvre pour améliorer l'UX et le SEO.

Conseil n°1 : limitez l'usage des méga-menus

Concernant les menus, nous nous focaliserons pour cet article sur un cas particulier, celui des méga-menus. C'est un problème fréquent, à différentes échelles, et vous y êtes peut-être confronté sans même le savoir.

En travaillant le référencement de sites web, plus particulièrement de boutiques e-commerce, vous tombez parfois sur des menus gigantesques, dépassant les 1000 ou les 1500 liens. Or, ces méga-menus sont loin d'être la panacée, autant pour le SEO que pour l'expérience utilisateur :

  • un menu avec un très grand nombre de liens peut égarer les utilisateurs qui auront du mal à s'y retrouver : trop d'info tue l'info.
  • un méga-menu complique aussi la redistribution de la popularité au sein de votre site. Vous aurez plus de mal à sculpter votre maillage interne pour répartir le Page Rank interne vers les bonnes pages.
  • un méga-menu alourdit les pages et diminue la part de contenu vraiment unique dans chaque page : le ratio contenu unique / template penche alors largement vers le template.

Je vous conseille de ne pas abuser des méga-menus. Pour cela, vous pouvez :

  • Créer des sous-menus thématiques par grandes catégories. Si vous avez 10 grandes catégories possédant chacune en moyenne une quinzaine de catégories secondaires, qui disposent chacune d'une vingtaine de "sous-catégories", vous pouvez n'afficher en menu principal que les 10 grandes catégories, et éventuellement tout ou partie des catégories secondaires.
  • Mettre en avant dans le menu principal seulement les entrées vers les catégories ou les pages les plus populaires. Imaginons le cas d'un site e-commerce qui recense une centaine de marques, mais qui génère 90% de son CA avec une dizaine de marques. Dans votre menu principal, vous n'afficherez que les marque les plus populaires et ajouterez une entrée "Toutes les marques" qui renvoie vers une page qui liste l'ensemble des marques proposées. Ainsi, vous n'aurez aucune page de marque orpheline, mais vous dirigerez en priorité l'internaute (et le googlebot) vers les marques les plus intéressantes pour vous.

Zalando ne maille en menu principal que ses marques vedettes.

Conseil n°2 : des liens contextuels pour densifier le maillage interne

Les liens contextuels participent pleinement à la navigation d'un site : ils servent autant à l'utilisateur, qui peut ainsi accéder à des contenus connexes qui l'intéressent, qu'aux robots des moteurs de recherche qui peuvent mieux appréhender l'articulation sémantique et logique qui associent les contenus de votre site entre eux. Pour améliorer votre maillage interne, vous pouvez :

  • Ajouter des liens dans votre contenu vers des pages de votre site. Même si ces pages sont déjà citées dans le menu et/ou le fil d'Ariane, n'hésitez pas à ajouter aussi des liens contextuels vers elles. Vous ne ferez que renforcer leur Page Rank interne et leur popularité.
  • Entourer des liens d'un contenu éditorial de la même thématique. Par exemple, si vous présentez en fin d'article une liste d'articles similaires, vous pouvez ne pas vous contenter de liens textes mais les présenter avec des encarts, qui intègrent une ou deux phrases descriptives. La sémantique du contenu directement voisin avec le lien participe en effet à sa pertinence SEO.

Conseil n°3 : les appels à l'action, des liens pas comme les autres

Votre site contient sûrement un ou plusieurs appels à l'action. Ces boutons, dont le design et l'intitulé doivent inciter vos utilisateurs à réaliser l'action attendue, font partie de votre navigation. Vous devez être attentif à ce qu'ils contribuent à votre SEO, ou à ce qu'ils ne le pénalisent pas :

  • Optez pour le nofollow quand l'appel à l'action renvoie vers une page sans vocation SEO. Il ne sert par exemple à rien d'autoriser chaque fois le robot d'indexation à se rendre sur la page panier d'un site ecommerce, qui n'a pas d'objectifs SEO et est probablement, d'ailleurs, en noindex.
  • Certains utilisent le tag HTML <button type="button">Click Me!</button> pour renvoyer vers une page de votre parcours de conversion sans intérêt SEO. Une surcouche Javascript est nécessaire.
  • Si vous utilisez une image comme appel à l'action, et si vous souhaitez indexer la page de destination de ce CTA, pensez à ajouter un attribut Alt à votre image. Elle servira d'ancre de lien.

Conseil n°4 : ne jetez pas (le fil d')Ariane avec l'eau du bain !

Si le fil d'Ariane est parfois contesté par les tenants d'un design le plus épuré possible, il n'en demeure pas moins un excellent outil au service de votre stratégie SEO autant que de votre UX.

  • Il aide l'utilisateur à naviguer dans votre site, quand il souhaite revenir à la catégorie parente d'une page en un clic. 
  • Il facilite le travail des moteurs de recherche, qui peuvent ainsi cartographier plus facilement votre site.

Le fil d'Ariane reste une valeur sûre pour de nombreux sites de vente en ligne.

Pour tirer le meilleur parti d'un fil d'Ariane, vous devez respecter certaines règles :

  • Le fil d'Ariane se situe en haut de la page. Un fil d'Ariane perdu en pied de page risque bien d'être peu vu et donc jamais utilisé.
  • Des données structurées sont disponibles pour le fil d'Ariane. Si vous décidez d'ajouter un fil d'Ariane à votre site, vous pouvez les utiliser. Une documentation concernant les données structurées pour les breadcrumbs a été éditée par Google.

Il ne me reste plus qu'à vous souhaiter bonne chance dans votre projet de création ou de refonte de site : rappelez-vous qu'une navigation bien pensée contribue autant à l'UX qu'à votre référencement naturel !

Benjamin Thiers a débuté sa carrière dans la communication digitale et le référencement naturel en 2003. Il a rejoint au printemps 2016 les équipes SEO de l’agence digitale Digimood. Enseignant pour Kedge Business School, il vient de co-publier avec Julien Ringard “Ce que Google veut : comprendre le référencement naturel” aux éditions Studyrama Pro. Sites : benjaminthiers.net et Digimood.com
Partager cet article
ou

Commentaires

Il reste 2000 caractères
Benjamin Thiers
Bonjour Bob,
pour les sites e-commerce, je ne suis pas favorable à des menus en Hn. Par contre, les balises Hn peuvent servir à une page catégorie pour un listing de produits.

Par exemple :

h1 : Chaussures Femme Nike
h2 : Sélection de chaussures Nike pour femme à la vente
h3 : Modèle de chaussure 1
h3 : Modèle de chaussure 2
h3 : Modèle de chaussure 3
h3 : etc...

avec pour chaque produit le lien sur le H3.

Installez Webdeveloper (ext. chrome ou firefox) pour visualiser la structure Hn d'une page (sur Chrome : cliquez sur la roue crantée en haut à droite, puis sur "information" et "view document outline") : vous pourrez benchmarker plusieurs sites.
Vous avez un intérêt stratégique autour de votre site web et du budget ? Une agence comme Digimood (http://www.digimood.com) s'occupe de ces éléments avec des préconisations 100% seo-friendly
Jérémy Wyler
Benjamin Thiers
J'ajouterais qu'il vaut mieux aussi ne pas avoir de hns orphelins ; outre la h1, il est préférable d'avoir au minimum 2 h2 si l'on souhaite utiliser des h3...
Merci pour cet article. En e-commerce, faudrait-il mettre les liens de menu, des articles et des éléments du fil d'Ariane en strong ou hx afin de leur donner plus de poids ? Si oui, pourriez-vous donner une idée de hiérarchie de hx pour les différents éléments ?
Olivier Amici
Merci Benjamin pour cet excellent article ! J'attends ton prochain article avec impatience =)