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

31

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.

Ilian Iliev
la source

Réponses:

37

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".

Lèse majesté
la source
Je voudrais soutenir la réponse de Chris Conway. Il est inutile d'ajouter un H1 pour chaque titre de site sur 100 pages. Nous voulons que les sites Web soient trouvés pour les mots clés à l'intérieur des titres de page et non dans les titres de site. De plus, si vous jetez un œil à tous les grands sites Web (cnn.com, amazon.com, ebay.com), aucun d'entre eux n'a de balise h1 pour le titre du site. Jetez également un œil au code du blog de Google pour les webmasters et vous verrez qu'il n'y a pas de balise H1 pour le titre du site et le titre de la page est H2. Donc, je suggère d'utiliser une balise div ou un titre span avec une classe pour le titre du site et H1 ou H2 pour le titre de la page.
Nicolas Guérinet
1
@ NicolasGuérinet: Je ne sais pas si cela a changé depuis que vous avez posté, mais eBay a en fait son logo dans un h1, mais uniquement sur sa page principale . Accédez à une liste spécifique et le titre de la liste est maintenant dans le h1.
Nelson Rothermel
22

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).

danlefree
la source
Réponse impressionnante et très utile.
5

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.

Chèvre mécontente
la source
1
Je n'aime pas utiliser de balise <img /> sauf pour le contenu. Un logo de site Web qui se répète dans l'en-tête de toutes les pages n'est pas un contenu mais un détail de mise en page.
cherouvim
1
@cherouvim: une image ne doit pas nécessairement être une <img>balise, elle peut être un arrière-plan, mais pas un arrière-plan sur une <h1>balise. Cependant, comme le fait valoir l'article lié, votre logo peut être considéré comme du contenu de page.
DisgruntledGoat
4

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.

MrWhite
la source
1
Étant donné que la plupart des sites utilisent la même mise en page pour la page d'accueil et les pages intérieures, je préfère personnellement la deuxième solution
Ilian Iliev
@llian Oui, si vous deviez choisir l'une ou l'autre pour toutes les pages, la deuxième solution serait préférable. Cependant, il est courant d'incorporer le titre / logo du site Web dans le titre de la page d'accueil - quelle page doit être trouvée lorsque quelqu'un recherche spécifiquement le titre / la société / le logo du site Web? La page d'accueil?
MrWhite
3

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.

XOPJ
la source
2

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.

Chris Adragna
la source
1

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.

MrWhite
la source
0

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

John Conde
la source