Qu'est-ce que la balise nav ?
La balise HTML <nav> regroupe les liens de navigation principaux d'un site, facilitant l'exploration pour les moteurs de recherche et l'accessibilité.
Qu'est-ce que la balise <nav> ?
La balise <nav> est un élément sémantique HTML5 conçu pour envelopper une section de la page contenant des liens de navigation. Son rôle n'est pas de contenir tous les liens d'une page, mais uniquement les blocs de navigation majeurs (comme le menu principal, un menu de pied de page ou une table des matières).
En utilisant cette balise, vous indiquez explicitement aux navigateurs et aux robots d'indexation (comme Googlebot) : "Ceci est la carte routière pour naviguer sur mon site".
Pourquoi la balise <nav> est-elle vitale pour le SEO ?
Bien que les liens fonctionnent sans cette balise (dans une simple <div>), la balise <nav> apporte une valeur ajoutée non négligeable :
- Compréhension de l'architecture : Google utilise ces blocs pour identifier les pages les plus importantes de votre site et peut s'en servir pour générer des Sitelinks (les liens supplémentaires qui apparaissent sous votre résultat de recherche).
- Priorisation du crawl : Les robots savent que les liens à l'intérieur d'un <nav> sont des chemins critiques vers d'autres contenus, ce qui facilite leur parcours sur le site.
- Accessibilité (A11y) : Les lecteurs d'écran permettent aux utilisateurs de sauter directement à la navigation grâce à cet élément, ou au contraire de l'ignorer pour aller droit au contenu.
Où utiliser (et ne pas utiliser) la balise <nav> ?
Il est important de ne pas en abuser pour ne pas diluer son signal sémantique :
- À utiliser pour : Le menu principal (Navbar), les menus de catégories latéraux, la pagination d'un blog ou une table des matières dans un article long.
- À éviter pour : Les liens isolés dans le texte, les boutons de partage sur les réseaux sociaux ou les liens "Lire la suite" en bas d'un extrait d'article.
Configuration dans Webflow
Webflow facilite grandement l'usage de cette balise via son composant natif :
- Le composant Navbar : Lorsque vous glissez une "Navbar" depuis le panneau des éléments, Webflow lui attribue automatiquement le tag <nav>.
- Conversion manuelle : Si vous créez une navigation personnalisée à partir d'une div ou d'une section :
- Sélectionnez l'élément parent de vos liens.
- Allez dans le panneau Settings (touche D).
- Dans le menu déroulant Tag, sélectionnez nav.
Astuce d'expert : Pour une accessibilité parfaite, si vous avez plusieurs balises <nav> sur la même page (une en haut et une en bas), utilisez l'attribut aria-label (ex: "Principal" et "Secondaire") pour aider les utilisateurs de lecteurs d'écran à les distinguer.