extension chrome pour Hn
Photo by Lacie Slezak on Unsplash

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.

extension chrome pour Hn
Photo by Daniela Brehme on Unsplash

À 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"

extension chrome pour Hn
Photo by Rotekirsche20 on Unsplash

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.

extension chrome pour Hn
Photo on Mary Fotinaki on Unsplash

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
Kevin Palombo, Gérant de Happydesk

Hello 👋

Je suis en mission pour ton Web Succès! Qui je suis?

Tu veux apprendre?

Un café? Mais oui, prends ton temps!

7/8/2020

Comment choisir un nom de domaine ?

Quel que soit le nom que tu choisiras pour ton site, il évoquera toujours une image chez ton interlocuteur. D'où l’intérêt de bien choisir un nom de domaine

Ça m'intéresse
5/8/2020

Comment gérer les délais d’un site web ?

Si comme moi, tu n'as pas su gérer les délais d'un site web, cet article qui relate mes erreurs et la manière dont j'y ai fait face t'intéressera sûrement.

Ça m'intéresse
3/8/2020

Où trouver de l’inspiration en 2020 pour ton projet web ?

Tu as épuisé toutes tes inspirations, et tu cherches actuellement un moyen de trouver de l'inspiration en 2020 pour tes projets web ?

Ça m'intéresse

Je veux...

Happy.business

Parce que toute histoire commence par une rencontre. Prenons contact, une vraie personne se cache derrière Happydesk et sera ravie d’écouter ce que vous avez à lui raconter !

Prendre un rendez-vous

Happy.webnews

Parce que nous mettons toutes nos connaissances du monde Digital à disposition de notre Communauté pour les accompagner dans leur quête du Web Succès.

Lire le blog

Happy.webevent

Parce que se sentir moins seul renforce notre essence de leader. Happydesk organise des Events entre Entrepreneurs plus que motivés à se dépasser et atteindre des objectifs jamais espérés.

Assister aux events

Tu veux favoriser ta réussite?

OUI, ça m'intéresse !