H1 vs H2 vs Other pour le titre / logo du site Web et référencement
Il est courant que les développeurs front-end mettent le titre ou le logo du site Web dans l’étiquette H1 et le titre dans le H2. Mais la plupart du temps, le titre de la page/de l'article est plus important car il porte la valeur du contenu. Donc, ma question est quelle est la meilleure approche du point de vue sémantique et SEO. Exemples:
- logo - H1, titre - H1
- logo - H1, titre - H2
- logo - H2, titre - H1
- logo - autre tag, titre - H1
Fourni d'autres variantes si vous pensez qu'elles auront un plus grand effet.
D'habitude, je ne mets pas le logo ou le titre du site dans un H1. J'aime voir que chaque page est un document. Ce document concerne un sujet particulier, comme indiqué dans le titre de la page ainsi que dans le titre principal. Le site Web lui-même n'est que l'éditeur du document. Donc, sémantiquement, il est incorrect d’utiliser le logo ou le nom du site comme en-tête de chaque page. Les logos sont affichés bien en vue de rappeler à l'utilisateur où ils se trouvent et à des fins de personnalisation, mais ils ne font en réalité pas partie du contenu ou du document.
Je veux dire, lorsque vous regardez un reportage, vous pouvez voir un petit logo de chaîne d'information dans le coin, mais le reportage ne sera pas intitulé "CNN" ou "BBC News". Le titre portera sur l'histoire, pas sur le réseau qui publie l'histoire. De même, lorsque vous lisez un magazine, seul le titre de l'article est utilisé dans l'en-tête, pas le nom de la publication.
Il est également sémantiquement incorrect d’utiliser une balise H1 pour le logo/nom du site et une autre pour le titre du document. Les en-têtes définissent la structure hiérarchique du contenu de la page; en utiliser une pour le nom du site et une autre pour le titre du document revient à dire, cette page comporte 2 sections principales: "mydomain.com" et "nous contacter".
Voir la page 37 du Report Report de Google == document:
La plupart des pages principales de produits ont la possibilité d'utiliser une balise
<h1>, comme dans l'exemple ci-dessus, mais elles n'utilisent actuellement que d'autres balises de titre (<h3>dans ce cas) ou un style de police plus grand. Bien que le style de votre texte pour qu'il apparaisse plus grand puisse permettre la même présentation visuelle, il ne donne pas au moteur de recherche la même signification sémantique qu'une balise<h1>. Le nom du produit et/ou quelques mots sur ses fonctionnalités sont intéressants dans une balise<h1>pour la page principale du produit.
D'après l'analyse de ses offres par Google, je suis parvenu à la conclusion que Google s'attend à ce qu'une valeur unique, spécifique à la page apparaisse dans un H1 (l'illustration dans la doc liée en est une illustration).
Voici une bonne justification: Votre logo est une image, pas un <h1>
Sémantiquement, <h1> devrait être utilisé pour le titre de la page, et le titre de la page devrait être unique par page. Votre logo ou nom de site n'est pas le titre de la page (à l'exception peut-être de la page d'accueil).
Le nom de votre logo/site doit être en clair, éventuellement avec l’ID de 'titre'. Ou bien, la balise <header> si vous utilisez HTML5.
OMI, il devrait y avoir un seul H1 sur la page. Et le H1 doit toujours toujours précéder le H2 - pour maintenir une hiérarchie correcte de votre contenu.
Le logo est souvent répété sur chaque page et, comme vous le dites, sur la plupart des pages, le titre est presque toujours plus important.
Sur la page d'accueil, je considérerais d'utiliser:
logo/titre - H1 [ titre - H2]
Bien que sur votre page d’accueil, le logo pourrait bien être votre titre.
Cependant, sur toutes les pages suivantes , je choisirais:
logo - autre balise, titre - H1
Même en ayant le logo comme image d’arrière-plan, le cas échéant.
Ce que vous recherchez vraiment dans votre balise H1 est le titre de la page ou ce qui rend cette page unique. Si vous utilisez une image, vous devez le faire avec une méthode de remplacement pour la dégradabilité:
<style>
h1{background: url('imagePathHere.gif');width:60px;height:10px;}
h1 span{display:none}
</style>
<h1><span>Unique Page Title</span></h1>
De cette façon, vous pouvez définir une image à afficher pour le H1 (souvent utilisée à mauvais escient comme zone du logo) tout en conservant un contenu intéressant pour les personnes utilisant des expériences Internet dégradées. Cela rend également votre valeur de référencement heureuse.
C'est une question formidable, en raison des pratiques (et des modèles) qui existent.
Personnellement, j'aime bien me référer à la logique "Esquisse 101", en tenant compte de ce qui suit:
H1 est comme un titre (vous aimez certainement compléter votre titre HTML) et il ne devrait y en avoir qu'un par page, tout comme une page n'a qu'un seul titre.
H2 ressemble un peu aux chiffres romains dans le contour: I., II., III., Etc.
H3 serait l'équivalent de A, B., C.
Souvent, il est difficile d'appliquer concrètement cette logique sur une page Web - il y a tellement de bits d'informations accidentels qui ne sont tout simplement pas intégrés dans cette hiérarchie. Cependant, si vous vous asseyez et essayez de décomposer avec cette logique, j'estime qu'il y a un avantage à la discipline.
Je suis h1 pour le titre principal. Et le titre principal est décoré du nom du site ou, comme vous l'appelez, du logo. Voici le point - dans l'en-tête du site Web, le logo n'est pas réellement un logo, c'est l'en-tête du site illustré. Les concepteurs aiment juste le concevoir comme logo.
Quel est le problème avec LOGO -> H1?
<div>Google</div>
<h1>About Us</h1>
Maintenant, étant donné que h1 est la section la plus importante car elle indique au visiteur de quoi il s'agit, le visiteur ne peut pas comprendre la page, car h1 est trop spécifique. À propos de qui?
<h1>Google</h1>
<h2>About Us</h2>
Cette page concerne Google. Voici la section sur nous. Voir - il n'y a pas de question? Tout est clair.
Deuxième point.
Structure de la page. Si vous placez l'en-tête du site dans div ou p, il n'y a rien à lui associer.
<p>Google</p>
<h1>About us</h1>
Comment associer "À propos de U" à Google si h1 vient après? Parce que tout ce qui vient APRÈS H1 lui est associé, pas ce qui est devenu avant.
<h1>Google</h1>
<h2>About Us</h2>
"À propos de nous" appartient à Google. Pas de questions.
Troisième point.
HTML est la langue pour décrire les informations. Par conséquent, vous n’affichez pas d’information, vous la décrivez. Et chaque page est indépendante. Par conséquent, vous décrivez une page car il n'y a pas d'association entre les pages. Juste des liens qui lient des pages individuelles.
<p>Google</p>
<h1>About us</h1>
Cette page est à propos de nous. Qui/qu'est-ce que c'est? Pas clair. Il décrit simplement quelque chose appelé "À propos de nous".
<h1>Google</h1>
<h2>About Us</h2>
Ce site décrit google. Et il y a une section à propos de nous. Nous = très probablement Google, car la structure le décrit de cette façon.
J'espère que j'ai fait mon point :)
PS! Vous ne pouvez pas utiliser h2 - h1 - h3 car c'est illogique, donc un gros échec. Ce n’est pas parce que W3C ne dit pas que ce n’est pas autorisé, que cela est valide. C'est illogique, réfléchis-y.
Votre logo n'a pas besoin d'être imbriqué dans un en-tête - une simple image liée dans la header suffit. Mais le titre de votre site et le titre de la page/de l'article doivent être <h1>. Cet article est informatif: La vérité sur plusieurs balises H1 à l’ère HTML5 .
Logo en tant que balise h2?
Je parcourais simplement SitePoint (www.sitepoint.com), un blog WordPress avec un mélange de pages et de blogs classiques. En général, j'ai constaté qu'ils avaient le titre de la page comme balise h1 et le logo défini comme h2. Vous pouvez le voir sur une page de blog telle que www.blogs.sitepoint.com/category/design/. En naviguant sur le site, vous trouverez différentes configurations. Je ne pouvais souvent pas trouver la balise h1, par exemple à la page principale du produit (http://products.sitepoint.com/). Bien qu'à partir de cette page, si vous cliquez sur un produit en particulier pour plus d'informations www.sitepoint.com/books/design2/, vous constaterez à nouveau que h1 est le titre de la page, h2 est le logo. Une page Web typique ressemble au blog (voir www.sitepoint.com/help/). Dans ce cas, les sujets de la FAQ sont tous des tags h2.
Tom Rogers