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?

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

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

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

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.

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

<h1> <a href=""> xyz </a> </h1> Cet exemple est correct.

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.

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.