Ich habe versucht, <h1>Tags in meinem Blog für den Post-Titel zu verwenden, und bin auf ein Problem gestoßen. Titel ist verlinkt.

Fall 1:

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

Fall 2:

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

Welches ist in Bezug auf SEO besser?

Wenn Sie HTML5 verwenden , wählen Sie einfach eine aus. Sie sind gleichwertig.
HTML5 erlaubt Links auf Blockebene , aber in Ihrem Fall gibt es keinen besonderen Grund, dies zu tun, da es nur ein Element auf Blockebene gibt. Persönlich würde ich das hier nicht tun, da <h1>das außen angebrachte Tag das Scannen im Quellcode erleichtern würde.

Alles andere (XHTML, HTML4 usw.) und das zweite ist einfach falsch. Es wäre kein gültiger Code, und in gewisser Hinsicht ist dies schlecht für Ihre Suchoptimierung.

Sie sind die gleichen, was SEO betrifft. (Normalerweise enthalten Block-Level-Elemente Inline-Elemente und nicht umgekehrt. Sie sollten also das erste Beispiel verwenden, dies hat jedoch keine Auswirkungen auf die SEO.)

Sie sind beide korrekt in HTML5 , HTML erlaubt Block-Elemente in Inline-Elementen. Dies hat auch keine Auswirkung auf die Suchmaschinenoptimierung. In beiden Fällen wird der Text in die Überschrift eingeschlossen, sodass der Wert unverändert bleibt.

Es ist keine Wahl der Gültigkeit, sondern eine Präferenz in der Benutzeroberfläche:

• Wenn Sie die Kopfzeile um den Anker wickeln, erstellen Sie einen großen Anker. Nur der Text kann angeklickt werden.
• Wenn Sie den Anker um die Überschrift wickeln, kann auf die gesamte Zeile geklickt werden.

Ich habe dir ein Beispiel auf jsFiddle.net gemacht

Ich stelle fest, dass bei Fall 2 die hrefEinfügung häufig nicht mit dem Rest meiner Seite übereinstimmt. Aber auf diese Weise könnte ich meine Margen in meine festlegen .css. Daher würde ich Fall 1 bevorzugen.

Was hier gesagt wird, ist aufschlussreich, ich danke Ihnen allen. Nehmen wir es noch einmal auf: Hinzufügen von Mikrodaten und dergleichen in die Gleichung.

Sagen wir, wir haben

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

im Wettbewerb mit

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

Für mich ist Beispiel 2 "unabhängig von der Leistung" sinnvoller. Weil der Link niemals Teil des Namens ist. Der Unterschied läuft auf den Unterschied zwischen innerHTML und textContent, DOMwise, hinaus. Betrachtet man es mit innerHTML, so steht der Anker im Weg. Wenn textContent der richtige Weg wäre, würden Tags entfernt. Das wirft auch die Frage auf: innerHTML oder textContent.

Unter Berücksichtigung der Mikrodaten würde ich sagen, dass der Anker auf der Außenseite reiner ist.

basierend auf: http://thenewcode.com/617/How-To-Add-Microdata-To-Your-Blog

<h1> <a href=""> xyz </a> </h1> Dieses Beispiel ist richtig.

Block Level Links sollten aus SEO-Gründen vermieden werden - aus dem Maul des Pferdes: https://www.seroundtable.com/block-level-links-google-seo-16369.html

Update: Imbiss vom Link ...

Wie andere gesagt haben, ist es in Ordnung, eines der beiden Verknüpfungskonstrukte zu haben. Für SEO-Zwecke sollten Sie jedoch den Ankertext sauber halten, damit Google den Anker besser interpretieren und die entsprechende Relevanz zuweisen kann.

John Mueller (Webmaster Trends Analyst bei Google) fährt fort:

Diese Verwendung wäre in Ordnung für uns (Google) - wir würden den Link trotzdem übernehmen und könnten Ihren Text als Anker damit verknüpfen. Wir sind ziemlich flexibel beim Parsen von HTML, sodass Sie dies wahrscheinlich sogar mit HTML4 verwenden können. Das heißt, je klarer Sie Ihren Ankertext gestalten, desto einfacher ist es für uns, den Kontext des Links zu verstehen. Daher würde ich nicht immer einen ganzen Absatz als Anker für alle Ihre internen Links verwenden.

TL; DR Verwenden Sie für SEO keinen Link auf Blockebene.

Wenn der Zweck darin besteht, zusätzliche anklickbare Elemente im Link zu haben (wie ein Bild usw.) und dennoch mit HTML <5 zu validieren, können Sie dies mit Javascript auf beide Arten tun:

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

sonst einfach:

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

hinzufügen cursor:pointerzu CSS-Mutterelement der Trick komplett.