H1 vs H2 vs Other pour le titre / logo du site Web et le référencement

Il est courant pour les développeurs frontaux de mettre le titre ou le logo du site Web dans la balise H1 et le titre dans H2. Mais la plupart du temps, le titre de la page / de l'article est plus important car il porte la valeur du contenu. Ma question est donc 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 effet plus important.

Je ne mets généralement pas le logo ou le titre du site dans un H1. J'aime voir les choses comme si chaque page était un document. Ce document concerne un sujet particulier, comme en témoigne le titre de la page et également l'en-tête 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 principal de chaque page. Les logos sont affichés bien en vue pour rappeler à l'utilisateur où ils se trouvent et à des fins de marque, mais ils ne font pas réellement partie du contenu ou du document.

Je veux dire, lorsque vous regardez un reportage, vous pouvez voir un petit logo de chaîne de nouvelles dans le coin, mais le reportage ne va pas être 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 nom du logo / site et une pour le titre du document. Les titres 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 que cette page comporte 2 sections principales: "mondomaine.com" et "contactez-nous".

Consultez la page n ° 37 du document Google Report Card de Google :

La plupart des pages principales du produit ont la possibilité d'utiliser une <h1>balise, comme 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. Tout en stylisant votre texte pour qu'il apparaisse plus grand, vous obtiendrez la même présentation visuelle, mais cela ne donne pas au moteur de recherche la même signification sémantique qu'une <h1>balise. Le nom du produit et / ou quelques mots sur ses fonctionnalités sont super d'avoir dans une <h1>balise pour la page principale du produit.

Selon la propre analyse de Google de ses offres, j'arriverais à la conclusion que Google s'attend à ce qu'une valeur unique, spécifique à la page, apparaisse dans un H1 (l'illustration dans le document lié l'illustre).

Voici une bonne justification: votre logo est une image, pas un <h1>

Sémantiquement, <h1>doit être utilisé pour le titre de la page et le titre de la page doit être unique par page. Votre logo ou nom de site n'est pas le titre de la page (à part peut-être la page d'accueil).

Le nom de votre logo / site doit être dans une div simple, peut-être avec l'ID de «titre». Ou, la <header>balise si vous utilisez HTML5.

OMI, il ne devrait y avoir qu'un seul H1 sur la page. Et le H1 devrait 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, j'envisagerais d'utiliser:
logo / title - H1 [, title - 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 si le logo est utilisé comme image de fond, le cas échéant.

Ce que vous recherchez vraiment dans votre balise H1, c'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 secours 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 (que les gens utilisent souvent abusivement comme zone de logo) et avoir toujours un bon contenu à l'intérieur pour les personnes utilisant des expériences Internet dégradées. Cela rend également votre valeur SEO heureuse.

C'est une question formidable, en raison des pratiques (et des modèles) qui existent.

Personnellement, j'aime me référer à la logique "Outlining 101", compte tenu 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 est un peu comme les chiffres romains dans le contour: I., II., III., Etc.

H3 serait l'équivalent général de A., B., C.

Souvent, l'utilisation pratique de cette logique est difficile à appliquer exactement sur une page Web - il y a tellement de bits d'information accidentels qui ne viennent tout simplement pas dans cette hiérarchie. Cependant, si vous vous asseyez et essayez de le décomposer avec cette logique, je pense qu'il y a un avantage à la discipline.

Je suis h1pour le titre principal. Et le titre principal est le nom du site décoré, ou comme vous l'appelez, le 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, comme h1c'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 elle h1est trop spécifique. À propos de qui?

<h1>Google</h1>
<h2>About Us</h2>

Cette page concerne Google. Voici la section qui nous concerne. Vous voyez, cela ne fait aucun doute? Tout est clair.

Deuxième point.

Structure de la page. Si vous placez l'en-tête principal du site en div ou p, il n'y a rien à associer.

<p>Google</p>
<h1>About us</h1>

Comment puis-je associer "About U" à Google si h1vient après? Parce que tout ce qui vient APRÈS y H1est associé, pas ce qui se passe avant.

<h1>Google</h1>
<h2>About Us</h2>

"À propos de nous" appartient à Google. Pas de questions.

Troisième point.

HTML est le langage pour décrire les informations. Par conséquent, vous n'affichez pas d'informations, vous les décrivez. Et chaque page est indépendante. Par conséquent, vous décrivez une page car il n'y a aucune association entre les pages. Juste des liens qui relient des pages individuelles.

<p>Google</p>
<h1>About us</h1>

CETTE page est à propos de nous. Qui / quoi c'est? Pas clair. Il décrit simplement quelque chose appelé "A propos de nous".

<h1>Google</h1>
<h2>About Us</h2>

Ce site décrit google. Et il y a une section À propos de nous. Us = très probablement google, car la structure le décrit de cette façon.

J'espère avoir fait mon point :)

PS! Vous ne pouvez pas utiliser h2- h1- h3car il est illogique, donc un gros échec. Le fait que le w3c n'ait pas dit qu'il n'est pas autorisé ne le rend pas valide. C'est illogique, pensez-y.

Logo en tant que balise h2?

Je parcourais juste SitePoint (www.sitepoint.com) qui est un blog WordPress avec un mélange de pages régulières et de blogs. En général, j'ai trouvé qu'ils ont le titre de la page comme balise h1 et le logo défini comme h2. Vous pouvez le voir sur une page de blog comme www.blogs.sitepoint.com/category/design/. En parcourant le site, vous trouverez différentes configurations. Souvent, je ne pouvais pas trouver la balise h1, par exemple sur la page principale du produit (http://products.sitepoint.com/). Bien qu'à partir de cette page, si vous cliquez sur un produit particulier pour plus d'informations www.sitepoint.com/books/design2/, vous trouvez à nouveau que h1 est le titre de la page, h2 est le logo. Une page Web typique est similaire au blog (voir www.sitepoint.com/help/). Dans ce cas, les sujets de la FAQ sont tous des balises h2.

Tom Rogers

Votre logo n'a pas besoin d'être imbriqué dans un titre - une simple image liée dans le headersuffit. Mais le titre de votre site et le titre de la page / de l'article devraient l'être <h1>. Cet article est informatif: la vérité sur plusieurs balises H1 à l'époque HTML5 .