Balise d'ancrage à l'intérieur de <h1> ou <h1> à l'intérieur de la balise d'ancrage: quel est le meilleur?


52

J'essaie d'utiliser des <h1>balises sur mon blog pour le titre de l'article et j'ai rencontré un problème. Le titre est en hyperlien.

Cas 1:

<h1> <a href=""> xyz </a> </h1>

cas 2:

<a href=""> <h1> xyz</h1> </a> 

Lequel est le meilleur en termes de référencement?

Réponses:


57

Si vous utilisez HTML5 , il vous suffit d'en choisir un. ils sont équivalents.
HTML5 autorise les liens au niveau des blocs , mais dans votre cas, il n'y a aucune raison particulière de le faire, car il n'y a qu'un seul élément au niveau des blocs. Personnellement, je ne le ferais pas ici, car la <h1>balise à l'extérieur faciliterait l'analyse du code source.

Tout le reste (XHTML, HTML4, etc.) et le second est tout simplement faux. Ce ne serait pas un code valide, et à un certain niveau, ce serait mauvais pour l'optimisation de votre recherche [Insérer une clause de non-responsabilité standard concernant l'impact réel d'une infraction unique, etc.].


J'ai une question: <h1> bonjour <h1> // 5 caractères <h1> <a> bonjour </a> </ h1> // 5 caractères ou Google le lit-il en tant que 12 caractères?
hfarazm

11

Ils sont les mêmes en ce qui concerne le référencement. (Généralement, les éléments de niveau bloc contiennent des éléments en ligne et non l'inverse, vous devez donc utiliser le premier exemple, mais cela n'affectera pas le référencement).


3
En réalité, les éléments en ligne ne doivent pas contenir d’éléments de bloc conformément à la spécification HTML.
DisgruntledGoat

3
@DisgruntledGoat Pas tout à fait. Doctype doit être pris en compte.
dimanche

@Su 'quels doctypes autorisent les éléments de bloc à l'intérieur des éléments en ligne?
DisgruntledGoat

4
@DisgruntledGoat HTML5 permet aux liens (auparavant uniquement des éléments en ligne) d'encercler des éléments de bloc tels que les en-têtes et les balises de paragraphe. C'est là que doctype est important. Si vous utilisez HTML5, utilisez ce modèle <a><h1></h1></a>. Sinon, utilisez le modèle traditionnel de <h1><a></a></h1>. Google accordera une attention égale aux deux méthodes, mais certains navigateurs risquent de ne pas bien fonctionner avec le modèle non standard à moins que vous n'ayez le doctype correct (HTML5).
Tina Bell Vance

ce qui précède s'appliquera également aux balises d'ancrage nommées. n'est ce pas? il est bon d'avoir <h1> <a name='intro'> Introduction </a> </ h1> autre que <a name='intro'> <h1> Introduction </ h1> </a>.
Jayapal Chandran

6

Ils sont tous les deux corrects en html5 , html permet de bloquer des éléments dans des éléments en ligne. Cela n'a pas non plus d'effet sur le référencement, dans les deux cas, le texte est placé dans l'en-tête, il doit donc avoir la même valeur.

Ce n'est pas un choix de validité, mais une préférence dans l'interface utilisateur:

  • Si vous enroulez l'en-tête autour de l'ancre, vous créez une grande ancre, seul le texte sera cliquable.
  • Lorsque vous enroulez l'ancre autour de l'en-tête, toute la ligne devient cliquable.

Je t'ai fait un exemple sur jsFiddle.net


4

Je trouve que dans le cas 2, l' hrefinsertion est souvent en décalage par rapport au reste de ma page. Mais c’est peut-être ainsi que j’ai fixé mes marges dans mes .css. Je suis donc favorable au cas 1.


1

Ce que l’on dit ici, c’est perspicace, merci à tous. Reprenons un peu plus loin: l’ajout de microdonnées et autres dans l’équation.

