Anchor-Tag innerhalb von <h1> oder <h1> innerhalb von Anchor-Tag: Was ist besser?

52

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?

Sangram
quelle

Antworten:

57

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.

Su '
quelle
Ich habe eine Frage: <h1> Hallo <h1> // 5 Zeichen <h1> <a> Hallo </a> </ h1> // 5 Zeichen oder Google liest es als 12 Zeichen?
hfarazm
11

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

John Conde
quelle
3
Tatsächlich dürfen Inline-Elemente keine Blockelemente gemäß der HTML-Spezifikation enthalten.
DisgruntledGoat
3
@ DisgruntledGoat Nicht ganz. Doctype muss berücksichtigt werden.
,
@Su 'Welche Doctypes erlauben Blockelemente innerhalb von Inline-Elementen?
DisgruntledGoat
4
Mit @DisgruntledGoat HTML5 können Links (früher nur Inline-Elemente) Blockelemente wie Überschriften und Absatz-Tags umgeben. Hier ist Doctype wichtig. Wenn Sie HTML5 verwenden, verwenden Sie auf jeden Fall das Muster <a><h1></h1></a>. Ansonsten verwenden Sie das traditionelle Muster von <h1><a></a></h1>. Google achtet gleichermaßen auf beide Methoden, aber einige Browser spielen möglicherweise nicht gut mit dem nicht standardmäßigen Muster zusammen, WENN Sie nicht den richtigen Doctype (HTML5) haben.
Tina Bell Vance
Daher gilt das Obige auch für benannte Ankertags. ist es nicht? Es ist gut, <h1> <a name='intro'> Einführung </a> </ h1> zu haben, außer <a name='intro'> <h1> Einführung </ h1> </a>.
Jayapal Chandran
6

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

Martijn
quelle
4

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.

Guy Thomas
quelle
1

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

Sjerp van Wouden
quelle
0

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

Rakonda
quelle
3
beide stimmen unter HTML5
Simon Hayter
0

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.

Addierer
quelle
In der Hoffnung, dass Sie Ihre Antwort aktualisieren, wird zum Teil gezeigt, warum beide Beispiele NICHT äquivalent sind, wie andere gesagt haben.
Rob
-1

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.

Lucian Davidescu
quelle
1
Inline Javascript? Sind wir 1999 zurück? ;)
Martijn
Warum würdest du das überhaupt tun? Wickeln Sie einfach den Header in den Anker. Dies ist nur eine schlechte Übung
Martijn
Wenn Sie den Kommentar sorgfältig lesen, finden Sie Ihre Antwort genau dort;) Html 4.01 ist tatsächlich so alt wie 1999. Wenn Sie versuchen, Ihren Vorschlag unter diesem Doctype zu validieren, wird der folgende Fehler angezeigt: "[D] ocument type does Element "H1" hier nicht zulassen (...) Eine mögliche Ursache für diese Meldung ist, dass Sie versucht haben, ein Element auf Blockebene (z. B. "<p>" oder "<table>") in ein Inline-Element einzufügen ( wie "<a>", "<span>" oder "<font>"). " Natürlich muss man sich nicht unbedingt darum kümmern, was die Prüfer sagen, daher das "Wenn" ganz am Anfang des Kommentars.
Lucian Davidescu