Cara Membuat Table of Content (TOC) Otomatis di Blogger

Daftar Isi

Cara Membuat Table of Content (TOC) Otomatis di Blogger - Membuat blog di Blogger adalah salah satu cara yang paling mudah dan efektif untuk berbagi informasi secara online. Salah satu fitur yang dapat meningkatkan pengalaman pembaca dan juga mempermudah navigasi di dalam sebuah artikel panjang adalah Table of Content (TOC) atau Daftar Isi. TOC ini sangat bermanfaat terutama untuk artikel-artikel yang memiliki banyak subjudul, sehingga pembaca bisa langsung menuju bagian yang mereka cari tanpa harus menggulir halaman terlalu jauh.

Cara Membuat Table of Content di Blogger

Berdasarkan pengalaman pribadi saya, saya akan berbagi langkah-langkah detail untuk membuat Table of Content (TOC) otomatis di Blogger. Tutorial ini saya rancang agar mudah diikuti bahkan untuk pemula sekalipun, lengkap dengan tips, kode HTML yang diperlukan, dan penjelasan tentang manfaat TOC.

Apa Itu Table of Content (TOC) dan Mengapa Penting?

Table of Content atau Daftar Isi adalah sebuah komponen yang berfungsi sebagai navigasi internal dalam sebuah artikel. TOC biasanya terdiri dari daftar tautan yang mengarahkan pembaca ke berbagai bagian atau subjudul dari artikel. TOC umumnya ditempatkan di awal artikel, sebelum konten utama, agar memudahkan pembaca menemukan informasi yang mereka butuhkan.

Manfaat TOC tidak hanya untuk pembaca, tapi juga membantu dalam hal SEO (Search Engine Optimization). Google dan mesin pencari lainnya sangat menyukai artikel yang terstruktur dengan baik, dan TOC memberikan sinyal bahwa artikel tersebut terorganisir dan mudah dinavigasi.

Manfaat Menggunakan TOC di Blogger

Mengapa saya merasa TOC sangat penting di Blogger? Berikut beberapa manfaat yang saya rasakan setelah memasang TOC di beberapa artikel saya:

Meningkatkan Pengalaman Pengguna
Pembaca dapat langsung melihat apa saja yang akan dibahas dalam artikel dan langsung melompat ke bagian yang paling relevan bagi mereka.
Memperpanjang Durasi Kunjungan
Dengan TOC, pembaca lebih cenderung menggulir lebih jauh dan membaca bagian-bagian lain dari artikel. Hal ini meningkatkan time on site, yang baik untuk SEO.
Memudahkan Navigasi
Ketika artikel panjang, tanpa TOC pembaca harus menggulir terus-menerus. Dengan TOC, pembaca bisa langsung ke subjudul yang diinginkan.
Mengurangi Bounce Rate
Jika artikel Anda terlalu panjang tanpa panduan, pembaca bisa saja cepat bosan dan meninggalkan halaman. TOC membantu mereka tetap tertarik dan fokus pada konten yang mereka cari.

Langkah Persiapan: Mengenal Struktur Artikel yang Ideal untuk TOC

Sebelum memasang TOC, pastikan artikel Anda memiliki struktur yang jelas dan mudah dipahami. TOC akan menarik setiap subjudul yang menggunakan tag <h2>, <h3>, dan seterusnya. Pastikan Anda menandai setiap bagian artikel dengan benar menggunakan heading-heading tersebut.

Sebagai contoh, artikel saya biasanya menggunakan struktur seperti ini:

Judul utama menggunakan tag <h1>
Subjudul menggunakan tag <h2>
Sub-subjudul menggunakan tag <h3>

Struktur yang jelas tidak hanya membantu TOC berfungsi dengan baik, tapi juga meningkatkan keterbacaan dan SEO.

Langkah-langkah Membuat Table of Content (TOC) Otomatis di Blogger

Untuk membuat TOC otomatis di Blogger, Anda membutuhkan beberapa langkah teknis. Jangan khawatir, saya akan memandu Anda secara rinci berdasarkan pengalaman pribadi saya.

Menyiapkan Kode HTML dan CSS untuk TOC

