seokita.id

SEO teknis, riset keyword, on-page optimization untuk pasar Indonesia

Struktur Heading HTML untuk SEO yang Benar

by Bayu Wicaksono
Struktur Heading HTML untuk SEO yang Benar

Kesalahan Heading yang Diam-diam Memangkas Ranking Anda

Banyak pemilik bisnis sudah rajin menulis konten panjang, memasang keyword di mana-mana, tapi ranking tetap stagnan. Salah satu penyebab paling sering yang terlewat: struktur heading HTML untuk SEO yang kacau.

Saya audit puluhan website Indonesia setiap tahun. Pola yang paling sering muncul: H1 dipakai dua kali, H3 muncul sebelum H2, atau—yang paling parah—tidak ada H1 sama sekali karena tema WordPress menyembunyikannya di balik elemen <div>. Google tidak bisa membaca pikiran Anda. Ia membaca kode HTML. Kalau hierarki heading berantakan, crawler kesulitan memahami topik utama halaman, dan halaman Anda kalah bersaing meski kontennya bagus.

Artikel ini membahas cara memperbaiki struktur heading secara teknis, lengkap dengan checklist yang bisa Anda eksekusi hari ini.

Kenapa Struktur Heading HTML Penting untuk Bisnis Anda

Heading bukan sekadar teks besar. Dari sisi SEO, heading punya tiga fungsi kritis:

1. Sinyal topik ke crawler Googlebotmembaca H1 sebagai deklarasi topik utama halaman. H2 dan H3 dibaca sebagai subtopik. Struktur yang logis membantu Google memahami tentang apa halaman ini—dan untuk keyword apa ia harus diranking.

2. Featured snippet dan People Also Ask Google sering mengambil teks tepat di bawah H2 atau H3 untuk dijadikan featured snippet. Kalau heading Anda tidak terstruktur, peluang mendapat posisi nol ini hilang begitu saja.

3. Aksesibilitas = sinyal kualitas Screen reader dan teknologi aksesibilitas bergantung pada hierarki heading. Google memperhitungkan aksesibilitas sebagai bagian dari sinyal kualitas halaman (terkait E-E-A-T). Website yang tidak aksesibel dianggap kurang berkualitas.

Dari pengalaman saya mengoptimasi website di niche keuangan, memperbaiki struktur heading saja—tanpa mengubah konten—bisa mendongkrak impressi di Google Search Console 20–35% dalam 6–8 minggu. Bukan sulap, tapi karena Google akhirnya bisa mengindeks subtopik halaman dengan benar.

Cara Kerja Hierarki H1–H6 yang Benar

Bayangkan heading seperti daftar isi buku:

  • H1 = Judul buku (hanya satu per halaman)
  • H2 = Bab
  • H3 = Sub-bab dalam bab tersebut
  • H4 = Poin detail dalam sub-bab
  • H5–H6 = Jarang dipakai; hanya untuk konten sangat kompleks

Aturan dasarnya sederhana: jangan loncat level. Anda tidak bisa meletakkan H3 sebelum ada H2 di atasnya. Itu seperti menulis sub-bab sebelum ada bab—tidak masuk akal secara struktural.

Contoh Struktur yang Salah

H1: Cara Memilih Asuransi Jiwa
  H3: Jenis-jenis Asuransi (← loncat, H2 tidak ada)
    H2: Tips Memilih Premi (← mundur ke H2 setelah H3, kacau)

Contoh Struktur yang Benar

H1: Cara Memilih Asuransi Jiwa
  H2: Jenis-jenis Asuransi Jiwa
    H3: Asuransi Term Life
    H3: Asuransi Whole Life
  H2: Cara Menghitung Kebutuhan Premi
    H3: Rumus Dasar Perhitungan Premi
  H2: Kesalahan Umum Saat Memilih Asuransi

Struktur kedua memberi Google peta yang jelas: halaman ini membahas asuransi jiwa (H1), dengan tiga subtopik besar (H2), masing-masing punya detail spesifik (H3).

Checklist Struktur Heading HTML untuk SEO

Gunakan checklist ini setiap kali Anda mempublish atau mengaudit halaman:

✅ H1

  • Hanya ada satu H1 per halaman
  • H1 mengandung primary keyword (idealnya di awal kalimat)
  • H1 berbeda dari title tag (boleh mirip, tapi tidak harus identik)
  • H1 ada di kode HTML, bukan di dalam elemen <div> bergaya heading

✅ H2

  • Setiap H2 mewakili subtopik utama yang berbeda
  • Minimal satu H2 mengandung keyword atau variasi keyword
  • H2 tidak dipakai hanya untuk estetika (memperbesar teks)
  • Jumlah H2 proporsional dengan panjang konten (artikel 1.500 kata: 4–6 H2)

✅ H3–H4

  • H3 hanya muncul di bawah H2, tidak berdiri sendiri
  • H3 berisi detail, contoh, atau langkah spesifik dari H2 di atasnya
  • H4 dipakai hanya jika H3 membutuhkan breakdown lebih lanjut

✅ Teknis

  • Tidak ada heading duplikat (teks H2 yang sama persis di halaman yang sama)
  • Heading tidak dipakai untuk styling—gunakan CSS untuk itu
  • Cek di Google Search Console → URL Inspection bahwa heading terbaca di rendered HTML
  • Validasi dengan tool seperti Screaming Frog atau ekstensi SEO Minion

✅ Keyword

  • Primary keyword ada di H1
  • Secondary keyword atau LSI keyword tersebar di H2/H3
  • Tidak ada keyword stuffing di heading (satu keyword per heading sudah cukup)

Tools untuk Mengaudit Heading HTML Anda

