Hierarki Heading dan SEO

Heading Itu Daftar Isi Halamanmu

Bayangkan kamu membuka buku pelajaran setebal 300 halaman, dan buku itu tidak punya daftar isi. Untuk menemukan materi tentang fotosintesis, kamu harus membolak-balik halaman satu per satu. Melelahkan, bukan? Heading di HTML bekerja persis seperti daftar isi itu. Tag h1 sampai h6 memberi tahu siapa pun yang "membaca" halamanmu, manusia maupun mesin, bagian mana yang paling penting, mana sub-bagiannya, dan mana detail kecil di dalamnya.

Perbedaannya: pembaca manusia melihat ukuran teks yang berbeda-beda, tetapi mesin pencari dan screen reader melihat struktur. Mereka membangun outline dokumen dari headingmu, seperti kerangka karangan. Kalau kerangkanya kacau, seluruh halaman ikut dianggap kacau, walaupun tampilannya terlihat rapi di layar.

Kenapa Hierarki Ini Ada

HTML lahir sebagai bahasa dokumen, dan setiap dokumen butuh struktur. Jauh sebelum CSS populer, heading adalah satu-satunya cara menandai "ini judul bab". Fungsi itu tidak pernah hilang, justru semakin penting seiring web berkembang.

Ada tiga pihak yang sangat bergantung pada hierarki heading. Pertama, screen reader: perangkat lunak pembaca layar punya tombol khusus untuk melompat dari satu heading ke heading lain. Pengguna tunanetra menavigasi halamanmu lewat outline ini, bukan dengan menggulir halaman. Kedua, mesin pencari: Google dan kawan-kawannya memakai heading untuk memahami topik halaman. h1 biasanya dianggap judul utama, dan kata kunci di dalamnya punya bobot lebih besar dibanding teks biasa. Ketiga, fitur browser dan ekstensi: banyak alat pembuat daftar isi otomatis bekerja dengan membaca urutan heading dari h1 ke h6.

Singkatnya, heading bukan soal tampilan. Ukuran teksnya yang besar hanyalah efek samping dari maknanya: "bagian ini penting".

Aturan Emasnya

Ada tiga aturan sederhana. Kalau kamu memegang ketiganya, headingmu hampir selalu benar:

1. Satu h1 per halaman. Ini judul utama, seperti judul buku. Sebuah buku tidak punya dua judul, begitu juga halamanmu.
2. Jangan melompati level. Setelah h1, pakai h2. Di dalam h2, pakai h3. Jangan dari h1 langsung ke h4, seperti daftar isi yang bab 1-nya tiba-tiba berisi sub-bab 1.4 tanpa ada 1.1 sampai 1.3.
3. Heading bukan alat memperbesar teks. Kalau kamu butuh teks besar tetapi maknanya bukan judul, pakai CSS. Memakai h3 hanya karena ukurannya "pas" adalah penyalahgunaan makna.

Contoh 1: Kerangka yang Benar

Struktur paling sederhana untuk sebuah artikel tentang hewan peliharaan:

<h1>Panduan Merawat Kucing</h1>

<h2>Makanan</h2>
<h3>Makanan Kering</h3>
<h3>Makanan Basah</h3>

<h2>Kesehatan</h2>
<h3>Vaksinasi</h3>
<h3>Perawatan Bulu</h3>

Perhatikan polanya: setiap level turun tepat satu tingkat, tidak pernah loncat. Outline-nya terbaca jelas oleh manusia maupun mesin: halaman ini tentang merawat kucing, terbagi menjadi Makanan dan Kesehatan, dan masing-masing punya dua sub-bagian.

Contoh 2: Studi Kasus Halaman Resep Nyata

Sekarang contoh yang lebih realistis: halaman resep masakan lengkap dengan kolom samping berisi resep terkait.

<article>
  <h1>Resep Rendang Sapi Empuk</h1>
  <p>Rendang adalah hidangan khas Minangkabau...</p>

  <h2>Bahan-bahan</h2>
  <ul>
    <li>1 kg daging sapi</li>
    <li>800 ml santan kental</li>
  </ul>

  <h2>Langkah Memasak</h2>
  <h3>Tahap 1: Menumis Bumbu</h3>
  <p>Panaskan minyak, tumis bumbu halus...</p>
  <h3>Tahap 2: Memasak Daging</h3>
  <p>Masukkan santan dan daging, masak perlahan...</p>

  <h2>Tips Penyajian</h2>
  <p>Sajikan dengan nasi hangat dan kerupuk.</p>
</article>

<aside>
  <h2>Resep Terkait</h2>
  <ul>
    <li><a href="#">Gulai Ayam</a></li>
    <li><a href="#">Sambalado Tanak</a></li>
  </ul>
</aside>

Satu h1 untuk judul resep. Setiap bagian besar memakai h2, dan langkah-langkah di dalamnya memakai h3. Perhatikan bagian samping (aside): ia memulai hierarkinya sendiri dari h2 karena posisinya setara dengan bagian-bagian utama artikel, bukan sub-bagian dari "Tips Penyajian". Ini detail yang sering luput: hierarki mengikuti makna bagian, bukan posisinya di layar.

Kesalahan Umum Pemula

Salah: banyak h1 dalam satu halaman.

<!-- SALAH -->
<h1>Produk Kami</h1>
<p>...</p>
<h1>Testimoni</h1>
<p>...</p>

<!-- BENAR -->
<h1>Produk Kami</h1>
<p>...</p>
<h2>Testimoni</h2>
<p>...</p>

Mesin pencari jadi bingung: sebenarnya halaman ini tentang apa? Satu halaman, satu topik utama, satu h1.

Salah: melompati level.

<!-- SALAH -->
<h1>Panduan Liburan ke Bali</h1>
<h4>Transportasi</h4>
<h4>Penginapan</h4>

<!-- BENAR -->
<h1>Panduan Liburan ke Bali</h1>
<h2>Transportasi</h2>
<h2>Penginapan</h2>

Lompatan dari h1 ke h4 membuat screen reader mengumumkan struktur yang "bolong". Pengguna yang melompat antar heading akan merasa ada bagian yang hilang.

Salah: heading dipakai untuk styling.

<!-- SALAH: cuma butuh teks agak besar -->
<h4>Promo berakhir besok!</h4>

<!-- BENAR: makna dulu, tampilan lewat CSS -->
<p class="teks-promo">Promo berakhir besok!</p>

Kalau teksnya bukan judul bagian, jangan pakai heading, seberapa pun cocok ukurannya.

Salah: heading yang tidak bermakna saat dibaca berurutan. Screen reader membacakan outline seperti ini: "Heading level 1: Panduan Liburan ke Bali. Heading level 2: Transportasi." Kalau headingmu berbunyi "Klik di sini" atau "Baca selengkapnya", outline itu tidak berguna sama sekali.

Catatan teknis: Browser tidak memprotes hierarki yang kacau, halaman tetap tampil normal. Yang rusak adalah outline dokumen yang dibaca mesin pencari dan teknologi bantu, dan kerusakan itu tidak terlihat di layar. Biasakan memeriksa outline halamanmu (misalnya dengan ekstensi headingsMap) sejak awal, supaya masalah SEO dan aksesibilitas tidak menumpuk diam-diam.