Cara Membuat Daftar Isi Postingan Blog, Table of Content untuk Blogger

Berikut adalah cara untuk membuat daftar isi berupa link subjudul atau Table of Content (TOC) untuk sebuah blog. Menambahkan TOC pada awal postingan ini adalah salah satu tips SEO yang berguna untuk membuat postingan blog menjadi ramah pengguna dan mudah ditemukan oleh mesin pencari.

Apa itu daftar isi atau table of content?

Daftar Isi atau Table of Content (TOC) adalah ikhtisar dari isi tulisan yang terdiri dari link-link subjudul yang ada dalam artikel, disajikan dalam bentuk tabel. Karena itu, TOC hanya dapat digunakan dalam postingan yang panjang (long post), dengan setidaknya dua subjudul yang menggunakan tag-heading H3. Pada blog self-hosted WordPress, pemasangan daftar isi ini sangatlah mudah. Kita hanya perlu menginstal plugin seperti Table of Content Plus. Plugin ini secara otomatis akan menampilkan daftar isi yang diambil dari subjudul atau tag-heading (h2/h3) yang ada dalam tulisan. Terlihat cukup jelas ya, penjelasan mengenai apa itu Daftar Isi atau Table of Content (TOC) yang disebutkan dalam postingan ini.

Fungsi Daftar Isi

Daftar Isi akan meningkatkan kegunaan dan kemudahan penggunaan (user-friendly) dari sebuah postingan. TOC ini memberikan lebih banyak aksesibilitas dan navigasi yang lebih baik bagi pembaca. Menurut Tips Pro Blogger, Google lebih menyukai konten berkualitas tinggi yang terorganisir dan diformat dengan baik. Menambahkan elemen seperti tabel, bagian bernomor, dan daftar isi atau TOC adalah bagian dari upaya untuk mencapai peringkat yang tinggi di halaman hasil pencarian (SERP). Daftar Isi yang muncul di awal atau di bagian atas tulisan memungkinkan pembaca untuk langsung menuju bagian yang mereka butuhkan, tanpa harus membaca seluruh postingan. Karena itu, Daftar Isi yang terstruktur dengan baik dapat membantu dalam:

Memberikan tampilan profesional pada postingan atau artikel Anda.
Mengatur poin dari posting atau artikel Anda secara sistematis.
Mengelola harapan audiens Anda, karena memberikan tampilan tingkat tinggi dari posting atau artikel Anda.
Menyediakan peta jalan bagi audiens Anda untuk dengan mudah menavigasi seluruh posting atau artikel Anda.

TOC dapat meningkatkan pengalaman pengguna (user experience). Pengalaman pengguna merupakan elemen penting dari sebuah postingan atau artikel blog, namun sering diabaikan oleh banyak blogger saat ini. Menurut penelitian, pengalaman pengguna (UX) menjadi kunci dalam memperoleh peringkat yang lebih tinggi di halaman hasil pencarian (SERP). Untuk meningkatkan pengalaman pengguna blog Anda, penggunaan Daftar Isi akan sangat membantu. Berdasarkan penelitian, lebih dari 80% pembaca web hanya membaca poin-poin penting dalam sebuah postingan blog atau artikel. Penggunaan TOC sebaiknya diterapkan hanya pada artikel atau postingan yang memiliki panjang yang memadai, serta memiliki lebih dari 3 judul.

Apakah Daftar Isi Meningkatkan SEO?

Tentu saja, Daftar Isi juga memiliki manfaat dalam hal SEO. Ini adalah alasan mengapa: ketika Anda menulis postingan atau artikel yang panjang dan menyertakan daftar isi, konten Anda akan terbagi menjadi sub-bagian, masing-masing dengan aspek yang berbeda tentang topik yang sama. Dengan demikian, dengan adanya postingan blog atau artikel yang lebih panjang, blog Anda memiliki peluang lebih besar untuk mendapatkan peringkat yang lebih baik di mesin pencari. Google menganggap postingan yang lebih panjang sebagai faktor penentu peringkat.

Cara 1: Membuat Daftar Isi Subjudul Postingan Blog (Recommended)

Berikut ini cara pertama untuk menampilkan daftar isi otomatis postingan blog.

1. Tema > Edit HTML

2. Copas berikut ini di atas kode ]]</b:skin> atau </style>

/* TOC */

