web-dev-qa-db-fra.com

Ordre des titres en sémantique HTML et référencement

Google utilise ce code HTML dans sa page Adwords pt-BR :

<section class="..." id="...">
  <h4 class="...">
    Preços
  </h4>
  <h2>
    Você paga somente pelos resultados.
  </h2>
  <h3>
    Quando não há acessos, não há cobrança.
  </h3>
  <p>
    ...
  </p>
  <h3>
    Comece com qualquer orçamento.
  </h3>
  <p>
    ...
  </p>
</section>

Visuellement, c'est logique. Mais le problème, je pense, est qu'ils utilisent <h4> comme en-tête de section et <h2> et <h3> dans le même <section>, brisant ainsi la hiérarchie de la page.

Je veux donc savoir s’il s’agit d’un balisage valide d’un point de vue sémantique (et, sinon, pourquoi est-ce important). En outre, comment cela affecte-t-il le référencement?

Est-ce que je dois m'en soucier?

PS: J'ai trouvé cette question mais cela n'a pas répondu à la mienne.

seohtml5heading
3
Yuri

Google n'utilise même plus les titres comme signal de classement. Il fait attention à la façon dont le texte est rendu sur la page. Les gros caractères gras en haut de la page peuvent avoir plus de poids, que vous utilisiez h1, h2, h3, etc. ou que vous les modifiiez de la sorte avec CSS.

Rendre le balisage de page "sémantiquement correct" n'a aucune importance. Les utilisateurs ne consultent presque jamais votre code source. Ils ne s'intéressent qu'à la manière dont votre page s'affiche dans leur navigateur. Google a longtemps dit qu'il ne donnait pas de booster de classement pour un HTML sémantiquement correct ou valide.

Vous avez de meilleures façons de passer votre temps que de vous demander quelles étiquettes de titre utiliser et dans quel ordre.

EDIT (basé sur la discussion des commentaires): les lecteurs d’écran ont de nos jours une fonctionnalité qui ne parle que les en-têtes de la page, ce qui permet à l’utilisateur d’accéder au bon. Pour les utilisateurs de lecture d'écran, il serait utile d'utiliser des balises de titre uniquement sur les sections auxquelles ils doivent accéder et de les utiliser dans un ordre approprié.

Une façon de tester comment un lecteur d'écran "verrait" votre page consiste à installer un simulateur tel que Fang (pour Firefox). Il possède un document d'aide qui explique comment l'utiliser, ainsi que certains problèmes courants liés au balisage pour les lecteurs d'écran.

1
Stephen Ostermiller

Google utilise la structure des balises H pour évaluer et indexer sémantiquement les pages. Le fait d'avoir une structure de balises H correcte signifie que Google sera en mesure de mieux évaluer votre contenu et votre sujet et finira par donner plus de pouvoir de classement aux mots clés qui lui sont associés.

J'ai lu cet exemple ailleurs, je ne me souviens plus où donner du crédit, désolé.

Disons que vous avez un site Web sur le groupe Rolling Stones, votre structure de balises H ressemblera à ceci:

<body>
<h1>Rolling Stones</h1>
Ipsum lorem
<h2>Keith Richards</h2>
Ipsum lorem
<h3>Guitar</h3>
Ipsum loren
<h4>Model</h4>
<h2>Mick Jagger</h2>
<h3>...
<h4>...
</body>

Ceci est de plus en plus important, en particulier si vous utilisez des données structurées et prévoyez d'afficher des cartes riches de Nice sur les SERPs de Google.

De cette façon, Google peut choisir votre contenu pour le montrer à quelqu'un qui recherche le "modèle de guitare Keith Richards" si vous avez cette information dans votre message par exemple, ou même le montrer dans une carte riche.

En outre, comme l'a dit Yuri, la structure des balises H est importante pour l'accessibilité, qui est l'un des facteurs de classement des centaines.

Hormis les directives de codage et la hiérarchie, il est important de disposer de balises H bien structurées pour vos classements organiques. Vous devez donc vous en soucier.

1
Izaias Almeida

@yuri Oui, ils le font. Le meilleur conseil est d’essayer un lecteur d’écran et le validateur w3c pour voir la différence entre l’en-tête hiearchy et le contour du document.

0
RolfRB