Panduan Level Advanced: Mengatur HTML Semantic Otomatis di Tema Block WordPress (FSE) untuk Melejitkan SEO

Mengapa Efisiensi Harus Dimulai dari Level Template?

Kebanyakan panduan SEO konvensional menyarankan Anda untuk mengubah elemen HTML di setiap halaman (Page) atau artikel (Post) secara manual satu per satu. Cara tersebut tentu tidak efisien, melelahkan, dan rawan terlewat.

Dengan memanfaatkan fitur Site Editor pada tema berbasis Block, kita bisa mengatur arsitektur dasarnya sekali saja di level cetakan (Template). Hasilnya:

1. Otomatis & Scalable: Setiap halaman atau artikel baru yang Anda rilis otomatis langsung mengadopsi kode yang bersih dan semantik sejak dalam kandungan sistem.
2. Kinerja SEO Maksimal (Crawl Budget): Googlebot dapat langsung mengenali anatomi website (mana menu, mana isi konten utama, mana catatan kaki) dalam hitungan milidetik.
3. DOM Lebih Ringan: Memotong kode tidak penting (bloatware) yang biasanya dihasilkan secara berlebihan oleh page builder pihak ketiga.

Catatan Penting: Perlu diingat bahwa setiap tema block yang Anda gunakan di WordPress mungkin akan memiliki struktur bawaan dan penamaan grup yang berbeda-beda tergantung pengembang temanya. Namun, secara standar minimal, setiap template FSE pasti memiliki tiga komponen utama ini: Header, Content Block (Blok Isi Konten), dan Footer.

1. Arsitektur Semantik pada Template “Page” (Halaman Statis)

Untuk cetakan halaman statis (seperti Beranda, Tentang Kami, atau Layanan), struktur ideal di dalam Site Editor harus memisahkan Header, Konten Utama, dan Footer secara tegas.

Langkah Pengaturan di Tema Twenty Twenty-Five (TT5):

1. Masuk ke dasbor WordPress -> Appearance (Tampilan) -> Editor.
2. Pilih menu Templates -> klik template Page.
3. Aktifkan List View (Tampilan Daftar) di pojok kiri atas untuk melihat hirarki blok Anda.
4. Cari Group Block utama yang bertindak sebagai pembungkus area konten (area yang berada di antara Header dan Footer template part).
5. Pada panel pengaturan kanan, buka menu Advanced (Lanjutan) -> HTML Element. Ubah opsi dari Default menjadi <main>.

Aturan di Level Konten Halaman (Content Level)

Setelah <main> dikunci di level template halaman, buatlah kebiasaan baik saat mendesain isi halaman statis Anda: Bungkus setiap bagian/seksi di dalam halaman (seperti area Hero, Fitur, atau Kontak) menggunakan Group Block tersendiri dan ubahlah elemen HTML-nya menjadi <section>.

Di dalam kode, struktur bersih yang akan dibaca oleh Googlebot adalah sebagai berikut:

<header>
    </header>

<main> 

    <section class="wp-block-group seksi-hero">
        <h2>Solusi Pengembangan Native WordPress</h2>
        <p>Kami membangun ekosistem web yang ringan, cepat, dan aman.</p>
    </section>

    <section class="wp-block-group seksi-layanan">
        <h2>Layanan Utama Kami</h2>
        <p>Optimasi Core Web Vitals dan Rekayasa Kode Tanpa Bloatware.</p>
    </section>

</main>

<footer>
    <p>&copy; 2026 Rahmat Gumilar. All Rights Reserved.</p>
</footer>

Baca Juga

2. Arsitektur Semantik pada Template “Single Post” (Artikel/Blog)

Untuk halaman artikel, kita ingin agar setiap teks tulisan diidentifikasi oleh Google sebagai entitas konten mandiri yang utuh (independent content), yang sangat bagus untuk memicu kemunculan di Google News atau Google Discover.

Studi Kasus Lapangan pada Tema Twenty Twenty-Five (TT5):

Jika Anda mengecek template bawaan Single Post pada tema Twenty Twenty-Five, Anda akan menemukan bahwa blok yang menampilkan isi postingan bernama Content (atau Post Content). Secara bawaan, elemen HTML pada blok ini di-set ke Default yang menghasilkan tag <div>.

Karena tema TT5 membuka akses kustomisasi HTML Element langsung pada blok tersebut, kita bisa mengubahnya agar lebih ramah SEO.

Langkah Pengaturan di Site Editor TT5:

1. Di dalam Site Editor, pilih Templates -> klik template Single Post.
2. Temukan blok bawaan yang bernama Content (Blok isi postingan artikel Anda).
3. Klik blok tersebut, lalu buka panel kanan menu Advanced -> HTML Element.
4. Ubah opsinya dari Default menjadi <article>.

Aturan di Level Isi Artikel: Bungkus Group per Judul

Di dalam isi tulisan artikel Anda sendiri, best practice yang paling ideal adalah membungkus setiap sub-bab/judul (Heading H2/H3) beserta paragraf penjelasnya ke dalam Group Block masing-masing.

Struktur kode super rapi yang akan terbentuk dan dibaca oleh Googlebot adalah seperti ini:

<header>
    </header>

<main>
    <article class="wp-block-post-content">
        
        <h1>Judul Utama Artikel Blog Anda</h1>
        
        <div class="wp-block-group sub-bab-satu">
            <h2>1. Dasar-Dasar Pengodean Bersih</h2>
            <p>Paragraf penjelasan bab pertama...</p>
        </div>

        <div class="wp-block-group sub-bab-dua">
            <h2>2. Implementasi pada Sistem Gutenberg</h2>
            <p>Paragraf penjelasan bab kedua...</p>
        </div>

    </article>
</main>

<footer>
    </footer>

Kenapa Pengelompokan Grup per Judul Ini Penting? Selain membuat kode tidak “lepas” berserakan, struktur komponen modular ini memudahkan Anda jika ke depannya ingin memberikan styling visual khusus (seperti warna latar belakang berbeda atau variasi border) khusus pada sub-bab tertentu tanpa merusak keseluruhan tata letak artikel.

3. Jangan Lupakan Template Part (Header & Footer)

Secara default, WordPress FSE pada tema Twenty Twenty-Five sebenarnya sudah otomatis merender komponen Template Part Header dengan tag <header> dan Footer dengan tag <footer>. Namun, untuk memastikan kodenya 100% konsisten dan aman dari kerusakan struktur akibat kustomisasi layout yang kompleks, Anda bisa menguncinya secara manual:

1. Buka Template Part Header di Site Editor -> Klik Group Block terluar di dalamnya -> Set HTML Element ke <header>.
2. Buka Template Part Footer di Site Editor -> Klik Group Block terluar di dalamnya -> Set HTML Element ke <footer>.