Tag zakotwiczenia wewnątrz <h1> lub <h1> wewnątrz tagu zakotwiczenia: co jest lepsze?

52

Próbuję użyć <h1>tagów na moim blogu do tytułu postu i napotkałem jeden problem. Tytuł jest linkowany.

Przypadek 1:

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

przypadek 2:

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

Który z nich jest lepszy pod względem SEO?

Sangram
źródło

Odpowiedzi:

57

Jeśli używasz HTML5 , wybierz jeden; są równoważne.
HTML5 pozwala na linki na poziomie bloków , ale w twoim przypadku nie ma konkretnego powodu, aby to zrobić, ponieważ jest tylko jeden element na poziomie bloków. Osobiście nie zrobiłbym tego tutaj, ponieważ umieszczenie <h1>znacznika na zewnątrz ułatwiłoby skanowanie w kodzie źródłowym.

Wszystko inne (XHTML, HTML4 itp.) I drugi jest po prostu źle. Nie byłby to prawidłowy kod, a na pewnym poziomie źle wpływa na optymalizację wyszukiwania [Wstaw standardowe oświadczenie o tym, jak bardzo każde przestępstwo naprawdę wpływa na wszystko itp.].

Su ”
źródło
Mam pytanie: <h1> cześć <h1> // 5 znaków <h1> <a> cześć </a> </h1> // 5 znaków lub Google czyta to jako 12 znaków?
hfarazm
11

Są takie same, jeśli chodzi o SEO. (Zwykle elementy poziomu bloku zawierają elementy wbudowane, a nie odwrotnie, więc powinieneś użyć pierwszego przykładu, ale nie wpłynie to na SEO).

John Conde
źródło
3
W rzeczywistości elementy wbudowane nie mogą zawierać elementów blokowych zgodnie ze specyfikacją HTML.
DisgruntledGoat
3
@DisgruntledGoat Niezupełnie. Doctype musi zostać rozliczone.
Su '
@Su ', które typy dokumentów pozwalają na elementy blokowe wewnątrz elementów wbudowanych?
DisgruntledGoat
4
@DisgruntledGoat HTML5 pozwala linkom (wcześniej tylko elementom wbudowanym) otaczać elementy bloków, takie jak nagłówki i znaczniki akapitów. W tym miejscu ważny jest doctype. Jeśli używasz HTML5, na pewno użyj wzorca <a><h1></h1></a>. W przeciwnym razie użyj tradycyjnego wzoru <h1><a></a></h1>. Google będzie zwracać uwagę na obie metody jednakowo, ale niektóre przeglądarki mogą nie działać dobrze z niestandardowym wzorcem, chyba że masz prawidłowy typ dokumentu (HTML5).
Tina Bell Vance
więc powyższe będzie miało zastosowanie również do nazwanych tagów zakotwiczenia. prawda? dobrze jest mieć <h1> <a name='intro'> Wprowadzenie </a> </h1> inne niż <a name='intro'> <h1> Wprowadzenie </h1> </a>.
Jayapal Chandran
6

Oba są poprawne w HTML5 , HTML pozwala blokować elementy w elementach wbudowanych. Nie ma to również wpływu na SEO, w obu przypadkach tekst jest zawijany w nagłówku, więc pozostaje mieć tę samą wartość.

To nie jest wybór ważności, ale preferencja w interfejsie użytkownika:

  • Jeśli owiniesz nagłówek wokół kotwicy, utworzysz dużą kotwicę, tylko tekst będzie klikalny.
  • Po owinięciu kotwicy wokół nagłówka można kliknąć całą linię.

Dałem ci przykład na jsFiddle.net

Martijn
źródło
4

Uważam, że w przypadku 2 hrefwstawka często jest niezgodna z resztą mojej strony. Ale to może być sposób, w jaki wyznaczam sobie marginesy .css. Dlatego też wolę przypadek 1.

Guy Thomas
źródło
1

