1. Origine
HeadingsMap est une extension Chrome open-source développée par Jorge Rumoroso. Simple dans son concept, elle est devenue un outil incontournable dans la boîte à outils des développeurs web, des experts SEO et des auditeurs d'accessibilité. Elle répond à un besoin précis : voir en un coup d'œil la structure hiérarchique des titres d'une page, sans avoir à inspecter le code source élément par élément.
2. Utilité
Pour un studio Webflow, la structure des titres est un point de contrôle qualité systématique. Une page bien structurée sémantiquement a exactement un H1 (le titre principal de la page), des H2 pour les sections principales, des H3 pour les sous-sections, et ainsi de suite. Une hiérarchie incorrecte (plusieurs H1, des sauts de niveau comme H2 suivi d'un H4, ou des titres utilisés pour leur style plutôt que leur sens) est un signal négatif pour le SEO et un problème d'accessibilité pour les utilisateurs de lecteurs d'écran.
3. Fonctionnalités
HeadingsMap affiche dans un panneau latéral l'arborescence complète des titres de la page active, avec le niveau de chaque titre (H1 à H6) et son contenu textuel. Les erreurs de hiérarchie (niveaux manquants, H1 multiples) sont signalées visuellement. Un clic sur un titre dans le panneau fait défiler la page jusqu'à l'élément correspondant.
L'extension fonctionne sur n'importe quelle page web, y compris les previews Webflow et les sites en staging. Elle affiche aussi l'arbre ARIA pour les éléments qui utilisent des rôles de titre via ARIA, ce qui est utile pour les audits d'accessibilité avancés. HeadingsMap est également disponible en extension Firefox via Firefox Add-ons.
4. Cas concrets
→ Un studio vérifie systématiquement la structure des titres de chaque page avant livraison avec HeadingsMap. Sur une page produit, l'extension révèle que le nom du produit a été mis en H3 pour des raisons de style alors qu'il devrait être en H1 : une erreur SEO corrigée en deux clics dans l'éditeur Webflow.
5. Prix
HeadingsMap est entièrement gratuit.
Disponible sur Chrome et Firefox.
→ Installer l'extension Chrome : Chrome Web Store
6. Questions fréquentes
Combien de H1 doit avoir une page Webflow ?
Exactement un. Le H1 est le titre principal qui indique au moteur de recherche et aux lecteurs d'écran le sujet de la page. Les pages avec zéro ou plusieurs H1 envoient un signal ambigu au SEO et posent des problèmes d'accessibilité.
Peut-on avoir un H3 sans H2 parent ?
Non. La hiérarchie des titres doit être continue (un H3 doit toujours être précédé d'un H2 dans la structure de la page). Les sauts de niveau (H1 vers H3 sans H2) sont des erreurs de sémantique qui impactent l'accessibilité et la compréhension par les moteurs de recherche.
HeadingsMap fonctionne-t-il sur les pages avec du contenu dynamique Webflow ?
Oui, l'extension analyse le DOM tel qu'il est rendu dans le navigateur, incluant les contenus chargés dynamiquement. Elle fonctionne donc correctement sur les pages CMS Webflow avec du contenu variable.
