4 min de lecture
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 vous invite à utiliser une extension chrome pour Hn (plus précisément, pour voir les headings Hn) sur les sites les plus performants en SEO.
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 vous aide à détecter et hiérarchiser tous les headings d’un site, sans que vous ayez à faire tout ce long chemin.
Vous l’installez d’abord sur chrome. Ensuite, une icône apparaît dans la barre en haut. Choisissez le site que vous voulez testé, peu importe lequel, et cliquez sur cette icône. Vous verrez apparaître sur votre 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"
Vous pourrez vous 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 vous montre une astuce pour créer un site web : pour garantir son efficacité, je vous conseille de vous 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 vous aider à le faire sur Webflow n’est autre que l’utilisation du guide de style. Si vous suivez ma formation à propos de Webflow, vous vous souvenez sûrement que je vous 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, vous aurez accès à bien de choses sur les headings :
Pourquoi en on a-t-on besoin ? Ces guides vous permettent de gagner du temps. En effet, vous n’aurez pas besoin de configurer les typographies, tailles, styles… des headings pour chaque page, de manière à les rendre conformes.
Vous n’avez 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. Vous n’êtes pas obligé de l’utiliser vous aussi. Certains webdesigners préfèrent d’autres outils comme Photoshop ou autre. En fait, ça va de soi.
Il vous suffit de regrouper tous les éléments dont vous avez besoin tout au long du site. En plus des headings (déjà mis en forme), les différents logos que vous utiliserez 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 votre besoin intense de connaître la structure d’une ou plusieurs pages d’un site qui vous 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 vous recommande vivement une extension chrome pour Hn ; elle vous facilitera la tâche : Headingsmap.
YouTube : Extension chrome pour voir les headings H1, H2...
Revenez sur cette page chaque fois que vous voudrez. Avez-vous trouvé des idées que j’aurais oubliées ? Si oui, lesquelles ? Laissez un commentaire ci-dessous ou envoyez un e-mail à hello@happydesk.be
Dans la joie et la bonne humeur
Que vous soyez débutant ou expérimenté, la Happy.webacademy vous donne l’énergie, les stratégies et les outils pour avoir plus de liberté et générer des résultats qui propulseront votre chiffre d’affaires dans les étoiles.
