<h1> - Impact sémantique vs impact SEO
Il y a beaucoup de débats sur l'architecture de la structure de titre en html5. Après avoir lu divers articles, je suis arrivé à trois architectures possibles qui me semblent logiques, mais je ne sais pas quelle est la méthode d’approche appropriée. Je les énumérerai ci-dessous avec des exemples de code et j'espère que quelqu'un pourra nous éclairer sur le bon équilibre, ou pire/mieux encore, dites le redouté "Vous ne vous y prenez pas" et donnez un coup de main.
Approche 1: Version A
Single <h1>: Utilisation des en-têtes pour le contenu spécifique à la page uniquement.
Cela laisse le <h1> comme navigation de haut niveau pour l'en-tête spécifique à la page tout en parcourant <h2-6> au besoin dans la zone de contenu. Tout en laissant les <header>, <nav> et <footer> en 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> 's: n'utilise que les en-têtes pour le contenu spécifique à la page uniquement.
Identique à 1A avec l'ajout de plusieurs sujets de contenu de page d'égale importance. (par exemple, possible pour les blogs ou les pages de sujet divisées)
<header>
<nav>
<!-- no headings -->
<div role="main">
<h1>
<article>
<h2>
<article>
<h1>
<footer>
<!-- no headings -->
Approche 1 Description: Le plus logique pour le référencement (mon avis d'après mes recherches)
- Sans titre CORPS
- NAV sans titre
- titre principal
- Tête de section
- Titre de sous-section
- Untitled SECTION
Approche 2:
Plusieurs <h1> ': accentuer la structure hiérarchique ET la hiérarchie de contenu
Ceci applique des en-têtes aux éléments du site <header>, <nav> et <footer> à l'aide de plusieurs <h1> 'pour les éléments non orientés contenu.
<header>
<h1>
<nav>
<h2>
<div role="main">
<h1>
<section>
<h2>
<section>
<h3>
<footer>
<h1>
<section>
<h2>
Approche 2 Contour: Le plus logique pour un contour sémantique (encore une fois, à mon avis)
- En-tête
- Rubrique de navigation
- titre principal
- Tête de section
- Titre de sous-section
- Titre de pied de page
- Tête de section
Approche 3
Single <h1>: focus de la hiérarchie du contenu; niveau inférieur <h1-6> pour les éléments de l'ensemble du site
Ceci applique des en-têtes aux éléments du site <header>, <nav> et <footer> SANS utiliser plusieurs <h1> pour les éléments non orientés contenu.
<header>
<h2>
<nav>
<h3>
<div role="main">
<h1>
<section>
<h2>
<section>
<h3>
<footer>
<h2>
<section>
<h3>
Approche 3 Aperçu: un peu hybride des deux approches
- En-tête
- Rubrique de navigation
- titre principal
- Tête de section
- Titre de sous-section
- Titre de pied de page
- Tête de section
Alors, avec tout ce qui a été dit, comment puis-je donner un sens à tout cela? Est-ce qu'une approche a plus de valeur sémantique que l'autre? Est-ce qu'on a plus de sens en termes de référencement? Y a-t-il un heureux équilibre à atteindre?
Sources: Il y en avait beaucoup plus, ce sont ceux dont je me souviens pour le moment
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 d'analyse 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 donneront pas de résultats prévisibles et peuvent vous causer de graves brûlures.
Veuillez comprendre que votre page Web sera examinée de manière conceptuelle de plusieurs manières: premièrement, en suivant le modèle DOM traditionnel où HTML et autres sont évalués du point de vue de l'utilisateur; deuxièmement, texte uniquement avec une simple majoration pour indiquer les titres, les sous-titres, le contenu, etc. et troisièmement, en utilisant une vue sémantique où très peu de poids est appliqué aux balises d’en-tête de l’index en fonction de sa place dans la hiérarchie h1-6. Dans le modèle DOM, vous obtiendrez des éléments tels que la balise de titre, la méta-balise de description, etc., qui seraient absents des deux autres vues. Cependant, la vue DOM ne contribue guère à la pondération de votre contenu. Sa fonction première 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 finit votre contenu, etc.
Il faut vraiment faire attention au texte et aux vues sémantiques. La vue sémantique est principalement dérivée de la vue en texte seulement. Cependant, elle comporte diverses analyses linguistiques, psychosémantiques, sémaniques 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 et qui consiste en un mini-tutoriel sur le sujet: Pourquoi un site Web avec un rang de mot-clé 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 parseurs 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 du titre qui reste la meilleure stratégie basée sur le modèle d'analyse syntaxique: Améliorer le classement Google pour les mots clés généraux par rapport aux mots clés spécifiques
Bien que je reconnaisse qu’il pourrait y avoir un certain effet en déplaçant les balises d’en-tête, je demande, est-ce une bonne chose à faire? Sûrement pas! La façon dont les choses sont pondérées aujourd'hui n'est peut-être pas celle de demain. Le respect d’un format traditionnel garantit des résultats prévisibles, puisqu’un simple changement de pondération peut jeter votre site dans l’arrière-plan.
Voici un aperçu de la façon dont cela fonctionne: avantage du nom de domaine dans le référencement Ignorez le titre, ignorez le tout en haut de la réponse et accédez au point de vue des programmeurs.
Si vous lisez ces trois réponses, vous pourrez 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 très rapidement votre balise de titre et votre balise h1 en optimisant quelques balises d'en-tête inférieures. Un équilibre prudent est la clé.
Enfin, je vous avertirai de tous ces conseils de référencement en ligne de personnes qui ne sont pas ingénieurs. C'est un racket pour gagner de l'argent et rivaliser pour attirer votre attention. Comment fonctionnent les moteurs de recherche n'est pas un secret. C'est là-bas si vous savez où chercher. La plupart des experts en référencement ne sont pas du tout des experts dans le sens où ils ne peuvent pas vous dire comment fonctionne la technologie de recherche. Sans être un ingénieur pour Google ou Bing, nous ne pouvons jamais vraiment savoir exactement comment fonctionnent ces moteurs de recherche. Heureusement, Google nous en a assez dit (et en réalité, ils nous ont dit presque tout ce que nous devons savoir - et non, cela ne vient pas d’un gars du nom de Matt) - que si vous connaissez la science et les technologies, un ensemble assez raisonnable d’hypothèses peut être fait. De mon point de vue, la plupart des référenceurs sont plus faux que correct, alors que certains 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, en partant du principe que les consommateurs (comme les moteurs de recherche) s’attendent à ce qu’ils travaillent 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 également être importants pour les autres consommateurs et l’accessibilité.
J'utiliserai les en-têtes de rang approprié, car c'est ce que HTML5 encourage , mais c'est aussi possibilité d'utiliser h1 partout (si vous utilisez toujours le sectionnement éléments de contenu, le cas échéant).
Vous ne pouvez pas "appliquer" des en-têtes aux éléments header ou footer, car ils ne constituent pas un contenu de sectionnement (ils ne peuvent contenir que des en-têtes, mais cet en-tête ne serait pas limité à la portée de l'élément header/footer).
Chaque élément de contenu de sectionnement (section, article, nav, aside) et chaque élément racine de sectionnement (body, blockquote, etc.) peut avoir un titre appliqué.
Ces éléments contenu/racine de sectionnement et les éléments d'en-tête h1-h6 sont les seuls éléments qui importent pour aperçu du document .
Bien que chaque section "aspire" pour un en-tête, il est non obligatoire d'en fournir un (dans ce cas, il s'agit d'un en-tête "implicite", sans titre). Bien qu’il soit souvent utile d’en fournir un, il existe des cas où ce n’est pas vraiment nécessaire. Par exemple, si vous n’avez qu’une navigation, le fait de disposer de nav sans en-tête serait suffisant. Mais si votre site comporte plusieurs navigations, il peut être judicieux d’utiliser des en-têtes qui expliquent les différentes fins.
Dans votre approche 1, la body est une section sans titre (mais ce n’est que le cas parce que votre nav apparaît avant le premier élément d'en-tête, sinon h1 constituerait l'en-tête de l'ensemble du document).
Je ne pense pas qu’avoir une section sans titre body soit un bon choix. C’est la première entrée dans l’esquisse et, idéalement (mais pas nécessairement), tout ce qui suit est dans la portée de cette entrée.
Pour un site Web typique qui a une navigation globale, il est logique ( explication plus longue ) d'utiliser le nom du site pour l'en-tête de la section body, car la navigation globale appartient au site entier , 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 figurer dans 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 d'articles de blog, il est souvent logique d'utiliser un section contenant tous ces article au lieu d'avoir le article enfants directs du 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 de site si complexe qu'il a besoin d'éléments de sectionnement, il devrait être de nouveau au même niveau que le nav et le contenu principal (car il appartient au site, pas le 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 de commencer par le contenu principal. Il est possible de les permuter. Vous devez uniquement vous assurer que le h1 avec le nom du site passe avant tout autre. sections/titres.)