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?

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

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

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

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.

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

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

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.

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