Anda menghabiskan waktu berjam-jam untuk membuat halaman WordPress yang sempurna. Kontennya solid. Kata kuncinya sudah ditempatkan. Plugin SEO Anda menunjukkan tanda centang hijau.
Namun, buka alat pengembang browser Anda dan periksa struktur heading, dan Anda akan melihat sesuatu yang secara diam-diam dapat membunuh lalu lintas organik Anda: hierarki heading yang rusak. Dua H1. Judul situs dibungkus dalam
. Bagian melompat dari H2 langsung ke H4. Atau lebih buruk — tidak ada H1 sama sekali.
Ini bukan kesalahan pemula. Ini adalah masalah struktural yang tertanam dalam cara WordPress, tema, pembuat halaman, dan editor Gutenberg berinteraksi — dan sebagian besar pemilik situs tidak pernah tahu itu terjadi.
Panduan ini dibuat untuk memperbaikinya. Baik Anda pemilik situs WordPress yang mengelola konten Anda sendiri, atau agensi yang membangun situs untuk puluhan klien, Anda akan keluar dari sini dengan mengetahui cara tepat untuk mengaudit, mendiagnosis, dan menyelesaikan secara permanen masalah urutan heading di WordPress.
Apa Itu Tag H1 dan Mengapa Itu Penting di WordPress?
Tag H1 (
) adalah elemen heading HTML tingkat atas. Dalam HTML semantik, ini memberi sinyal kepada browser, mesin pencari, dan teknologi bantu: “Ini adalah topik utama halaman ini.”
Anggap tag heading sebagai kerangka dokumen:
H1 – Main page title (only one per page)
├── H2 – First major section
│ ├── H3 – Subsection
│ └── H3 – Another subsection
├── H2 – Second major section
│ ├── H3 – Subsection
│ │ └── H4 – Detail within subsection
└── H2 – Third major sectionLewati satu level — melompat dari H2 ke H4 — dan Anda merusak kerangka tersebut. Gunakan dua H1 dan Anda menciptakan ambiguitas struktural. Gunakan tag H3 untuk gaya visual dan Anda memperkenalkan heading bayangan yang membingungkan perayap.
Di WordPress secara khusus, ini menjadi rumit dengan cepat. Tidak seperti halaman HTML statis di mana Anda menulis setiap tag secara manual, WordPress menghasilkan markup heading dari setidaknya empat sumber berbeda secara bersamaan: templat header tema, judul postingan, konten editor, dan widget atau modul pembuat halaman apa pun yang telah Anda tambahkan.
Apa yang Sebenarnya Dikatakan Google Tentang Tag H1
Mari kita selesaikan perdebatan peringkat lebih awal.
In July 2026, Google’s Gary Illyes addressed this directly during the SEO Office Hours podcast: arranging headings in semantic order is genuinely helpful for accessibility (especially screen reader users), but it doesn’t significantly impact Google’s ranking algorithms. John Mueller has also stated that multiple H1 tags on a page don’t confuse crawlers and have zero direct SEO impact.
Jadi, apakah semua ini penting?
Ya — tetapi bukan karena alasan yang dikatakan sebagian besar panduan SEO.
Alasan sebenarnya untuk memperhatikan struktur heading di WordPress adalah:
- Kepatuhan aksesibilitas — Kriteria keberhasilan WCAG 2.1 1.3.1 memerlukan informasi dan hubungan yang dapat ditentukan secara terprogram. Hirarki heading yang rusak gagal dalam hal ini.
- Kemampuan perayapan dan sinyal konten — Meskipun Google dapat menguraikan markup yang berantakan, H1 yang bersih memberikan sinyal yang paling jelas tentang topik halaman, yang penting dalam kasus yang ambigu.
- Pengalaman pengguna dan waktu tunggu — Pembaca memindai judul. Hierarki logis membantu mereka bernavigasi dan bertahan lebih lama — keduanya merupakan sinyal peringkat tidak langsung.
- Kebersihan audit teknis — Untuk agensi, masalah judul muncul di setiap alat audit (Screaming Frog, Ahrefs, SEMrush, Rank Math, Yoast). Laporan yang dilihat oleh klien terlihat buruk meskipun dampak langsungnya terhadap peringkat masih diperdebatkan.
Bagaimana WordPress Menghasilkan Tag Judul: Empat Sumber Konflik
Memahami Mengapa Kerusakan struktur judul WordPress memerlukan pemahaman dari empat tempat pembuatan judul.
Sumber 1: Templat Header Tema
Sebagian besar tema WordPress menampilkan judul situs di area header. Tema yang lebih lama dan kodenya buruk membungkusnya dalam tag ＜h1> — di setiap halaman. Ini berarti setiap halaman di situs Anda dimulai dengan H1 yang sama: nama merek Anda.
Kemudian, ketika halaman atau judul postingan dirender (yang sebaiknya menjadi H1), maka akan menjadi H1 kedua atau diturunkan menjadi H2.
Inilah tampilannya pada tema yang rusak header.php:
php
// Broken — site title as H1 on every page
＜h1＞＜?php bloginfo('name'); ?＞＜/h1＞
＜h2＞＜?php the_title(); ?＞＜/h2＞ // Post title wrongly demotedSeperti apa tampilannya:
php
// Correct — site title is a link or span, post title is H1
＜p class="site-title"＞＜a href="＜?php echo home_url(); ?＞"＞＜?php bloginfo('name'); ?＞＜/a＞＜/p＞
＜h1＞＜?php the_title(); ?＞＜/h1＞Ini adalah salah satu masalah WordPress H1 yang paling umum dan sama sekali tidak terlihat kecuali Anda memeriksa sumber halamannya. Anda dapat memiliki plugin SEO, skor keterbacaan hijau, dan konten yang sempurna — dan masih menghasilkan duplikat H1 di setiap halaman.
Sumber 2: Editor Blok Gutenberg
Editor blok WordPress sengaja memperkenalkan perubahan pada perilaku H1. Secara default, Gutenberg tidak menekankan opsi H1 di blok Heading — asumsinya adalah bahwa judul postingan sudah dirender sebagai H1, jadi judul area konten harus dimulai dari H2.
Dalam praktiknya, hal ini menimbulkan dua masalah:
Masalah A: Beberapa tema melakukannya tidak menampilkan judul posting sebagai H1. Jika tema Anda menampilkan judul dalam ＜div> atau ＜h2> karena alasan gaya, dan Gutenberg menyembunyikan H1 dari opsi blok judul, Anda tidak akan mendapatkan tag H1 di halaman tersebut.
Situasi ini persis seperti yang ditandai dalam masalah GitHub yang sudah berjalan lama di repositori Gutenberg — pengguna meminta kemampuan untuk menghapus opsi H1 sepenuhnya untuk pengaturan perusahaan dan agensi di mana H1 dikontrol pada tingkat templat. Masalah ini menyoroti kebingungan yang nyata: perilaku default editor dan template tema harus dikoordinasikan secara eksplisit, namun WordPress tidak menyediakan pemeriksaan otomatis untuk hal ini.
Masalah B: Editor konten masih dapat memilih H1 di editor blok dengan mengubah level judul. Jika tema Anda sudah menampilkan judul postingan sebagai H1, editor yang menambahkan blok H1 lain di dalam area konten akan membuat duplikat — dan tidak ada peringatan yang muncul.
Sumber 3: Pembuat Halaman (Elementor, Divi, Beaver Builder)
Pembuat halaman adalah satu-satunya sumber terbesar kekacauan hierarki judul di WordPress.
Inilah alasannya: pembuat halaman memberi Anda kontrol visual yang terperinci. Anda dapat menyeret elemen teks ke mana saja, menatanya dengan cara apa pun, dan menetapkan tingkat judul apa pun. Ini sangat berguna untuk desain. Ini merupakan bencana bagi struktur.
Masalah judul pembuat halaman pada umumnya terlihat seperti ini:
- Bagian pahlawan: H1 (benar) ✓
- Judul bagian fitur: H3 (dilewati H2, dipilih karena “terlihat lebih baik”) ✗
- Judul area widget: H2 (tampak seperti judul bagian, namun hanya judul widget sidebar) ✗
- Judul Testimonial : H4 (tidak ada H3 diatasnya) ✗
- Judul CTA: H2 (kembali ke level yang lebih tinggi, sekarang garis besarnya sepenuhnya non-linier) ✗
Hasilnya adalah struktur judul yang koheren secara visual namun tidak bermakna secara semantik. Pembaca layar dan perayap yang menguraikan ini mendapatkan kerangka konten yang melompat-lompat seperti daftar isi yang rusak.
Dokumentasi InspectWP mengidentifikasi pola ini secara eksplisit: penulis dan pengguna pembuat halaman memilih tingkat judul berdasarkan cara mereka Lihat daripada arti logisnya — jika H3 adalah ukuran visual yang tepat, mereka memilih H3, meskipun tidak ada H2 di atasnya.
Sumber 4: Widget dan Komponen Tema
Area widget WordPress — sidebar, footer, modul header — sering kali menampilkan judulnya sendiri. Widget “Postingan Terbaru” mungkin ditampilkan sebagai H2. Spanduk promosi yang disertakan dalam tema mungkin menggunakan H3. Tak satu pun dari ini merupakan bagian dari kerangka konten, namun muncul dalam struktur judul halaman.
Hal ini menciptakan “kebisingan” judul yang meningkatkan kompleksitas kerangka dan dapat mendorong judul konten keluar dari posisi hierarki yang benar.
5 Masalah Hirarki H1 dan Heading WordPress Paling Umum
Masalah 1: Judul Situs Dibungkus H1 di Setiap Halaman
Seperti apa: Setiap halaman di situs Anda memiliki dua H1 — nama situs dan judul postingan Anda.
Siapa yang terpengaruh: Situs yang menggunakan tema lama, tema premium yang dibuat dengan buruk, atau tema apa pun yang pengembangnya menggunakan ＜h1> untuk pencitraan merek situs.
Cara mendeteksinya: Klik kanan halaman mana pun → Periksa → cari ＜h1 di panel Elemen. Jika Anda melihat nama situs Anda dibungkus dengan H1 di bagian ＜header>, Anda mengalami masalah ini.
Cara memperbaikinya:
Opsi 1: Pengeditan tema anak (pendekatan pengembang) Di tema anak Anda header.php, cari keluaran judul situs dan ubah dari ＜h1> menjadi ＜p> atau ＜span> dengan kelas yang sesuai:
php
＜p class="site-title"＞
＜a href="＜?php echo esc_url(home_url('/')); ?＞" rel="home"＞
＜?php bloginfo('name'); ?＞
＜/a＞
＜/p＞Opsi 2: CSS + aria-label (solusi tanpa kode) Jika Anda tidak dapat mengedit file tema, gunakan CSS untuk mengatur ulang gaya H1 pada judul situs:
css
.site-header h1.site-title {
font-size: inherit;
font-weight: inherit;
margin: 0;
}Catatan: ini menyembunyikan visual Masalah H1 tetapi tidak memperbaiki masalah struktural. Tag H1 tetap berada di markup.
Opsi 3: Beralih ke tema yang terstruktur dengan baik Tema yang mengikuti standar pengkodean WordPress (Twenty Twenty-Four, Kadence, GeneratePress, Astra) menangani ini dengan benar. Jika tema Anda saat ini mengalami masalah ini dan Anda bukan seorang pengembang, peralihan sering kali merupakan perbaikan yang paling dapat diandalkan.
Masalah 2: H1 Hilang di Beranda
Seperti apa: Beranda Anda tidak memiliki tag H1. Plugin SEO melaporkan “H1 tidak ditemukan.”
Siapa yang terpengaruh: Situs yang menggunakan gambar logo untuk pencitraan merek (menyembunyikan judul situs), situs yang menggunakan halaman depan statis tanpa judul yang terlihat, atau situs yang template halaman beranda temanya tidak dipanggil the_title().
Ini adalah masalah nyata dan berulang di forum dukungan WordPress. Biasanya penyebabnya adalah urutan berikut: judul situs disetel untuk ditampilkan di header, namun pengguna menyembunyikannya (atau menggantinya dengan logo), sehingga hanya menghapus H1 dari halaman. Karena beranda sering kali tidak memiliki “judul postingan” seperti postingan blog, tidak ada H1 otomatis yang dihasilkan.
Cara memperbaikinya:
Khusus untuk beranda: Tambahkan H1 ke bagian pahlawan atau templat halaman Anda. Ini bisa berupa:
- Judul yang terlihat (“Nama Bisnis Anda | Kategori Layanan”) yang juga berfungsi sebagai H1
- H1 yang tersembunyi secara visual ditambahkan melalui CSS (
position: absolute; clip: rect(0 0 0 0);) yang memberikan penanda semantik tanpa mengganggu desain visual
Di Gutenberg: Tambahkan blok Heading di bagian atas konten beranda Anda, atur ke H1, dan jadikan itu bagian dari pesan pahlawan Anda.
Masalah 3: Tingkat Judul yang Dilewatkan dalam Konten
Seperti apa: Struktur konten melompat dari H2 langsung ke H4, atau dari H1 langsung ke H3.
Siapa yang terpengaruh: Siapa pun yang menulis konten berdurasi panjang yang menggunakan judul untuk gaya visual, bukan struktur semantik.
Mengapa ini penting: Seperti yang dicatat oleh InspectWP, melewatkan level judul terjadi ketika penulis memilih level berdasarkan tampilan — H3 terlihat benar, jadi mereka menggunakan H3, terlepas dari apakah H2 mendahuluinya.
Cara mendeteksinya di Gutenberg: Klik ikon info (ⓘ) di toolbar atas editor blok. Panel Kerangka Dokumen memperlihatkan setiap judul secara berurutan dan bendera yang dilewati tingkatnya dengan peringatan.
Cara memperbaikinya:
- Audit struktur judul Anda menggunakan Kerangka Dokumen sebelum dipublikasikan
- Tetapkan panduan gaya konten untuk tim Anda: H2 untuk bagian utama, H3 untuk subbagian, H4 untuk sub-subbagian — jangan pernah melewatkan level
- Gunakan analisis konten Yoast SEO atau Rank Math — keduanya merupakan masalah struktur judul
Masalah 4: Beberapa Tag H1 Dari Pembuat Halaman
Seperti apa: Halaman yang dibuat dengan Elementor atau Divi memiliki tiga atau empat tag H1 karena setiap bagian utama memiliki judul “H1” bergaya pahlawannya sendiri.
Cara memperbaikinya:
Di Elementor: Edit setiap widget judul → periksa pengaturan Tag HTML → setel hanya judul halaman utama ke H1, dan ubah yang lainnya ke H2 atau H3 sesuai kebutuhan.
Di Divi: Edit modul judul → di bawah Tingkat Lanjut → Tag HTML → ubah ke tingkat semantik yang benar.
Di Beaver Builder: Setiap modul heading memiliki pengaturan “Heading Tag” di tab Style. Audit masing-masing.
Masalah 5: Masalah Visibilitas Gutenberg H1
Seperti apa: Tema Anda tidak menampilkan judul postingan sebagai H1, dan Gutenberg telah menyembunyikan opsi H1 di blok Heading. Halaman Anda tidak memiliki H1.
Cara memperbaikinya:
Untuk pengembang yang mengelola situs di mana H1 harus ditempatkan di dalam area konten, Anda dapat memulihkan opsi H1 menggunakan filter di tema Anda. functions.php:
php
// Allow H1 in the Heading block
add_filter( 'allowed_block_types_all', function( $allowed_blocks ) {
return $allowed_blocks;
});Alternatifnya, alihkan ke tampilan “Edit sebagai HTML” untuk blok Heading dan atur secara manual ＜h1> di markup.
Untuk penyiapan agensi di tempat yang Anda inginkan mencegah editor dari menambahkan H1 (karena templat mengontrolnya), gunakan block_editor_settings_all filter untuk membatasi level judul di editor.
Cara Mengaudit Struktur Heading WordPress Anda (Langkah demi Langkah)
Metode 1: Plugin Gratis SkySEOManager
Gunakan Plugin SkySEOManager inbuild SEO Analyzer untuk menemukan semua masalah terkait Judul.
Baca panduan lengkapnya: cara mengaudit situs wordpress Anda menggunakan SkySEOManager untuk semua Masalah SEO
Metode 2: Gunakan Analis SEO Siteskyline gratis
Kunjungi Keluar Penganalisis SEO gratis dan masukkan URL Anda dan klik analzye sekarang.
Ini akan menunjukkan kepada Anda semua masalah dengan tag judul Anda.
Hirarki H1 WordPress: Daftar Periksa Agensi
Jika Anda membangun atau memelihara situs WordPress untuk klien, struktur judul harus menjadi bagian dari proses audit pra-peluncuran dan berkelanjutan Anda. Berikut daftar periksa yang dapat diulang:
Pada Tingkat Tema:
- Judul situs di header TIDAK dibungkus dengan ＜h1> (gunakan ＜p>, ＜span>, atau ＜div>)
- Judul postingan/halaman ditampilkan sebagai ＜h1> di ＜artikel> atau ＜utama> di semua jenis postingan
- Beranda hanya memiliki satu ＜h1> — baik dari judul situs atau bagian pahlawan
- Halaman arsip (kategori, tag, penulis) memiliki deskriptif ＜h1>
- Halaman 404 memiliki ＜h1>
Pada Tingkat Konten:
- Setiap halaman memiliki tepat satu ＜h1> di area konten (atau nol jika tema menanganinya melalui judul)
- Bagian utama menggunakan ＜h2>
- Subbagian menggunakan ＜h3> yang bersarang di dalam ＜h2> bagian
- Tidak ada level judul yang dilewati
- Judul tidak digunakan untuk penataan visual saja
Di Tingkat Plugin/Pembuat:
- Elemen judul Elementor/Divi/Beaver Builder memiliki pengaturan Tag HTML yang benar
- Area widget tidak menampilkan tag H1 atau H2 yang tidak disengaja
- Peringatan plugin SEO H1 teratasi di semua halaman utama
Hierarki Heading WordPress yang Benar — Berdasarkan Jenis Halaman
Satu pola tidak cocok untuk semua jenis halaman WordPress. Berikut struktur yang benar untuk masing-masingnya:
Postingan Blog / Halaman Postingan Tunggal
H1: Post Title (output by theme automatically)
H2: First major section
H3: Subsection
H3: Another subsection
H2: Second major section
H3: Subsection
H4: Detail
H2: Third major sectionBeranda (Halaman Depan Statis)
H1: Primary value proposition or page headline
H2: Service category or feature group
H3: Individual service or feature
H2: Testimonials or social proof section
H2: Call to action sectionHalaman Produk WooCommerce
H1: Product name (output by WooCommerce template)
H2: Product description heading
H2: Reviews
H2: Related productsKategori / Halaman Arsip
H1: Category name (e.g., "WordPress SEO Articles")
H2: Post title within loop (if posts are displayed with headings)Kesalahan Umum yang Merusak Struktur WordPress H1
Kesalahan 1: Menggunakan tag heading untuk menata teks Jika Anda ingin teks tebal besar yang bukan merupakan judul bagian, jangan gunakan H2. Tambahkan kelas CSS ke ＜p> atau ＜div> dan beri gaya secara visual. Menggunakan tag judul untuk estetika mencemari kerangka struktural Anda.
Kesalahan 2: Membiarkan editor memilih tingkat judul berdasarkan pandangan Tanpa panduan gaya konten, editor secara alami akan tertarik pada level judul itu Lihat Kanan. Panduan internal singkat — “H2 untuk bagian, H3 untuk subbagian, jangan pernah menggunakan H1 dalam konten” — mencegah sebagian besar masalah.
Kesalahan 3: Memasang tema WordPress tanpa memeriksa struktur judul Tidak semua tema WordPress premium menghasilkan markup judul yang benar. Sebelum berkomitmen pada suatu tema, periksa postingan demo: apakah judul postingan ditampilkan sebagai H1? Apakah judul situs menghindari H1 di halaman dalam?
Kesalahan 4: Dengan asumsi plugin SEO Anda mencakup semuanya Yoast dan Rank Math periksa postingan yang sedang Anda edit. Mereka tidak menangkap masalah judul yang disebabkan oleh templat header, widget footer, atau templat halaman arsip tema Anda. Audit manual atau perayapan Screaming Frog masih diperlukan.
Kesalahan 5: Memperbaiki tampilan visual alih-alih struktur HTML “Perbaikan” paling umum untuk masalah judul situs H1 adalah menambahkan CSS agar terlihat lebih kecil. Itu menyembunyikan masalah secara visual tetapi membiarkan markup yang rusak tetap di tempatnya. Perbaiki tag HTML, bukan hanya gayanya.
