6 min de lecture
Tous designers aspirent à ce que chaque page web qu’ils créent soit attirante. Je parie que ça fait également partie de vos objectifs ! Commencez alors par vous occuper des espacements entre vos titres et sous-titres (aussi appelés Heading). J’ai trouvé une solution automatisée qui va vous rendre la vie plus facile : vous pourrez réaliser le calcul de l’espacement Hn automatiquement. Mais avant, savez-vous réellement quels sont les avantages à utiliser les Hn sur un site web ?
En utilisant des Hn, vous pouvez être sûr que les pages web que vous créez seront plus claires et plus compréhensibles. Vous faites d’ailleurs d’une pierre deux coups : non seulement les pages plairont aux internautes, mais elles le sont aussi vis-à-vis des moteurs de recherche.
Dites-moi : est-ce qu’il vous est déjà arrivé de faire face à une page qui ne comportait qu’un long pavé de textes ? Qu’est-ce que vous avez ressenti ? Moi, j’en rencontre tout le temps. Je dois vous avouer qu’elles me font tout de suite fuir, avant même que j’aie eu le temps de comprendre de quoi elle parlait.
Alors, si un humain a du mal à comprendre un texte dénué de Hn, que ferait une machine ou un robot ? Certes, ces derniers sont intelligents, mais pas assez pour déchiffrer de telles informations. D’où l’importance de hiérarchiser les arguments, les idées… C’est précisément là que les headings (différents Hn) entrent en jeu. Ils facilitent la structuration d’une page web. Et si le calcul de l’espacement Hn est bien fait, le résultat est encore mieux.
Aussi, les internautes adorent les pages bien structurées. Cela leur donne une bonne expérience utilisateur.
D’un point de vue SEO, la mise en place de différents Hn et le calcul de l’espacement Hn sont aussi d’une importance capitale. J’ai déjà abordé le sujet tout à l’heure, comme quoi il serait plus facile aux moteurs de recherche de comprendre de quoi parle le site web.
Google n’aura aucun mal à indexer votre site. Est-ce que vous avez déjà pris le temps de lire mon autre article sur les astuces SEO pour faire apparaître votre site dans les meilleurs résultats de recherche, vous vous souvenez peut-être d’un de mes conseils : il faut insérer des mots clés dans les Headings.Ce faisant, vous faites comprendre à Google de quoi parle encore votre page, votre site.
Si vous voulez que tout se passe bien, il faudrait quand même respecter une certaine règle. En plaçant les différents Hn, vous devez absolument le faire par ordre. Jamais, il ne faut sauter de niveau ; sachant que les Hn sont composés de : H1, H2, H3, H4, H5 et H6. Les plus utilisés étant les H1 jusqu’à H3.
Voici un exemple plus concret :
Il faut structurer une page de cette manière : H1 > H2 > H3 > H4..., et non de la sorte : H2 (en tête de page) > H4 (suit tout de suite ce H2) > H1 > H3... Bref, il est question de simple logique.
Par ailleurs , il est important d’équilibrer le nombre de Hn. Ce ne serait pas convenable d’insérer plusieurs H1 ou plusieurs H2, ou encore plusieurs H3. D’ailleurs, pour une page, un seul H1 est permis. Les H2 jouent le rôle de sous-titre, et H3, des sous-sous-titres.
Par exemple :
Le H1 sert généralement à décrire tout le contenu (une sorte de résumé en 4 ou 5 mots) ; il s’agit du titre général du texte. Veillez bien à ce qu’il ne contienne pas trop de mots, et comporte le mot clé principal.
De base, le H1 a la taille la plus grande de tous ; il est également le plus gras. S’ensuit alors le H2, puis H3 et ainsi de suite. Vous devez toutefois savoir qu’on ne parlez pas ici de mise en forme, mais de “structure”. Ces tailles et niveaux de gras montrent seulement l’importance des headings.
Or, il est tout à fait possible de changer leurs formes, de manière qu’elles soient attirantes visuellement, et ainsi, rendent l’ensemble de la page agréable à voir. En général, ces typographies dépendent des thèmes et CSS adoptés pour le site.
Or, voici comment vous pouvez vous y prendre avec ces mise en forme et espacement Hn.
Est-ce que vous vous souvenez du guide de style dont je vous parle souvent. J’en donne à ceux qui suivent ma formation (et c’est gratuit).
Pour chaque Heading, j’ai choisi une taille et une typographie précises. À chaque nouvelle page que vous créez sur Webflow, les Hn adoptent automatiquement ces tailles et typos. Seulement, vous n’allez pas forcément aimer le style que j’ai peaufiné. Ce n’est pas un problème, sachez que vous pouvez créer votre propre guide de style.
Le problème, quand vous devrez créer votre propre guide de style est que vous n’avez peut-être aucune idée de l’espacement Hn à adopter entre les headings. C’est là que vous faites appel à type-scale.com. Dites désormais adieu aux calculs d’espacement manuel. Sur la plateforme, vous avez directement accès à un nombre de pixels proposés automatiquement, un ratio qui vous permet un bel espacement.
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"
Conclusion
Les détails font toute la différence ! Eh oui, l’espacement Hn fait partie de ces détails-là. C’est pourquoi il faut accorder beaucoup d’importances à leur calcul. Heureusement pour vous, il existe désormais un outil qui permet de le faire automatiquement et surtout, gratuitement !
YouTube : Espacement Heading (H1, H2, H3...) calculé pour vous ! (2020)
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.
