<h1> - Impact sémantique vs impact SEO

Il y a beaucoup de débat sur l'architecture de la structure des titres en html5. Après avoir lu divers articles, je suis arrivé à trois architectures possibles qui ont un sens logique pour moi, mais je ne sais pas quelle est la véritable méthode d'approche. Je vais les énumérer ci-dessous avec des exemples de code et j'espère que quelqu'un pourra faire la lumière sur le bon équilibre, ou pire / mieux encore, dire le redouté "Vous vous trompez" et donner un coup de main.

Approche 1: version A

Unique <h1>: utilisation des titres pour le contenu spécifique à la page uniquement.

Cela laisse la <h1>navigation de niveau supérieur pour l'en-tête spécifique à la page tout en circulant <h2-6>selon les besoins dans la zone de contenu. En quittant les éléments <header>, <nav>et en <footer>tant qu'éléments "sans titre".

<header>
  <nav>
    <!-- no headings -->

<div role="main">
  <h1>
  <section>
    <h2>
      <section>
        <h3>

<footer>
  <!-- no headings -->

Approche 1: version 2

Multiple <h1>: uniquement en utilisant les en-têtes pour le contenu spécifique à la page uniquement.

Identique à 1A avec l'ajout de plusieurs sujets de contenu de page, tout aussi importants. (par exemple possible pour les blogs ou les pages de sujet fractionné)

<header>
  <nav>
    <!-- no headings -->

<div role="main">
  <h1>
  <article>
    <h2>
  <article>
    <h1>

<footer>
  <!-- no headings -->

Aperçu de l'approche 1: le plus logique pour le référencement (mon avis d'après mes recherches)

• CORPS SANS TITRE
  • NAV sans titre
• Titre principal
  • Tête de section
    • En-tête de sous-section
  • SECTION SANS TITRE

Approche 2:

Multiple <h1>: accentuer la structure hiérarchique ET la hiérarchie du contenu

Cela vaut - têtes pour les éléments du site à l' échelle <header>, <nav>et l' <footer>utilisation de plusieurs <h1>« s pour les éléments non orientés contenu.

<header>
  <h1>
  <nav>
    <h2>

<div role="main">
  <h1>
  <section>
    <h2>
    <section>
      <h3>

<footer>
  <h1>
  <section>
    <h2>

Contour de l'approche 2: le plus logique pour le contour sémantique (encore une fois, à mon avis)

• En-tête En-tête
  • Rubrique de navigation
• Titre principal
  • Tête de section
    • En-tête de sous-section
• Titre de pied de page
  • Tête de section

Approche 3

Unique <h1>: focus sur la hiérarchie de contenu; niveau inférieur <h1-6>pour les éléments à l'échelle du site

Cela vaut - têtes pour les éléments du site à l' échelle <header>, <nav>et <footer>sans utiliser plusieurs <h1>« s pour les éléments non orientés contenu.

<header>
  <h2>
  <nav>
    <h3>

<div role="main">
  <h1>
  <section>
    <h2>
    <section>
      <h3>

<footer>
  <h2>
  <section>
    <h3>

Aperçu de l'approche 3: un peu un hybride des deux approches

• En-tête En-tête
  • Rubrique de navigation
• Titre principal
  • Tête de section
    • En-tête de sous-section
  • Titre de pied de page
  • Tête de section

Donc, avec tout cela, comment puis-je donner un sens à tout cela? Une approche a-t-elle plus de valeur sémantique que l'autre? Est-ce que cela a plus de sens en termes de référencement? Y a-t-il un équilibre heureux qui peut être atteint?

Sources: Il y en avait beaucoup plus, ce sont celles dont je me souviens en ce moment

• https://youtu.be/GIn5qJKU8VM
• http://accessiblehtmlheadings.com/
• http://html5doctor.com/outlines/
• http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824

Pour commencer, aucun de vos exemples n'a rien à voir avec la sémantique. Votre question est entièrement basée sur le modèle de l'analyseur où la page est lue de haut en bas de manière traditionnelle.

