J’ai comme l’impression que les webdesigners font une compétition acharnée pour créer les plus beaux thèmes possible ! Certains d’entre eux vont même jusqu’à bouleverser l’ordre des balises heading ; une erreur fatale pour un site web. Les headings doivent effectivement respecter une certaine règle. Pour le prouver, je t’invite à utiliser une extension chrome pour Hn (plus précisément, pour voir les headings Hn) sur les sites les plus performants en SEO.

À quoi sert headingmaps ?

S’il y en a ceux qui copient pour ensuite coller tout le texte d’un site sur word, dans le seul but de savoir quels sont les H1, H2, H3…, d’autres se contentent d’utiliser une extension chrome pour Hn. En effet, Headings map t’aide à détecter et hiérarchiser tous les headings d’un site, sans que tu aies à faire tout ce long chemin.

Comment utiliser headingmaps ?

Tu l’installes d’abord sur chrome. Ensuite, une icône apparaît dans la barre en haut. Choisis le site que tu veux testé, peu importe lequel, et clique sur cette icône. Tu verras apparaître sur ta gauche une barre latérale qui liste tous les headings du site.

Dans ma vidéo, j’ai pris plusieurs sites comme exemple.

Il y a une vidéo Youtube dans laquelle je décris cela en bas de l'article. Soutenez-moi en vous abonnant à la chaine YouTube "Happy Desk Design"

Quel intérêt à utiliser cette extension chrome pour Hn ?

Tu pourras t’inspirer de ce qu’ont fait les grands sites web pour structurer leur page. J’ai d’ailleurs écrit un autre article à ce sujet, expliquant en quoi les headings sont importants pour Google et pour les visiteurs.

Je te montre une astuce pour créer un site web : pour garantir son efficacité, je te conseille de t’occuper de sa structure avant toutes choses (avant même d’établir la maquette). Cette étape consiste à fixer les headings.

Un des outils qui pourront t’aider à le faire sur Webflow n’est autre que l’utilisation du guide de style. Si tu suis ma formation à propos de Webflow, tu te souviens sûrement que je t’en ai offert un, à titre gratuit.

Par contre, pour ceux qui ne suivent pas la formation, ils peuvent créer eux-mêmes leur guide de style.

Dans ce guide, tu auras accès à bien de choses sur les headings :

• leur hiérarchie
• leur taille
• leur typographie
• etc.

Pourquoi en on a-t-on besoin ? Ces guides te permettent de gagner du temps. En effet, tu n’auras pas besoin de configurer les typographies, tailles, styles… des headings pour chaque page, de manière à les rendre conformes.

Tu n’as qu’à modifier le guide de style, et le reste s’ensuit.

Avant d’établir ce guide, j’utilise d’abord Figma. Ça rend les choses plus faciles. Tu n’es pas obligé de l’utiliser toi aussi. Certains webdesigners préfèrent d’autres outils comme Photoshop ou autre. En fait, ça va de soi.

Il te suffit de regrouper tous les éléments dont tu as besoin tout au long du site. En plus des headings (déjà mis en forme), les différents logos que tu utiliseras fréquemment pendant la conception du site elle-même.

Conclusion
Déterminer les headings de différents sites web n’est pas aussi simple que ça en a l’air, surtout s’il s’agit d’une page riche (très riche) en contenus. Pourtant, je comprends très bien ton besoin intense de connaître la structure d’une ou plusieurs pages d’un site qui t’intéresse. Dans la plupart des cas, les webdesigners y ont recours pour puiser de l’inspiration, avant de concevoir un site web. C’est pourquoi je te recommande vivement une extension chrome pour Hn ; elle te facilitera la tâche : Headingsmap.

YouTube : Extension chrome pour voir les headings H1, H2...

Reviens sur cette page chaque fois que tu voudras. As-tu trouvé des idées que j'aurais oubliés? Si oui, quels sont-ils? Laisse un commentaire ci-dessous ou envoi un mail à hello@happydesk.be