Heading Hierarchy yang Benar untuk SEO dan AI Search di 2026
TL;DR: Heading hierarchy yang benar adalah satu H1 per halaman yang merangkum topik utama, diikuti H2 untuk subtopik besar dan H3 untuk poin pendukung di bawahnya. Struktur ini membantu Googlebot memahami konteks dan membuat konten lebih mudah dikutip sebagai jawaban di AI Overview, ChatGPT, dan Perplexity. Hindari skip level (H1 langsung ke H3) dan jangan pakai heading hanya untuk styling.
Dalam beberapa audit terakhir untuk client UMKM, masalah heading hierarchy muncul di sekitar 6 dari 10 website. Pola yang paling sering: dua H1 di satu halaman, H2 dipakai sembarangan untuk membesarkan teks tanpa makna struktural, dan section penting tidak punya heading sama sekali. Dampaknya bukan cuma SEO, tapi juga visibility di AI Search yang sangat bergantung pada struktur dokumen.
Heading bukan dekorasi visual. Heading adalah peta konten yang dibaca crawler, screen reader, dan model bahasa untuk memahami hierarki informasi. Ketika struktur ini rapi, satu artikel bisa muncul di Featured Snippet, People Also Ask, dan AI Overview sekaligus.
Apa itu Heading Hierarchy
Heading hierarchy adalah pengaturan tag <h1> sampai <h6> di HTML berdasarkan tingkat kepentingan informasi. H1 adalah judul utama halaman, H2 adalah subtopik utama, H3 adalah sub dari H2, dan seterusnya sampai H6. Hierarki ini didefinisikan di HTML Living Standard dan dipakai oleh semua crawler modern.
Yang sering disalahpahami: heading bukan soal ukuran font. Anda bisa membuat H3 terlihat besar dengan CSS, atau H1 terlihat kecil. Yang dibaca Google dan AI adalah tag semantiknya, bukan tampilannya. Ini juga alasan kenapa pakai structured data saja tidak cukup, struktur HTML dasar tetap harus benar.
Aturan Heading yang Lulus Audit
Berikut pola yang konsisten lulus audit di proyek client:
| Aturan | Penjelasan |
|---|---|
| Satu H1 per halaman | H1 merangkum topik utama, sama dengan meta title |
| Tidak skip level | H1 ke H2 ke H3, jangan H1 langsung H3 |
| Heading deskriptif | Bukan "Bagian 1", tapi "Cara Mengukur ROI Website" |
| Heading mengandung keyword utama | Natural, bukan keyword stuffing |
| Section tanpa heading dihindari | Setiap blok konten punya heading-nya sendiri |
| Heading tidak dipakai untuk styling | Pakai class CSS atau strong, bukan H4 acak |
Untuk halaman blog atau artikel, urutan idealnya: H1 = judul artikel, H2 = subtopik besar (3 sampai 5 buah), H3 = poin di dalam H2 (opsional). Hampir tidak ada artikel yang butuh H4 atau lebih dalam.
Studi Kasus: Audit Website Atmo
Saat membangun ulang website LMS Atmo, audit awal menemukan 4 H1 di halaman landing utama: satu di hero, satu di navbar logo (yang seharusnya H1 hanya di homepage), dan dua di section testimoni. Setelah dirapikan menjadi satu H1 dengan struktur H2 yang merepresentasikan modul-modul kursus, hasilnya dalam 60 hari:
- Halaman utama mulai muncul untuk query "platform belajar [niche]" yang sebelumnya tidak terindeks.
- Beberapa H2 mulai muncul sebagai snippet di Google Search.
- ChatGPT mulai mengutip nama modul dengan benar saat ditanya tentang topik terkait.
Angka konkretnya: impresi organik naik dari sekitar 800 ke 2.300 per bulan dalam 90 hari. Bukan karena keyword baru, tapi karena struktur yang sudah ada akhirnya bisa dibaca dengan benar.
Pola untuk AI Search
AI Search seperti Google AI Overview, ChatGPT Browse, dan Perplexity menggunakan heading untuk:
- Menentukan apakah halaman menjawab pertanyaan pengguna.
- Ekstrak section yang relevan untuk dikutip.
- Menyusun urutan informasi saat membuat ringkasan.
Format heading yang sering jadi sumber kutipan: heading dalam bentuk pertanyaan ("Apa itu X", "Cara melakukan Y"), heading yang memuat angka spesifik ("5 Faktor Penting"), dan heading yang langsung menjawab intent ("Definisi", "Perbandingan", "Studi Kasus"). Pola FAQ di akhir artikel juga sangat dikutip karena formatnya match dengan cara AI menyusun jawaban.
Pertanyaan Umum
Apakah boleh punya 2 H1 di satu halaman?
Sejak HTML5, secara teknis browser tidak akan error. Namun untuk SEO dan AI Search, praktik standar tetap satu H1 per halaman. Multiple H1 mengirim sinyal yang ambigu ke crawler tentang topik utama halaman.
Apakah heading H4, H5, H6 masih dipakai?
Jarang, kecuali untuk dokumen panjang seperti dokumentasi teknis atau e-book. Untuk artikel blog standar, H1 sampai H3 sudah cukup.
Apakah heading mempengaruhi peringkat SEO secara langsung?
Heading bukan ranking factor langsung seperti backlink. Tetapi heading yang baik mempengaruhi pemahaman konten oleh Google, yang akhirnya mempengaruhi peringkat. Hubungannya tidak langsung, tapi nyata.
Bagaimana cara cek heading di website saya?
Pakai ekstensi browser seperti HeadingsMap, atau lihat di Chrome DevTools dengan klik kanan dan Inspect. Audit otomatis bisa pakai Screaming Frog atau Sitebulb.
Apakah React/Next.js otomatis menjaga heading hierarchy?
Tidak. Framework hanya menyediakan tag. Tanggung jawab struktur ada di developer dan content writer. Audit manual tetap diperlukan.
Bangun Heading yang Bekerja Ganda
Heading hierarchy yang benar adalah investasi infrastruktur konten. Satu kali rapi, setiap konten baru otomatis mendapat manfaat SEO dan AEO. Untuk website bisnis Indonesia yang ingin muncul di Google AI Overview dan dikutip ChatGPT, audit heading adalah langkah pertama yang murah tapi sering diabaikan. Bukan tentang menambahkan H tag, tapi memastikan setiap H tag punya makna struktural yang konsisten.
Artikel Terkait
Website Bisnis
Cara Marketer Indonesia Pasang CSS interpolate-size di Next.js untuk Animasi Height Auto pada Accordion FAQ, Pangkas 24 Baris JavaScript dan Hilangkan ResizeObserver di 2026
Panduan praktis pasang CSS interpolate-size di Next.js untuk animasi height auto pada accordion FAQ. Hilangkan ResizeObserver dan 24 baris JavaScript di 2026.
Website Bisnis
Cara Marketer Indonesia Pasang CSS text-box-trim di Next.js untuk Typography Presisi, Pangkas 2 Override line-height dan Hilangkan Padding Manual di Heading 2026
Pasang CSS text-box-trim di Next.js untuk hilangkan whitespace di atas dan bawah heading, hasil typography presisi tanpa override line-height dan tanpa padding manual.
Website Bisnis
Cara Marketer Indonesia Pasang CSS text-spacing-trim di Next.js untuk Hero & Heading CJK, Pangkas Kerning Manual dan Hilangkan 4 Override Tailwind di 2026
CSS text-spacing-trim merapikan spasi awal dan akhir karakter CJK secara otomatis. Pasang di Next.js dengan 1 baris CSS, pangkas kerning manual dan override Tailwind.
Butuh website yang benar-benar bekerja?
Hubungi Vito untuk konsultasi gratis 15 menit.
WhatsApp Sekarang