Pour cette raison, votre premier exemple est correct. Les exemples suivants ne vous donneront pas de résultats prévisibles et peuvent vous causer de graves brûlures d'estomac.

Veuillez comprendre que votre page Web sera examinée conceptuellement de plusieurs façons: premièrement, en suivant le modèle DOM traditionnel où HTML et autres sont évalués du point de vue de l'utilisateur; deux, texte uniquement avec un balisage simple pour indiquer les titres, les sous-titres, le contenu, etc. et trois, en utilisant une vue sémantique où vraiment seulement un léger poids est appliqué aux balises d'en-tête dans l'index en fonction de sa place dans la hiérarchie h1-6. À partir du modèle DOM, vous obtiendrez des éléments comme la balise de titre, la méta-balise de description, etc. qui manqueraient dans les deux autres vues. Cependant, la vue DOM fait peu pour pondérer votre contenu. Sa fonction principale est de comprendre votre page, où se trouve votre navigation, où se trouvent votre en-tête et vos pieds de page, où commence et se termine votre contenu, etc.

Ce à quoi vous devez vraiment faire attention, c'est le texte uniquement et les vues sémantiques. La vue sémantique est principalement dérivée de la vue texte uniquement, cependant, elle porte avec elle diverses analyses linguistiques, psychosémantiques, semanitques et autres de votre contenu.

Je ne décrirai pas à nouveau la sémantique, mais je vous indiquerai une réponse que j'ai écrite il y a quelque temps, qui est un mini-didacticiel sur le sujet: pourquoi un site Web avec un bourrage de mots-clés serait-il supérieur à un sans dans les résultats de recherche Google?

Parce que le Web est basé sur la page imprimée et que les analyseurs des premiers jours ont suivi ces traditions et sont en grande partie inchangés, il est impossible de leur échapper. Voici une réponse qui explique l'ordre de lecture des titres qui reste la meilleure stratégie basée sur le modèle de l'analyseur: Améliorez le classement Google pour les mots clés généraux et spécifiques

Bien que j'admette qu'il pourrait y avoir un peu d'effet en déplaçant les balises d'en-tête, je demande, est-ce une chose sage à faire? Sûrement pas! La pondération des choses aujourd'hui n'est peut-être pas celle de demain. Suivre un format traditionnel assure des résultats prévisibles où, comme un simple changement de pondération, vous pouvez faire tourner votre site en un tour de main.

Voici une perspective sur la façon dont cela fonctionne: Avantage du nom de domaine en SEO Ignorez le titre et sautez tout en haut de la réponse et accédez à la perspective des programmeurs.

Si vous lisez ces trois réponses, vous pouvez facilement comprendre les effets de la balise d'en-tête. Il est très possible de ruiner les performances de votre page / site en devenant mignon avec la façon dont vous les organisez. Même selon la tradition, vous pouvez annuler votre balise de titre et votre balise h1 extrêmement rapidement en optimisant de manière excessive quelques balises d'en-tête inférieures. Un équilibre prudent est la clé.

Enfin, je vais vous mettre en garde contre tous ces conseils SEO en ligne de personnes qui ne sont pas ingénieurs. C'est une raquette pour gagner de l'argent et rivaliser pour votre attention. Le fonctionnement des moteurs de recherche n'est pas un secret. C'est là-bas si vous savez où chercher. La plupart des experts SEO ne sont pas du tout des experts dans la mesure où ils ne peuvent pas vous expliquer en interne comment la technologie de recherche est conçue. À moins d'être ingénieur pour Google ou Bing, nous ne pouvons jamais vraiment savoir exactement comment ces moteurs de recherche fonctionnent. Heureusement, Google nous en a assez dit (et vraiment, ils nous ont dit presque tout ce que nous devons savoir - et non cela ne venait pas d'un gars nommé Matt) que si vous connaissez la science et les technologies, un ensemble d'hypothèses assez raisonnable peut être fait. De mon point de vue, la plupart des SEO sont plus faux que corrects tandis que quelques-uns ont un taux de réussite beaucoup plus élevé que la moyenne.

