Il arrive qu’en utilisant la balise H1 vos titres de contenus prennent légèrement de la place et ne s’affichent pas correctement en fonction de l’appareil sur lequel vous vous connectez. Une brillante idée vous vient alors à l’esprit… tester l’affichage de votre titre en modifiant le balisage.
Vous passez en quelques secondes d’une balise H1 à une balise H2 et le tour est joué. C’est bon votre titre prend moins de place sur la page. Mais question optimisation est-ce que ce tour de passe-passe vaut le coup ? Est-ce qu’on peut se permettre de remplacer la balise H1 par une balise H2 simplement pour un “défaut” d’affichage ?
Si je vous dis NON et que je m’arrête là, vous ne serez pas plus avancé et vous n’aurez toujours pas la solution à votre problème premier qui est : “j’ai un titre qui prend trop de place”.
Rappel de ce que sont les balises Hn
En SEO, les Hn sont des balises qui permettent de créer une arborescence, une architecture de vos contenus. On en compte 6 : h1, h2, h3, h4, h5, h6. Sachant que la première est la plus importante et que la dernière évidemment est la moins pertinente.
Le balisage Hn permet surtout aux crawlers des moteurs de recherche de comprendre la structure et donc la logique d’un contenu. Grâce à eux il peut reconnaître la place d’un titre d’article, les sous-titres etc..
Si je devais faire une petite analogie rapide, je dirai que le balisage Hn est un peu comme le sommaire d’un livre. Oui je crois que je peux difficilement faire plus simple.
La plupart du temps les contenus d’une page sont architecturés à l’aide de la H1 qui représente donc le titre principal de la page et de quelques H2 qui représentent donc des sous-chapitres ou sous-sujet de la page. Les H2 permettent de donner de la profondeur au sujet principal.
Par exemple : vous avez une page qui parle de recette de tarte au citron, le contenu de cette page pourrait être représenté de telle sorte à ce que :
h1 = la tarte au citron d’amalfi
h2 = durée de la recette
h2 = ingrédients
h2 = conseil gourmand
Le saut de Hn n’est pas recommandé
Dans les faits, les balises Hn ne peuvent pas être mélangées surtout si c’est une question d’esthétisme. l’intégration d’un balisage Hn sur une page doit obligatoirement commencé par la balise H1, puis H2 etc….
Assurez-vous que chaque page de votre projet comporte un titre unique de niveau 1.
Ne sautez pas de niveaux dans la hiérarchie des titres. Par exemple, placez une balise <h3> uniquement sous une balise <h2>.
https://developers.google.com/style/headings
Si mon titre H1 prend trop de place, quelle est la solution ?
La solution que j’utilise est de créer une classe de style à la balise H1 pour qu’elle ressemble graphiquement à la balise H2.
Si vous avez un développeur qui peut le faire tant mieux, sinon il vous suffit de suivre ces étapes :
- Ouvrir le fichier CSS archive
- Utiliser l’indicatif : h1 { font-size: taille de votre choix px; }
