Tous designers aspirent à ce que chaque page web qu’ils créent soit attirante. Je parie que ça fait également partie de tes objectifs ! Commence alors par t’occuper des espacements entre tes titres et sous-titres (aussi appelés Heading). J’ai trouvé une solution automatisée qui va te rendre la vie plus facile : tu pourras réaliser le calcul de l’espacement Hn automatiquement. Mais avant, sais-tu réellement quels sont les avantages à utiliser les Hn sur un site web ?

• Pourquoi utiliser des Hn (H1, H2, H3...) ?
• Quels sont les atouts de Hn, côté SEO
• Quelques méthodes pour placer les Hn
• Quelles astuces pour la mise en forme des Hn ?
• 1. Par l’utilisation de guide de style
• 2. Par l’utilisation d’un logiciel pour calculer les Hn automatiquement

Utiliser des Hn : bonne ou mauvaise idée ?

En utilisant des Hn, tu peux être sûr que les pages web que tu crées seront plus claires et plus compréhensibles. Tu fais 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.

Dis-moi : est-ce qu’il t’est déjà arrivé de faire face à une page qui ne comportait qu’un long pavé de textes ? Qu’est-ce que tu as ressenti ? Moi, j’en rencontre tout le temps. Je dois t’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.

Les Hn sont bien plus importants, côté SEO

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 ton site. Est-ce que tu as déjà pris le temps de lire mon autre article sur les astuces SEO pour faire apparaître ton site dans les meilleurs résultats de recherche, tu te souviens peut-être d’un de mes conseils : il faut insérer des mots clés dans les Headings. Ce faisant, tu fais comprendre à Google de quoi parle encore ta page, ton site.

Comment placer les Hn et faire le calcul de l’espacement Hn ?

Si tu veux que tout se passe bien, il faudrait quand même respecter une certaine règle. En plaçant les différents Hn, tu dois 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 :

• H1
• Introduction
• H2
• Paragraphe
• H3
• Paragraphe
• H3
• Paragraphe
• H2
• Paragraphe
• Conclusion

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. Veille bien à ce qu’il ne contienne pas trop de mots, et comporte le mot clé principal.

Comment fonctionne la mise en forme des Headings ?

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. Tu dois toutefois savoir qu’on ne parle 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 tu peux t’y prendre avec ces mise en forme et espacement Hn.

Utilise un guide de style

Est-ce que tu te souviens du guide de style dont je te 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 tu crées sur Webflow, les Hn adoptent automatiquement ces tailles et typos. Seulement, tu ne vas pas forcément aimer le style que j’ai peaufiné. Ce n’est pas un problème, sache que tu peux créer ton propre guide de style.

Fais-toi aider par type-scale.com

Le problème, quand tu devras créer ton propre guide de style est que tu n’as peut-être aucune idée de l’espacement Hn à adopter entre les headings. C’est là que tu fais appel à type-scale.com. Dis désormais adieu aux calculs d’espacement manuel. Sur la plateforme, tu as directement accès à un nombre de pixels proposés automatiquement, un ratio qui te 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 toi ! (2020)

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