Cara Membuat Daftar Isi Otomatis di Blogger agar Pembaca Betah dan SEO Makin Kuat

anaksmanda.com -

Artikel yang panjang dan lengkap memang disukai Google, tapi pembaca sering kesulitan mencari bagian yang mereka butuhkan. Di sinilah daftar isi otomatis di Blogger berperan. Dengan daftar isi, pembaca bisa langsung lompat ke subjudul yang relevan, waktu baca bertambah, dan Google lebih mudah memahami struktur tulisan kalian.

Kabar baiknya, kalian tidak perlu membuat daftar isi secara manual di setiap postingan. Cukup pasang satu kode di tema, maka setiap artikel yang memakai subjudul (Heading) akan otomatis memiliki daftar isi. Berikut panduan lengkapnya.

Kenapa Daftar Isi Penting untuk SEO Blog?

Daftar isi bukan sekadar hiasan. Ada beberapa manfaat nyata yang bisa kalian rasakan:

• Navigasi lebih mudah. Pembaca yang datang dari Google biasanya mencari satu jawaban spesifik. Daftar isi membantu mereka menemukannya dalam hitungan detik.
• Peluang muncul sitelink "Langsung ke". Google kadang menampilkan tautan ke bagian tertentu artikel langsung di hasil pencarian. Struktur heading yang rapi dengan anchor (ID) memperbesar peluang ini.
• Bounce rate cenderung turun. Ketika pembaca melihat isi artikel lengkap sejak awal, mereka lebih tertarik untuk melanjutkan membaca.
• Memaksa penulis lebih terstruktur. Kalau daftar isinya berantakan, itu tanda struktur artikel perlu dirapikan.

Persiapan Sebelum Memasang Daftar Isi

Kode daftar isi bekerja dengan membaca subjudul di dalam artikel. Karena itu, pastikan kalian sudah terbiasa memakai format Heading dan Subheading di editor Blogger, bukan sekadar teks yang ditebalkan.

1. Gunakan Judul (H2) untuk bagian utama artikel.
2. Gunakan Subjudul (H3) untuk poin-poin di dalam bagian utama.
3. Hindari memakai H1 di dalam isi artikel, karena judul postingan sudah menjadi H1 di sebagian besar tema.

Sebelum mengedit tema, selalu buat cadangan. Masuk ke Tema, klik tanda panah di samping tombol Sesuaikan, lalu pilih Cadangkan. Jika ada yang salah, kalian bisa mengembalikannya kapan saja.

Langkah Memasang Daftar Isi Otomatis di Blogger

1. Tambahkan Kode CSS

Buka Tema > Edit HTML, lalu cari kode </b:skin> (gunakan Ctrl+F). Tempel kode berikut tepat di atasnya:

.toc-box{background:#f7f9fc;border:1px solid #e3e8ef;border-radius:8px;padding:14px 18px;margin:20px 0}
.toc-box b{display:block;margin-bottom:8px;font-size:16px}
.toc-box ol{margin:0;padding-left:20px}
.toc-box li{margin:4px 0}
.toc-box li.toc-h3{margin-left:16px;list-style:circle}
.toc-box a{text-decoration:none}

2. Tambahkan Kode JavaScript

Masih di Edit HTML, cari </body> lalu tempel kode berikut tepat di atasnya. Kode ini hanya berjalan di halaman postingan, sehingga tidak membebani halaman beranda.

<b:if cond='data:view.isPost'>
<script>
//<![CDATA[
(function(){
  var body=document.querySelector('.post-body');
  if(!body) return;
  var hs=body.querySelectorAll('h2,h3');
  if(hs.length<3) return;
  var box=document.createElement('div');
  box.className='toc-box';
  var html='<b>Daftar Isi</b><ol>';
  hs.forEach(function(h,i){
    if(!h.id) h.id='bagian-'+(i+1);
    html+='<li class="toc-'+h.tagName.toLowerCase()+'"><a href="#'+h.id+'">'+h.textContent+'</a></li>';
  });
  box.innerHTML=html+'</ol>';
  hs[0].parentNode.insertBefore(box,hs[0]);
})();
//]]>
</script>
</b:if>

3. Simpan dan Periksa Hasilnya

Klik ikon simpan, lalu buka salah satu artikel yang memiliki minimal tiga subjudul. Daftar isi akan muncul tepat sebelum subjudul pertama. Klik salah satu item untuk memastikan halaman melompat ke bagian yang benar.

Tips Agar Daftar Isi Benar-Benar Membantu

Tulis Subjudul yang Deskriptif

Subjudul seperti "Langkah 1" kurang informatif. Lebih baik tulis "Langkah 1: Tambahkan Kode CSS". Pembaca dan Google sama-sama lebih cepat paham isi bagian tersebut.

Jangan Terlalu Banyak Subjudul

Daftar isi berisi 30 item justru membingungkan. Idealnya 5–12 item untuk artikel 1.000–2.000 kata. Kalau terlalu banyak, pertimbangkan memecah artikel menjadi beberapa tulisan dan saling menautkannya. Panduan menautkan artikel bisa kalian baca di cara membuat internal link yang benar.

Perhatikan Kecepatan Blog

Kode di atas sengaja dibuat ringan tanpa library tambahan seperti jQuery. Tetap periksa kecepatan blog secara berkala, terutama jika kalian memasang banyak widget. Tips lengkapnya ada di artikel cara mempercepat loading blog Blogger.

Masalah yang Sering Terjadi dan Solusinya

Masalah	Penyebab	Solusi
Daftar isi tidak muncul	Class isi artikel di tema bukan .post-body	Cek class pembungkus artikel di tema, lalu ganti selector di kode
Muncul di artikel pendek	Batas minimal subjudul terlalu kecil	Ubah angka 3 pada kode menjadi 4 atau 5
Link tidak melompat	Tema memakai header melayang yang menutupi judul	Tambahkan CSS scroll-margin-top:80px pada h2 dan h3
Error saat menyimpan tema	Kode JavaScript tidak dibungkus CDATA	Pastikan baris //<![CDATA[ dan //]]> ikut tersalin

Pertanyaan yang Sering Diajukan

Apakah daftar isi otomatis memengaruhi peringkat di Google?

Daftar isi tidak langsung menaikkan peringkat, tetapi membantu pengalaman pembaca dan memperjelas struktur artikel. Dua hal ini termasuk sinyal yang diperhatikan Google dalam jangka panjang.

Apakah bisa dipasang di halaman statis?

Bisa. Ganti kondisi data:view.isPost menjadi data:view.isSingleItem agar kode juga berjalan di halaman statis seperti halaman panduan.

Apakah aman untuk blog AMP?

Tidak. Halaman AMP tidak mengizinkan JavaScript kustom. Untuk tema AMP, buat daftar isi manual dengan tautan anchor di setiap artikel.

Kesimpulan

Memasang daftar isi otomatis di Blogger cukup dilakukan sekali, tetapi manfaatnya terasa di semua artikel. Kuncinya ada pada kebiasaan menulis dengan struktur heading yang rapi. Setelah daftar isi terpasang, lanjutkan dengan memperkuat fondasi SEO lainnya, misalnya mempelajari cara menulis artikel SEO friendly agar setiap tulisan kalian makin mudah ditemukan.