1. Screaming Frog SEO Spider (Gratis hingga 500 URL)

Download di screaming frog, crawl website Anda, lalu buka tab H1 dan H2. Anda langsung bisa lihat:

  • Halaman tanpa H1
  • Halaman dengan H1 lebih dari satu
  • H1 yang terlalu panjang atau kosong

Ini tool paling efisien untuk audit skala besar.

2. SEO Minion (Ekstensi Chrome, Gratis)

Buka halaman mana pun, klik ikon SEO Minion, pilih "Highlight Headings". Anda akan melihat semua heading ditandai dengan warna berbeda langsung di halaman. Cocok untuk audit cepat per halaman.

3. Google Search Console → URL Inspection

Masukkan URL spesifik, klik "Test Live URL", lalu lihat bagian "More Info". Di sini Anda bisa melihat HTML yang benar-benar dirender oleh Google—bukan HTML mentah. Ini penting karena beberapa tema WordPress memuat heading via JavaScript, dan Google mungkin tidak membacanya dengan benar.

4. Ahrefs Site Audit atau Semrush Site Audit

Jika Anda sudah berlangganan salah satu tool ini, keduanya punya laporan khusus untuk masalah heading: missing H1, multiple H1, skipped heading levels. Laporan ini bisa diekspor dan dibagikan ke developer atau content writer Anda.

Studi Kasus: Perbaikan Heading di Website Otomotif

Salah satu klien saya menjalankan website review mobil bekas. Traffic organiknya stagnan selama 4 bulan meski konten terus ditambah. Setelah audit Screaming Frog, saya menemukan:

  • 47 halaman tidak punya H1 (tema mereka menggunakan <div class="post-title"> bukan <h1>)
  • 23 halaman punya dua H1 (judul artikel + nama website di header)
  • Hampir semua halaman langsung loncat dari H1 ke H3

Perbaikan yang dilakukan:

  1. Developer mengubah <div class="post-title"> menjadi <h1> di template
  2. Nama website di header diubah dari H1 ke <a> dengan styling CSS
  3. Semua H3 yang berdiri sendiri dinaikan ke H2 atau diletakkan di bawah H2 yang relevan

Hasilnya dalam 7 minggu setelah perbaikan diindeks:

  • Impressi naik 31%
  • Klik organik naik 18%
  • 6 halaman masuk featured snippet untuk keyword perbandingan mobil

Bukan karena kontennya berubah. Tapi karena Google akhirnya bisa membaca struktur halaman dengan benar.

Kesalahan Umum yang Harus Dihindari

⚠️ Kesalahan #1: Pakai heading untuk styling, bukan struktur Banyak yang memakai H2 atau H3 hanya karena tampilannya besar dan tebal. Ini merusak hierarki. Kalau Anda butuh teks besar untuk estetika, gunakan CSS—jangan heading.

⚠️ Kesalahan #2: H1 dari nama toko/brand di header Tema WordPress tertentu secara default menjadikan nama website sebagai H1 di setiap halaman. Akibatnya, setiap artikel punya dua H1: nama website dan judul artikel. Cek ini di kode sumber (Ctrl+U di browser, cari <h1>).

⚠️ Kesalahan #3: Heading terlalu panjang H1 idealnya 50–70 karakter. H2 dan H3 idealnya di bawah 70 karakter. Heading yang terlalu panjang dipenggal di hasil pencarian dan sulit dibaca crawler.

⚠️ Kesalahan #4: Semua heading berisi keyword yang sama Jika H1, semua H2, dan semua H3 mengulang keyword yang identik, Google mendeteksi ini sebagai keyword stuffing. Gunakan variasi: sinonim, pertanyaan terkait, atau long-tail keyword.

Heading dan Hubungannya dengan E-E-A-T

Google mengevaluasi halaman berdasarkan Experience, Expertise, Authoritativeness, Trustworthiness (E-E-A-T). Struktur heading yang baik berkontribusi ke sini karena:

  • Heading yang terstruktur menunjukkan bahwa penulis memahami topik secara menyeluruh dan bisa mengorganisasi informasi dengan logis
  • Halaman dengan hierarki heading yang jelas lebih mudah dibaca—ini mengurangi bounce rate, yang menjadi sinyal positif
  • Heading yang mencakup berbagai aspek topik (bukan hanya keyword utama) menunjukkan kedalaman konten, bukan konten tipis yang dibuat hanya untuk ranking

Dari perspektif praktis: kalau Anda menulis artikel tentang "cara memilih laptop untuk desain grafis", heading Anda seharusnya mencakup aspek seperti spesifikasi GPU, RAM, layar, dan budget—bukan hanya mengulang "laptop untuk desain grafis" di setiap heading.

Prioritas Pertama: Audit H1 Dulu

Jika Anda hanya punya waktu untuk satu hal minggu ini, lakukan ini:

Audit H1 seluruh website Anda menggunakan [Screaming Frog](https://screaming frog) (versi gratis cukup untuk 500 halaman pertama). Cari tiga masalah ini:

  1. Halaman tanpa H1
  2. Halaman dengan lebih dari satu H1
  3. H1 yang tidak mengandung primary keyword halaman tersebut

Perbaiki tiga masalah ini dulu. Setelah selesai, baru lanjut ke audit H2 dan H3.

Struktur heading HTML untuk SEO bukan detail kecil—ini fondasi yang menentukan apakah Google bisa memahami konten Anda atau tidak. Konten bagus yang tersembunyi di balik struktur heading yang kacau tidak akan pernah mencapai potensi ranking tertingginya.

Perbaiki strukturnya. Biarkan konten Anda bekerja.