Ini adalah praktik umum bagi pengembang front-end untuk menempatkan judul atau logo situs web dalam tag H1 dan judul dalam H2. Tetapi sebagian besar waktu judul halaman / artikel lebih penting karena membawa nilai konten. Jadi pertanyaan saya adalah apa pendekatan terbaik dari sudut pandang semantik dan SEO. Contoh:
Menyediakan varian lain jika Anda berpikir mereka akan memiliki efek yang lebih besar.
Jawaban:
Saya biasanya tidak memasukkan logo atau judul situs dalam H1. Cara saya suka melihatnya adalah bahwa setiap halaman adalah dokumen. Dokumen itu adalah tentang subjek tertentu, seperti tercermin dalam judul halaman dan juga judul utama. Situs web itu sendiri hanyalah penerbit dokumen. Jadi, secara semantik, tidak benar menggunakan logo atau nama situs sebagai tajuk utama setiap halaman. Logo ditampilkan dengan jelas untuk mengingatkan pengguna di mana mereka berada dan untuk tujuan pencitraan merek, tetapi sebenarnya bukan bagian dari konten atau dokumen.
Maksud saya, ketika Anda menonton berita, Anda mungkin melihat logo saluran berita kecil di sudut, tetapi berita itu tidak akan berjudul "CNN" atau "Berita BBC". Judulnya adalah tentang cerita, bukan jaringan yang menerbitkan cerita. Demikian juga, ketika Anda membaca majalah, hanya judul artikel yang digunakan dalam tajuk, bukan nama publikasi.
Secara semantik juga tidak benar untuk menggunakan tag H1 untuk logo / nama situs dan satu untuk judul dokumen. Judul menentukan struktur hirarkis konten pada halaman; menggunakan satu untuk nama situs dan lainnya untuk judul dokumen seperti mengatakan, halaman ini memiliki 2 bagian utama: "mydomain.com" dan "hubungi kami".
h1, tetapi hanya di halaman utama mereka . Pergi ke daftar tertentu dan judul daftar sekarang di h1.
Lihat halaman # 37 dokumen Kartu Laporan SEO Google :
Sebagian besar halaman utama produk memiliki kesempatan untuk menggunakan satu
<h1>tag, seperti contoh di atas, tetapi saat ini mereka hanya menggunakan tag heading lainnya (<h3>dalam hal ini) atau gaya font yang lebih besar. Sementara menata teks Anda sehingga tampak lebih besar mungkin mencapai presentasi visual yang sama, itu tidak memberikan makna semantik yang sama dengan mesin pencari yang<h1>tag lakukan. Nama produk dan / atau beberapa kata tentang fitur-fiturnya bagus untuk dimiliki dalam<h1>tag untuk halaman utama produk.
Per analisis Google sendiri tentang penawarannya, saya akan sampai pada kesimpulan bahwa Google mengharapkan nilai halaman khusus yang unik untuk muncul dalam H1 (ilustrasi dalam dokumen tertaut menggambarkan ini).
Berikut ini adalah alasan yang bagus: Logo Anda adalah gambar, bukan <h1>
Semantik, <h1>harus digunakan untuk judul halaman, dan judul halaman harus unik per halaman. Logo atau nama situs Anda bukan judul halaman (selain mungkin halaman beranda).
Logo / nama situs Anda harus dalam div biasa, mungkin dengan ID 'heading'. Atau, <header>tag jika menggunakan HTML5.
<img>tag, itu bisa menjadi latar belakang, hanya saja bukan latar pada <h1>tag. Namun, seperti yang diperdebatkan artikel yang ditautkan, logo Anda dapat dilihat sebagai konten halaman.
IMO seharusnya hanya ada satu H1 di halaman. Dan H1 harus selalu sebelum H2 - untuk mempertahankan hierarki konten Anda yang benar.
Logo sering diulang pada setiap halaman dan, seperti yang Anda katakan, pada kebanyakan halaman judulnya hampir selalu lebih penting.
Di beranda saya akan mempertimbangkan menggunakan:
logo / judul - H1 [, judul - H2]
Meskipun, di beranda Anda logo bisa jadi judul Anda.
Namun, pada semua halaman berikutnya saya akan pergi untuk:
logo - tag lain, judul - H1
Bahkan memiliki logo sebagai gambar latar belakang jika sesuai.
Apa yang benar-benar Anda cari dalam tag H1 Anda adalah judul halaman atau apa yang membuat halaman ini unik. Jika Anda menggunakan gambar di dalamnya, Anda harus melakukannya dengan metode fallback untuk penguraian:
<style>
h1{background: url('imagePathHere.gif');width:60px;height:10px;}
h1 span{display:none}
</style>
<h1><span>Unique Page Title</span></h1>
Dengan cara ini Anda dapat mengatur gambar untuk ditampilkan untuk H1 (yang sering disalahgunakan orang sebagai area logo) dan masih memiliki konten yang bagus di dalamnya untuk orang yang menggunakan pengalaman internet yang rusak. Itu juga membuat nilai SEO Anda bahagia.
Ini adalah pertanyaan yang hebat, karena praktik (dan templat) yang ada di luar sana.
Secara pribadi, saya suka merujuk pada logika "Menjabarkan 101", dengan mempertimbangkan hal berikut:
H1 seperti judul (tentu saja Anda ingin melengkapi judul HTML Anda) dan seharusnya hanya ada satu per halaman, seperti halaman yang hanya memiliki satu judul
H2 adalah jenis seperti Angka Romawi dalam garis besar: I., II., III., Dll.
H3 akan menjadi setara garis besar dari A., B., C.
Seringkali, penggunaan praktis dari logika ini sulit untuk ditegakkan di halaman web persis - ada begitu banyak bit info yang kebetulan tidak menggulung ke dalam hierarki itu. Namun, jika Anda duduk dan mencoba menjabarkannya dengan logika itu, saya merasa ada manfaatnya bagi disiplin.
Saya m h1 untuk pria judul utama. Dan judul utama adalah nama situs yang didekorasi, atau seperti Anda menyebutnya, logo. Inilah intinya - di header situs web, logo sebenarnya bukan logo, itu header situs yang diilustrasikan. Desainer hanya ingin mendesainnya sebagai logo.
Apa yang salah dengan LOGO -> H1?
<div>Google</div>
<h1>About Us</h1>
Sekarang, seperti h1bagian yang paling penting karena memberi tahu pengunjung tentang apa itu semua, pengunjung tidak dapat memahami halaman, karena h1terlalu spesifik. Tentang siapa?
<h1>Google</h1>
<h2>About Us</h2>
Halaman ini tentang Google. Inilah bagian tentang kami. Lihat - tidak ada pertanyaan? Semuanya jelas.
Struktur halaman. Jika Anda memasukkan judul utama situs ke div atau p, tidak ada yang terkait dengannya.
<p>Google</p>
<h1>About us</h1>
Bagaimana saya bisa mengaitkan "Tentang U" dengan Google jika h1datang setelah? Karena semua yang datang SETELAH H1dikaitkan dengan itu, bukan apa yang menjadi sebelumnya.
<h1>Google</h1>
<h2>About Us</h2>
"Tentang Kami" milik Google. Tidak ada pertanyaan.
HTML adalah bahasa untuk informasi DESCRIBE. Karena itu Anda tidak menampilkan informasi, Anda menjelaskannya. Dan setiap halaman independen. Karenanya Anda menjabarkan satu halaman karena tidak ada hubungan antar halaman. Tautkan saja tautan yang menghubungkan setiap halaman.
<p>Google</p>
<h1>About us</h1>
Halaman INI adalah Tentang kami. Siapa / apa itu? Tidak jelas. Itu hanya menggambarkan sesuatu yang disebut "Tentang kami".
<h1>Google</h1>
<h2>About Us</h2>
Situs ini menggambarkan google. Dan ada bagian tentang kami. Us = kemungkinan besar google, karena struktur menggambarkannya seperti itu.
Saya harap saya membuat poin saya :)
PS! Anda tidak dapat menggunakan h2- h1- h3karena tidak logis, karena itu gagal besar. Hanya karena w3c belum mengatakan itu tidak diizinkan, tidak membuatnya valid. Ini tidak masuk akal, pikirkanlah.
Logo sebagai tag h2?
Saya baru saja browsing di sekitar SitePoint (www.sitepoint.com) yang merupakan blog WordPress dengan campuran halaman dan blog biasa. Secara umum, saya menemukan bahwa mereka memiliki judul halaman sebagai tag h1, dan logo ditetapkan sebagai h2. Anda dapat melihat ini di halaman blog seperti www.blogs.sitepoint.com/category/design/. Menjelajah di sekitar situs Anda menemukan berbagai pengaturan. Saya sering tidak dapat menemukan tag h1, sebagai contoh di halaman produk utama (http://products.sitepoint.com/). Meskipun dari halaman itu, jika Anda mengklik produk tertentu untuk info lebih lanjut www.sitepoint.com/books/design2/, Anda menemukan lagi bahwa h1 adalah judul halaman, h2 adalah logo. Halaman web khas mirip dengan blog, (lihat www.sitepoint.com/help/). Dalam hal ini, subjek FAQ adalah semua tag h2.
Tom Rogers
Logo Anda tidak perlu disarangkan dalam tajuk - cukup gambar yang ditautkan di headercukup. Tetapi judul situs dan judul halaman / artikel Anda seharusnya <h1>. Artikel ini informatif: Kebenaran Tentang Beberapa Tag H1 di Era HTML5 .