Tag jangkar di dalam <h1> atau <h1> di dalam tag jangkar: mana yang lebih baik?

52

Saya mencoba menggunakan <h1>tag di blog saya untuk judul posting dan menemukan satu masalah. Judul hyperlink.

Kasus 1:

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

kasus 2:

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

Mana yang lebih baik dari segi SEO?

Sangram
sumber

Jawaban:

57

Jika Anda menggunakan HTML5 , pilih saja; mereka setara.
HTML5 memang memungkinkan tautan level blok , tetapi dalam kasus Anda tidak ada alasan khusus untuk melakukannya, karena hanya ada satu elemen level blok. Secara pribadi, saya tidak akan melakukannya di sini, karena memiliki <h1>tag di luar akan membuatnya lebih mudah untuk memindai kode sumber.

Hal lain (XHTML, HTML4, dll) dan yang kedua jelas-jelas salah. Itu bukan kode yang valid, dan pada tingkat tertentu itu buruk untuk optimasi pencarian Anda [Masukkan penafian standar tentang seberapa banyak pelanggaran tunggal yang benar-benar memengaruhi apa pun, dll.].

Su '
sumber
Saya punya pertanyaan: <h1> halo <h1> // 5 karakter <h1> <a> halo </a> </h1> // 5 karakter atau google membacanya sebagai 12 karakter?
hfarazm
11

Mereka sama sejauh menyangkut SEO. (Biasanya elemen tingkat blok mengandung elemen sebaris dan bukan sebaliknya, jadi Anda harus menggunakan contoh pertama tetapi tidak akan memengaruhi SEO).

John Conde
sumber
3
Sebenarnya elemen sebaris tidak boleh mengandung elemen blok sesuai dengan spesifikasi HTML.
DisgruntledGoat
3
@ DisgruntledGoat Tidak cukup. Doctype perlu diperhitungkan.
Su '
@ Su 'mana yang memungkinkan elemen blok dalam elemen inline?
DisgruntledGoat
4
@DisgruntledGoat HTML5 memungkinkan tautan (sebelumnya hanya elemen sebaris) untuk mengelilingi elemen blok seperti header dan tag paragraf. Di sinilah tipe dokumen penting. Jika Anda menggunakan HTML5, tentu saja gunakan polanya <a><h1></h1></a>. Jika tidak, gunakan pola tradisional <h1><a></a></h1>. Google akan memperhatikan kedua metode ini secara sama, tetapi beberapa browser mungkin tidak cocok dengan pola non-standar KECUALI Anda memiliki DOCTYPE yang benar (HTML5).
Tina Bell Vance
jadi di atas akan berlaku untuk tag anchor bernama juga. bukan? ada baiknya memiliki <h1> <a name='intro'> Pendahuluan </a> </h1> selain dari <a name='intro'> <h1> Pendahuluan </h1> </a>.
Jayapal Chandran
6

Keduanya benar dalam html5 , html memungkinkan elemen blok dalam elemen sebaris. Ini juga tidak berpengaruh pada SEO, kedua kasus teks dibungkus dalam pos, sehingga tetap memiliki nilai yang sama.

Ini bukan pilihan validitas, tetapi preferensi di Antarmuka Pengguna:

  • Jika Anda membungkus tajuk di sekitar jangkar, Anda membuat jangkar besar, hanya teks yang bisa diklik.
  • Saat Anda membungkus jangkar di sekitar tajuk, seluruh baris dapat diklik.

Saya telah membuat Anda contoh di jsFiddle.net

Martijn
sumber
4

Saya menemukan bahwa dengan Kasus 2, hrefsisipan sering tidak sesuai dengan halaman saya yang lain. Tapi itu bisa jadi cara saya mengatur margin saya di saya .css. Jadi saya akan mendukung Kasus 1.

Guy Thomas
sumber
1

Apa yang dikatakan di sini adalah wawasan, terima kasih semua. Mari kita ambil satu tingkat lagi: menambahkan mikrodata dan semacamnya ke dalam persamaan.

Katakanlah kita punya

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

bersaing dengan

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

Bagi saya, 'terlepas dari kinerjanya', contoh 2 lebih masuk akal. Karena tautan tidak pernah menjadi bagian dari nama. Perbedaan bermuara pada perbedaan antara innerHTML dan textContent, DOMwise. Melihatnya melalui innerHTML, jangkar menghalangi. Jika textContent adalah caranya, tag akan dilucuti. Jadi itu juga mengajukan pertanyaan: innerHTML atau textContent.

Jadi saya akan mengatakan, dengan mempertimbangkan microdata, memiliki jangkar di luar lebih murni.

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

Sjerp van Wouden
sumber
0

<h1> <a href=""> xyz </a> </h1> Contoh ini benar.

rakonda
sumber
3
keduanya benar di bawah HTML5
Simon Hayter
0

Tautan level blok harus dihindari untuk keperluan SEO - dari mulut kuda: https://www.seroundtable.com/block-level-links-google-seo-16369.html

Perbarui: Takeaways dari tautan ...

Memiliki tautan yang menghubungkan, seperti yang dikatakan orang lain, boleh saja untuk menghubungkan. Namun, untuk keperluan SEO, Anda harus menjaga agar anchor text tetap bersih sehingga Google dapat menginterpretasikan anchor dengan lebih baik dan menetapkan relevansi yang sesuai.

John Mueller (Analis Tren Webmaster di Google) selanjutnya mengatakan ...

Penggunaan itu tidak masalah bagi kami (Google) - kami masih akan mengambil tautannya, dan akan dapat mengaitkan teks Anda sebagai jangkar dengan itu. Kami cukup fleksibel dengan parsing HTML, jadi Anda mungkin bisa menggunakan ini dengan HTML4. Yang mengatakan, semakin jelas Anda membuat teks jangkar Anda, semakin mudah bagi kita untuk memahami konteks tautan, jadi saya tidak akan selalu menggunakan seluruh paragraf sebagai jangkar untuk semua tautan internal Anda.

TL; DR Untuk SEO, jangan gunakan tautan tingkat blok.

Adders
sumber
Dengan harapan Anda akan memperbarui jawaban Anda, itu menunjukkan, sebagian, mengapa kedua contoh TIDAK setara dengan yang dikatakan orang lain.
Rob
-1

Jika tujuannya adalah untuk memiliki elemen tambahan yang dapat diklik di dalam tautan (seperti gambar, dll.) Dan masih memvalidasi dengan html <5, Anda dapat melakukannya dengan 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>

selain itu, cukup:

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

tambahkan cursor:pointerke css elemen induk untuk membuat triknya lengkap.

Lucian Davidescu
sumber
1
Javascript sebaris? Apakah kita kembali pada tahun 1999? ;)
Martijn
Mengapa Anda melakukan ini? Hanya membungkus header di jangkar. Ini hanya praktik buruk
Martijn
Baca komentar dengan seksama, Anda akan menemukan jawaban Anda dieja di sana;) Html 4.01 sebenarnya setua tahun 1999. Ketika Anda mencoba untuk memvalidasi saran Anda di bawah doctype Anda akan mendapatkan kesalahan berikut: "[D] jenis dokumen tidak tidak mengizinkan elemen "H1" di sini (...) Salah satu penyebab yang mungkin untuk pesan ini adalah bahwa Anda telah berusaha untuk meletakkan elemen level blok (seperti "<p>" atau "<table>") di dalam elemen inline ( seperti "<a>", "<span>", atau "<Tome"). " Tentu saja, seseorang tidak harus benar-benar peduli tentang apa yang dikatakan validator, karena itu "jika" di awal komentar.
Lucian Davidescu