Ce qui suit est du point de vue de la spécification HTML5, basé sur l'hypothèse que les consommateurs (comme les moteurs de recherche) s'attendront et travailleront avec ce qui est spécifié dans les normes HTML. Dans la pratique actuelle, ces détails de balisage n'ont probablement pas beaucoup d'importance pour le référencement, mais ils peuvent être importants pour les autres consommateurs et l'accessibilité.

J'utiliserai des en-têtes du rang approprié, car c'est ce que HTML5 encourage , mais il est également possible de l'utiliser h1partout (si vous utilisez toujours des éléments de contenu de section, le cas échéant).

Vous ne pouvez pas "appliquer" des en-têtes headerou des footeréléments, car ils ne sectionnent pas le contenu (ils ne peuvent contenir que des en-têtes, mais cet en-tête ne serait pas limité à la portée du header/ footer).

Chaque élément contenu sectionnant ( section, article, nav, aside) et chaque élément racine de partitionnement ( body, blockquote, etc.) peuvent avoir une rubrique appliquée.

Ces contenus des sections / éléments racine et les éléments de titre h1- h6sont les seuls éléments qui relève du plan du document .

Bien que chaque section "aspire" à un titre, il n'est pas nécessaire d'en fournir un (dans ce cas, il obtient un titre "implicite", sans titre). Bien qu'il soit souvent utile d'en fournir un, il y a des cas où ce n'est pas vraiment nécessaire. Par exemple, si vous n'avez qu'une seule navigation, avoir un navsans titre serait suffisant. Mais si votre site a plusieurs navigations, il peut être judicieux d'utiliser des en-têtes qui expliquent les différents objectifs.

Dans votre approche 1, le bodyest une telle section sans titre (mais ce n'est le cas que parce que votre navapparaît avant le premier élément de titre; sinon ce h1serait le titre de tout le document).
Je ne pense pas qu'avoir une bodysection sans titre soit un bon choix. Il s'agit de la première entrée dans le plan et, idéalement (mais pas nécessairement), tout ce qui suit entre dans le champ d'application de cette entrée.

Pour un site Web classique doté d'une navigation globale, il est judicieux ( explication plus longue ) d'utiliser le nom du site pour l'en body-tête de la section, car la navigation globale appartient à l'ensemble du site , pas seulement au document actuel:

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
-->

Le contenu principal de ce document doit également être dans la portée de l'en-tête du site, car le site est le contexte du contenu principal de ce document, c'est-à-dire qu'il fait partie de votre site:

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <article> <!-- document content -->
    <h2>My blog post</h2>
  </article>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "My blog post"
-->

Si vous avez plusieurs sections de contenu principal, par exemple, une liste de billets de blog, il est souvent judicieux d'utiliser un sectionqui contient tout cela article, au lieu d'avoir les articleenfants directs de body:

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <section> <!-- document content -->
    <h2>Recent blog posts</h2>

    <article>
      <h3>My blog post</h3>
    </article>

    <article>
      <h3>Another blog post</h3>
    </article>

  </section>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "Recent blog posts"
      1.2.1 "My blog post"
      1.2.2 "Another blog post"
-->

Si vous avez un pied de page à l'échelle du site qui est si complexe qu'il a besoin d'éléments de sectionnement, il devrait être à nouveau au même niveau que le navet le contenu principal (car il appartient au site, pas au contenu principal):

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <section> <!-- main content -->
    <h2>Recent blog posts</h2>

    <article>
      <h3>My blog post</h3>
    </article>

    <article>
      <h3>Another blog post</h3>
    </article>

  </section>

  <section> <!-- site footer -->
    <!-- this section should be the child of a 'footer' element -->
  </section>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "Recent blog posts"
      1.2.1 "My blog post"
      1.2.2 "Another blog post"
    1.3. Untitled section
-->

(Dans tous ces exemples, la navigation précède le contenu principal, mais il est souvent logique d'avoir d'abord le contenu principal. L'échange est possible. Vous devez uniquement vous assurer que le h1nom du site précède toute autre section / en-tête.)