Langkah pertama adalah menyiapkan kode HTML dan CSS untuk TOC. Berikut adalah kode yang saya gunakan dalam artikel saya.


 <b:if cond='data:blog.pageType == &quot;item&quot; or data:blog.pageType == &quot;static_page&quot;'>
<style media='all' type='text/css'>
/*
 * Blogspot TOC
 * https://bibit.ws/toc-di-blogspot.php
*/
.bwstoc {
 margin: 10px 0;
}
.bwstoc ol, .bwstoc ul {
 margin: 0 0 15px 20px;
 padding: 0;
}
.bwstoc ul {
 list-style: disc;
}
.bwstoc ol li, .bwstoc ul li {
 font-size: 95%;
 padding: 5px 10px 0 0;
 margin: 0 0 0 30px;
}
.bwstoc a {
 text-decoration: none;
}
.bwstoc a:hover {
 text-decoration: underline;
}
.bwstoc .bwstocHeader {
 font-weight: bold;
 font-size: 100%;
 position: relative;
 outline: none;
 border: none;
 padding: 5px 15px 5px 5px;
 margin: 5px 10px;
}
.bwstoc .bwstocHeader a {
 text-decoration: none;
 cursor: pointer;
}
.bwstoc .bwstocHeader a:hover {
 text-decoration: underline;
}
</style>
<!-- Blogger TOC -->
<script type='text/javascript'>

//<![CDATA[
function bwstoc() {
 var bwstoc = i = headinglength = getheading = 0;
 headinglength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4, h5, h6").length;
 if (headinglength > 1) {
 // Hanya Tampil Jika Ditemukan Minimal 2 Heading
 for (i = 0; i < headinglength; i++) {
 getheading = document.getElementById("post-toc").querySelectorAll("h2, h3, h4, h5, h6")[i].textContent;
 var bws_1 = getheading.replace(/[^a-z0-9]/gi," ");
 var bws_2 = bws_1.trim();
 var getHeadUri = bws_2.replace(/\s/g, "_");
 document.getElementById("post-toc").querySelectorAll("h2, h3, h4, h5, h6")[i].setAttribute("id", getHeadUri);
 bwstoc = "<li><a href='#" + getHeadUri + "'>" + getheading + "</a></li>";
 document.getElementById("bwstoc").innerHTML += bwstoc;
 }
 } else { document.write("<style>.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>"); }
}
function bwstocShow() {
    var bwstocBtn = document.getElementById('bwstoc');
 var bwstocWrapID = document.getElementById('bwstocwrap');
 var bwstocLink = document.getElementById('bwstocLink');
    if (bwstocBtn.style.display === 'none') {
        bwstocBtn.style.display = 'block';
 bwstocWrapID.style.display = 'block';
 bwstocLink.innerHTML = 'Tutup';
 
    } else {
        bwstocBtn.style.display = 'none';
 bwstocWrapID.style.display = 'inline-block';
 bwstocLink.innerHTML = 'Tampil';
    }
}
//]]>
</script>
<noscript><style media='all' type='text/css'>#bwstocwrap,.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>
</b:if>

Kode ini akan menciptakan tampilan TOC yang rapi dan responsif di perangkat apapun. TOC tersebut akan memiliki judul, daftar yang bisa diklik, dan tampil dengan background yang sedikit berbeda dari konten lainnya.

Memasang Kode TOC di Blogger

Setelah kode HTML dan CSS siap, Anda bisa langsung memasangnya di Blogger. Berikut adalah langkah-langkahnya:

Masuk ke Dashboard Blogger Anda
Masuk ke Tema
Klik tombol Edit HTML
Kode diatas silahkan di copy dan paste diatas kode </head>
Simpan Pengaturan

Setelah Anda menambahkan kode, jangan lupa untuk menyimpan pengaturan dan melihat hasilnya di halaman blog Anda.

Cara Membuat TOC Secara Otomatis

Untuk membuat TOC secara otomatis di blogger agar tidak selalu membuat TOC saat posting artikel, caranya cukup mudah, caranya sebagai berikut:

Cari kode <data:post.body/> dan ganti dengan kode di bawah ini:

<div id='post-toc'>
<div class='bwstoc' id='bwstocwrap' style='display:inline-block;'><div class='bwstocHeader'>Daftar Isi</div><ul id='bwstoc' style='display:block'/></div>
<data:post.body/>
<script>bwstoc();</script>
</div><!-- end TOC -->

Kode ini akan memeriksa dan menampilkan TOC jika memenuhi syarat yaitu h2 dan h3.

Pengalaman Pribadi Menggunakan TOC di Blogger

Awalnya, saya ragu untuk menggunakan TOC di blog saya karena saya merasa tidak terlalu dibutuhkan. Namun setelah melihat beberapa artikel saya yang cukup panjang dan memiliki banyak subjudul, saya memutuskan untuk mencoba. Hasilnya, pembaca lebih sering berinteraksi dengan artikel, dan statistik blog saya menunjukkan bahwa durasi kunjungan meningkat.

Menggunakan TOC membantu saya dalam:

Meningkatkan user engagement karena pembaca bisa langsung menemukan informasi yang mereka butuhkan.
Menyusun artikel dengan lebih rapi dan terstruktur.
Meningkatkan ranking di mesin pencari karena Google menyukai artikel yang mudah dinavigasi.

Kesalahan Umum dalam Pembuatan TOC dan Cara Mengatasinya

Ada beberapa kesalahan yang sering saya temui ketika pertama kali membuat TOC:

Tidak Menggunakan Tag Heading yang Tepat
Beberapa orang sering menggunakan tag <div> atau <span> untuk subjudul, padahal tag yang tepat adalah <h2>, <h3>, dan seterusnya. Hal ini menyebabkan TOC tidak bisa mendeteksi subjudul tersebut.
TOC Tidak Tampil di Halaman Blog
Jika TOC tidak muncul, pastikan Anda telah menambahkan kode CSS dan JavaScript dengan benar, dan pastikan ada cukup subjudul yang terdeteksi.

Tips Optimalisasi TOC untuk SEO

TOC dapat dioptimalkan untuk SEO dengan beberapa cara:

Gunakan Kata Kunci di Subjudul
Pastikan subjudul dalam artikel mengandung kata kunci yang relevan, karena Google akan lebih mudah menemukan konten Anda melalui TOC.
Tambahkan Anchor Link
TOC secara otomatis menciptakan anchor link ke setiap subjudul, yang juga membantu dalam SEO karena mesin pencari bisa memahami struktur artikel dengan lebih baik.

Contoh Penggunaan Table of Content pada Artikel Blogger

Sebagai contoh, artikel ini sendiri menggunakan struktur TOC di bagian atas. Jika Anda scroll ke bagian atas artikel, Anda akan melihat bagaimana TOC ini mengarahkan ke setiap subjudul dengan mudah.

FAQ: Pertanyaan yang Sering Diajukan Tentang TOC di Blogger

Q: Apakah TOC penting untuk SEO?
A: Sangat penting. Google lebih menyukai artikel yang terstruktur, dan TOC membantu mengorganisir artikel secara sistematis.

Q: Bagaimana cara menyembunyikan TOC pada artikel yang pendek?
A: Anda bisa menggunakan kode JavaScript yang hanya menampilkan TOC jika ada lebih dari 3 subjudul, seperti yang telah saya jelaskan sebelumnya.

Q: Apakah TOC berpengaruh terhadap tampilan di perangkat mobile?
A: Jika CSS dan HTML yang digunakan responsif, TOC akan tampil dengan baik di perangkat mobile maupun desktop.

Kesimpulan

Membuat Table of Content (TOC) otomatis di Blogger adalah langkah cerdas untuk meningkatkan pengalaman pembaca dan juga optimasi SEO. Dengan mengikuti langkah-langkah di atas, Anda dapat membuat TOC yang rapi dan fungsional tanpa memerlukan plugin tambahan. Pengalaman pribadi saya menunjukkan bahwa TOC membantu meningkatkan interaksi pembaca dan juga memudahkan navigasi pada artikel-artikel panjang.

Sumber: https://bibit.ws/toc-di-blogspot.php (tampil dan tutupnya sudah saya hilangkan)