Disons que nous avons

<h1 itemprop="name"><a href="http://goldenage.com/maths.html"
itemprop="url">Mathematics in The Muslim Golden Age</a></h1>

en concurrence avec

<a href="http://goldenage.com/maths.html" itemprop="url"><h1
itemprop="name">Mathematics in The Muslim Golden Age</h1></a>

Pour moi, «quelle que soit la performance», l'exemple 2 a plus de sens. Parce que le lien ne fait jamais partie du nom. La différence se résume à la différence entre innerHTML et textContent, DOMwise. En le regardant à travers innerHTML, l'ancre se met en travers du chemin. Si textContent était le moyen, les balises seraient supprimées. Cela pose donc également la question: innerHTML ou textContent.

Je dirais donc, en tenant compte des microdonnées, que l’ancre à l’extérieur est plus pure.

basé sur: http://thenewcode.com/617/How-To-Add-Microdata-To-Your-Blog



0

Les liens au niveau des blocs doivent être évités à des fins de référencement - de la bouche du cheval: https://www.seroundtable.com/block-level-links-google-seo-16369.html

Mise à jour: À emporter du lien ...

Avoir l'une ou l'autre construction de liaison, comme d'autres l'ont dit, convient très bien pour la liaison. Toutefois, à des fins de référencement, vous devez garder le texte de l'ancre propre afin que Google puisse mieux interpréter l'ancre et attribuer la pertinence appropriée.

John Mueller (analyste des tendances pour les webmasters chez Google) ajoute ...

Cette utilisation nous conviendrait (Google) - nous choisirions toujours le lien et pourrions associer votre texte à une ancre. Nous sommes assez flexibles avec l'analyse HTML, vous pouvez donc probablement même l'utiliser avec HTML4. Cela dit, plus votre texte d'ancrage est clair, plus il nous est facile de comprendre le contexte du lien. Par conséquent, je n'utiliserais pas toujours un paragraphe entier comme ancre pour tous vos liens internes.

TL; DR Pour le référencement, n'utilisez pas de lien de niveau bloc.


En espérant que vous mettriez à jour votre réponse, cela montre, en partie, pourquoi les deux exemples ne sont PAS équivalents comme l'ont dit d'autres.
Rob

-1

Si le but est d’avoir des éléments cliquables supplémentaires dans le lien (comme une image, etc.) et de toujours valider avec html <5, vous pouvez l’utiliser dans les deux sens avec javascript:

<div onclick="if (this.getElementsByTagName('a')[0]) location=this.getElementsByTagName('a')[0].href;">
<img src="/foo" alt="" />
<h1>
<a href="#">
linked-heading
</a>
</h1>
</div>

sinon, simplement:

<h1 onclick="if (this.getElementsByTagName('a')[0]) location=this.getElementsByTagName('a')[0].href;">
<a href="#">
linked-heading
</a>
</h1>

ajoutez cursor:pointerau fichier css de l'élément parent pour compléter le tour.


1
JavaScript en ligne? Sommes-nous de retour en 1999? ;)
Martijn

Pourquoi voudriez-vous même faire cela? Juste envelopper l'en-tête dans l'ancre. Ceci est juste une mauvaise pratique
Martijn

Lisez attentivement le commentaire, votre réponse sera alors orthographiée;) Le code HTML 4.01 est en fait aussi ancien que 1999. Lorsque vous essayez de valider votre suggestion sous ce doctype, vous obtenez le message d'erreur suivant: "Le type de document [D] pas autoriser l'élément "H1" ici (...) Une cause possible de ce message est que vous avez tenté de placer un élément de niveau bloc (tel que "<p>" ou "<table>") à l'intérieur d'un élément en ligne ( tels que "<a>", "<span>" ou "<font>"). " Bien sûr, il n'est pas absolument nécessaire de se préoccuper de ce que disent les validateurs, d'où le "si" au tout début du commentaire.
Lucian Davidescu le
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.