Avis Google : 5/5
Publié le

Attention, article daté ! Date actuelle : 08/12/2022 Date de l'article : 24/07/2019

Attention, cet article est daté. Une nouvelle version est probablement en cours de rédaction ou déjà rédigée !

C’est un fait paraissant évident pour tout développeur web, mais pourquoi certains se permettent encore l’usage des balises comme <h4> ou <strong> pour mettre en page leur code ? STUDIO218 mène l’enquête.

Ah, les balises HTML. On aimerait pouvoir en faire ce que l’on veut, mais malheureusement le W3C en a décidé autrement. S’il fait partie des rudiments du développeur de savoir que les tags ne servent pas l’esthétique, mais la structure, il est encore monnaie courante de les trouver parfois ici et là.

Un <h4> placé ici car le texte d’un <h4> est plus petit que celui d’un <h2>, alors que c’est pourtant un <h2> qu’il faudrait, ou encore une balise <em> simplement pour pouvoir mettre en italique un texte, alors que celle-ci sert à mettre en emphase un extrait… Les tentations sont multiples !

Bien entendu, cela échappe à ceux qui découvrent les joies du code, en ne les en blâmons pas. Cet article est là pour rappeler les rudiments SEO, qui ont impact si petit soit-il, sur le positionnement et le PageRank de votre site.

A quoi servent des balises bien placées ?

Elles permettent notamment de rendre votre page plus lisible pour les crawlers qui viendront vous visiter. Même si Google n’analyse pas que cela, il est indispensable d’avoir cette base qui permettra une structure claire et facilement décryptable. On oublie alors les <h1> suivis d’un <h3> parce que “c’est plus sympa comme ça”. C’est, dans la logique des choses, <h1><h2><h3> etc. quoi qu’il en coûte ! Personnalisez ainsi leur mise en forme en CSS, il est là pour ça.

Le propos est le même pour les balises de type <strong><em> ou encore <b>. Il est important de bien faire le distinguo entre chacune d’entre-elles. Par exemple, quelle est la différence fondamentale entre un <b> et un <strong> ? C’est tout simplement l’interprétation. En effet, Google n’interprètera pas une balise <b> comme une balise <strong> :

  • <strong> met en valeur le texte car il est important à la compréhension.
  • <b> met juste le texte en gras.

Ainsi, ne mettez en <strong> que les éléments que vous considérez comme important. Si vous souhaitez mettre des parties de votre texte ou de votre structure en gras par pur intérêt visuel, préférez la balise <b> ! L’exercice est le même avec le tag <em> et <i>.

Un exemple de bonne structure de titres par STUDIO218

Un exemple de structure correcte.

Un réel intérêt à faire toutes ces simagrées ?

Au risque de vous surprendre : la réponse est oui. Une structure HTML bien pensée, et réfléchie, c’est l’assurance de gagner en PageRank. De la même manière que lorsque l’on construit une maison, il faut que les fondations soient solides. Sans elles, le reste est compromis.

Même si de premier abord, ce ne sont pas quelques balises placées avec peu de considération qui vont sensiblement vous faire remonter, ce sera les positionner de manière réfléchie et structurée les unes après les autres qui feront que le tout changera la donne. Ainsi, lorsque vous pensez votre page web, pensez structure et sémantique :

  • Quelle est ma structure de titre ?
  • Quels sont les éléments importants à mettre en emphase ?
  • Que dois-je mettre en gras, ou en important ?

Toutes ces questions et bien d’autres à garder à l’esprit lorsque vous codez.

Mais qu’en est-il de WordPress ou des CMS alors ? Eux qui ont des thèmes pré-existants et qui ne laissent que très peu la main sur la structure ? Faites au mieux. Parfois, certains builders tels que WP Bakery ou Elementor vous permettront de choisir quelle balise mettre pour les titres et les intertitres. Utilisez-les à votre avantage.

Voilà le laïus de STUDIO218 pour les jeunes développeurs qui nous liraient ici. Nous mettons du coeur à l’ouvrage dans nos productions et pour nos clients, et ce dans les moindres détails, si infimes soient-ils !

Catégorie : Web