To, co tu powiedziano, jest wnikliwe, dziękuję wszystkim. Podejmijmy jeszcze jeden krok: dodanie mikrodanych i tym podobnych do równania.

Powiedzmy, że mamy

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

konkurować z

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

Dla mnie „bez względu na wydajność” przykład 2 ma większy sens. Ponieważ link nigdy nie jest częścią nazwy. Różnica sprowadza się do różnicy między innerHTML i textContent, DOMwise. Patrząc na to poprzez innerHTML, kotwica przeszkadza. Gdyby tak było textContent, tagi zostałyby usunięte. To stawia także pytanie: innerHTML lub textContent.

Więc powiedziałbym, biorąc pod uwagę mikrodane, posiadanie kotwicy na zewnątrz jest czystsze.

na podstawie: http://thenewcode.com/617/How-To-Add-Microdata-To-Your-Blog

Sjerp van Wouden
źródło
0

<h1> <a href=""> xyz </a> </h1> Ten przykład jest poprawny.

rakonda
źródło
3
oba są poprawne w HTML5
Simon Hayter
0

Linków na poziomie bloków należy unikać dla celów SEO - z pyska konia: https://www.seroundtable.com/block-level-links-google-seo-16369.html

Aktualizacja: Na wynos z linku ...

Posiadanie jednego z konstruktów łączących, jak powiedzieli inni, jest w porządku do łączenia. Jednak do celów SEO powinieneś utrzymywać tekst kotwicy w czystości, aby Google mógł lepiej interpretować kotwicę i przypisać odpowiednie znaczenie.

John Mueller (analityk trendów dla webmasterów w Google) mówi dalej ...

Takie użycie byłoby dla nas w porządku (Google) - nadal wybieralibyśmy link i moglibyśmy powiązać z nim Twój tekst jako kotwicę. Jesteśmy bardzo elastyczni w przetwarzaniu HTML, więc prawdopodobnie możesz nawet użyć tego z HTML4. To powiedziawszy, im wyraźniejszy jest tekst kotwicy, tym łatwiej jest nam zrozumieć kontekst linku, więc niekoniecznie zawsze używałbym całego akapitu jako kotwicy dla wszystkich wewnętrznych linków.

TL; DR W przypadku SEO nie używaj linku na poziomie bloku.

Adders
źródło
Z nadzieją, że zaktualizujesz swoją odpowiedź, częściowo pokazuje, dlaczego oba przykłady NIE są równoważne, jak powiedzieli inni.
Rob
-1

Jeśli celem jest posiadanie dodatkowych klikalnych elementów w linku (takich jak obrazek itp.) I nadal sprawdzanie poprawności za pomocą HTML <5, możesz to zrobić w obie strony za pomocą 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>

w przeciwnym razie po prostu:

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

dodaj cursor:pointerdo css elementu rodzica, aby zakończyć lewę.

Lucian Davidescu
źródło
1
Wbudowany javascript? Czy wróciliśmy w 1999 roku? ;)
Martijn
Dlaczego miałbyś to zrobić? Wystarczy owinąć nagłówek w kotwicy. To po prostu zła praktyka
Martijn
Przeczytaj uważnie komentarz, tam znajdziesz swoją pisownię;) HTML 4.01 jest tak stary jak 1999. Gdy spróbujesz zweryfikować swoją sugestię na podstawie tego typu dokumentu, pojawi się następujący błąd: „[D] typ dokumentu ma nie zezwalaj na element „H1” tutaj (...) Jedną z możliwych przyczyn tego komunikatu jest próba umieszczenia elementu na poziomie bloku (takiego jak „<p>” lub „<table>”) w elemencie wbudowanym ( takich jak „<a>”, „<span>” lub „<font>”). ” Oczywiście nie trzeba absolutnie przejmować się tym, co mówią walidatorzy, stąd „jeśli” na samym początku komentarza.
Lucian Davidescu