.table-of-contents{flex:auto;width:fit-content;background:#eee;font-size:14px;padding:11px;margin:8px 0 30px 0}

.table-of-contents li{margin:0 0 0.25em 0}

.table-of-contents a{color:#2a5365}

.table-of-contents h4{margin:0;cursor:pointer}

.table-of-contents h4:before{font-family:FontAwesome;content:"\f0c9";padding-right:7px;}

/* For Fontaweosme 5

.table-of-contents h4:before{font-family:'Font Awesome 5 Free';content:"\f0c9";padding-right:7px;}

*/

Catatan: Kode di atas menampilkan Font Awesome. Pastikan di template blog Anda sudah ada link ke Font Awesome seperti ini:

<link href='https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>

Jika belum ada, copas kode tersebut di atas kode </head>

3. Copas kode script daftar isi blog berikut ini di atas kode </body>

<script async='async' defer='defer'>

var head,newLine,el,title,link,ToC="<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>Daftar Isi</h4><ul style='display:none'>";$("article h2, article h3, article h4, article h5").attr("id",function(arr){return "point" + arr;});$("article h2, article h3, article h4, article h5").each(function(){el=$(this),title=el.text(),link="#"+el.attr("id"),ToC+=newLine="<li><a href='"+link+"'>"+title+"</a></li>"}),ToC+="</ul></nav>",$(".toc-pro").prepend(ToC);function toc() {$(".table-of-contents ul").toggle();}

</script>

Cara Menampilkannya di Postingan:

Langkah pertama cara Membuat Daftar Isi Otomatis dalam Postingan Blog (TOC for Blogger) sudah selesai. Saatnya kita menampilkannya dalam postingan.

Untuk menampilkan Daftar Isi dalam sebuah postingan, pastikan dulu postingan Anda memiliki minimal dua subjudul (Subheading) H2, H3, H4, ataupun H5. Biasanya cukup Subheading H3.

1. Selesai menulis artikel, lengkap dengan subjudul, klik mode HTML

2. Copas kode berikut ini di bawah alinea pertama postingan atau di mana saja yang Anda inginkan.

<div class="toc-pro"></div>

Itu dia cara membuat Daftar Isi di postingan blog atau Table of Content (TOC) untuk Blogger. Jika cara pertama gagal, coba cara kedua berikut ini.

Cara 2 Membuat Daftar Isi Subjudul Postingan Blog

Berikut ini cara kedua untuk memasang atau membuat daftar isi (table of content) otomatis postingan blog. Kodenya saya dapatkan dari My Blogger Tricks. Kode-kode ini harus dipasang dalam template blog dan di postingan.

1. Klik Tema > Edit HTML

2. Copas kode CSS Daftar Isi untuk Blogger ini di atas kode ]]</b:skin>

.mbtTOC {background-color: #eee;color: #707037;line-height: normal;margin: 10px 0;padding: 10px 0;width: auto;} .mbtTOC ol,.mbtTOC ul {margin:0;padding:0;} .mbtTOC ul { list-style:none; } .mbtTOC ol li,.mbtTOC ul li { padding:15px 0 0; margin:0 0 0 30px; font-size:15px; } .mbtTOC a{ color:#c00; text-decoration:none; } .mbtTOC a:hover{ text-decoration:underline; } .mbtTOC button{ background:#eee;font-size:16px;position:relative; outline:none; cursor:pointer; border:none; color:#707037; padding:0 0 0 15px;font-weight:700} .mbtTOC button:after{content: "\f03a"; font-family:FontAwesome;position:relative;left:5px;font-size:14px;font-weight: 300;}

3. Copas kode JS TOC for Blogger berikut ini di atas kode </head>

<b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'> //<![CDATA[ function mbtTOC() {var mbtTOC=i=headlength=gethead=0; headlength = document.getElementById("post-toc").getElementsByTagName("h3").length;for (i = 0; i < headlength; i++) {gethead = document.getElementById("post-toc").getElementsByTagName("h3")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h3")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}} //]]> </script> </b:if>

4. Pastikan ada Link Font Awesome di template blog Anda. Jika belum, ada tambahkan pula kode berikut ini di atas kode </head>

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>

Font Awesome digunakan untuk memunculkan icon dalam Daftar Isi.

5. Cari dan ganti kode kode <data:post.body/> posting (biasanya kode kedua) dengan kode ini:

<div id='post-toc'><data:post.body/></div>

6. Save! Simpan Template.

Pemasangan kode daftar isi sudah selesai di template. Kini cara memunculkan Daftar Isi atau TOC dalam postingan.

Memunculkan Daftar Isi di Halaman Posting

Pastikan postingan Anda memiliki minimal dua subjudul (subheading) dengan heading tags H3. Bisa juga dipasang di artikel yang suda ada, asalkan itu tadi... minimal ada dua subjudul.

Selesai menulis postingan, atau saat mengedit postingan, klik Mode HTML, lalu pasang dua kode ini:

1. Copas kode berikut ini di bawah alinea pertama atau sebelum subjudul pertama: