Cara Membuat Table of Content Otomatis (TOC) Dalam Postingan Blog (Seo Friendly + Hirarki)

Kebanyakan dari blogger sekarang, cenderung menulis artikel yang panjang dengan alasan semakin banyak kata dan kalimat yang ditulis akan semakin dilirik oleh mesin pencari.

Namun sebagian besar pengunjung yang datang dari mesin pencari akan langsung membaca point utama di dalam artikel. Untuk memudahkan pengunjung mengakses langsung point - point penting tersebut, saya sarankan untuk menggunakan Daftar isi di dalam artikel.

Daftar isi atau lebih dikenal dengan nama Table of Content (TOC) saya bagi menjadi tiga jenis. Yang pertama TOC Manual, yang sudah pernah saya bahas di blog ini dengan judul TOC di blog AMP.

Yang kedua TOC Otomatis, dan yang ketiga TOC Semi Otomatis.

Sebelumnya saya pernah menggunakan TOC dari bibit.ws namun, tampilannya tidak hirarki atau bertingkat. saya juga pernah menggunakan TOC dari MBT namun, menurut saya kurang seo friendly.

Jadi saya berinisiatif untuk menggabungkan kedua script ini agar menghasilkan Table Of Content yang tampil hirarki sekaligus seo friendly, dan ternyata berhasil. walaupun gabungan scriptnya di bantu mas dian masihterjaga.

Cara kerja script ini akan mengambil judul heading di dalam artikel (h2,h3,h4) dan menjadikannya sebuah daftar isi yang tampil bertingkat. berikut ini cara membuat table of content otomatis yang lebih seo friendly di blog.

1. Table Of Content Otomatis

TOC ini hanya bisa tampil di atas artikel atau di bawah judul blog, tidak bisa di tempatkan di dalam artikel. Jika ingin menempatkan TOC di dalam artikel silahkan ikuti langkah kedua yaitu Semi Otomatis.

Pertama, silahkan masuk ke menu Dashboard Blog » Edit HTML, lalu simpan script berikut ini tepat di atas code </head>

<script type='text/javascript'>
    //<![CDATA[
      function tockeren(){
       var a=1,b=0,c="";
       document.getElementById("postMiddle").innerHTML=document.getElementById("postMiddle").innerHTML.replace(/<h([d]).*?>(n.*?|.*?)</h([d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='point"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#'+f.replace(/[^a-z0-9]/gi," ").trim().replace(/s/g,"_")+'" title="'+f+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='"+f.replace(/[^a-z0-9]/gi," ").trim().replace(/s/g,"_")+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("tocContent").innerHTML+=c}
    //]]>
</script>

Selanjutnya, cari code <data:post.body/> lalu ganti dengan code HTML berikut ini.

<div id='postMiddle'>
<div class='tableOfContent'>
  <input aria-label='Daftar Isi' class='toctoggle' id='toctoggle' role='button' type='checkbox'/>
  <span class='toctogglespan'><label class='toctogglelabel' for='toctoggle'/></span>
  <div id='tocContent'></div>
</div>
<data:post.body/>
<script>tockeren();</script>
</div>

Nah, selanjutnya tinggal tambahkan kode CSS berikut ini untuk memperindah tampilan Daftar isinya.

/* TOC Otomatis by idnxmus.com */
.post-body .tableOfContent {
     padding:12px 15px;
     margin:20px 0;
     background-color:#f8f9fa;
     border:1px solid #e4e9ef;
     border-radius:4px;
     font-size:16px;
     line-height:1.5em;
}
.post-body .tableOfContent #tocContent {
     margin:5px 0;
}
.post-body .tableOfContent #tocContent ol, .post-body .tableOfContent #tocContent ul {
     margin:0 0 10px;
     padding:10px 0 0 17px;
     position:relative;
}
.post-body .tableOfContent #tocContent ol ol, .post-body .tableOfContent #tocContent ul ul, .post-body .tableOfContent #tocContent ol ul, .post-body .tableOfContent #tocContent ul ol {
     padding-left:30px;
}
.post-body .tableOfContent #tocContent li {
     position:relative;
     margin:0 0 10px;
}
.post-body .tableOfContent #tocContent ol ul:before, .post-body .tableOfContent ol ol:before, .post-body .tableOfContent #tocContent ul ol:before, .post-body .tableOfContent ul ul:before {
     content:'';
     display:block;
     width:1px;
     height:calc(100% - 10px);
     position:absolute;
     left:-11px;
     border-left:1px dashed rgba(0,0,0,.2);
     top:0;
}
.post-body ol.point2 li:before {
     content:'';
     display:block;
     height:1px;
     width:15px;
     border-top:1px dashed rgba(0,0,0,.2);
     position:absolute;
     left:-38px;
     top:10px;
}
.post-body .tableOfContent #tocContent a {
     display:inline-table;
     margin-left:5px;
}
.post-body .tableOfContent #tocContent .point2 a {
     margin:0;
}
.post-body .tableOfContent #tocContent a:hover {
     text-decoration:underline;
}
.post-body .tableOfContent .toctogglelabel {
     display:block;
     cursor:pointer;
}
.post-body .tableOfContent .toctogglespan i.icon.icon-dropdown {
     float:right;
     margin:0;
}
ol.point2 li {
     list-style-type:circle;
     position:relative;
}
:not(:checked) > .toctoggle {
     display:inline !important;
     position:absolute;
     opacity:0;
}
.tableOfContent .toctogglespan .toctogglelabel:before {
     content:'Daftar Isi :';
     font-weight:600;
}
.toctoggle:checked ~ #tocContent {
     display:none;
}
label.toctogglelabel:after {
     background-image:url("data:image/svg+xml,<svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z' fill='%2309204C'/></svg>");
     content:'';
     margin-top:3px;
     width:16px;
     height:16px;
     background-size:cover;
     background-repeat:no-repeat;
     background-position:center center;
     float:right;
     transition:all .3s ease;
     -webkit-transition:all .3s ease;
}
.toctoggle:checked + .toctogglespan .toctogglelabel:after {
     -webkit-transform:rotate(180deg);
     transform:rotate(180deg);
}
.post-body ol.point2 {
     padding-top:10px;
}
:target::before {
     content:"";
     display:block;
     height:60px;
     margin-top:-60px;
     visibility:hidden;
}
@media screen and (max-width:480px) {
.post-body .tableOfContent {
     font-size:15px;
}
}

Jangan lupa klik tombol Simpan Tema untuk melihat hasilnya.

2. TOC Semi-Otomatis (Recomended)

Table Of Content yang satu ini sangat saya rekomendasikan, kenapa? karena, TOC ini bisa ditampilkan di dalam artikel sesuai keinginan anda.

Yang harus anda lakukan, pasang dulu script TOC otomatis yang saya tulis di atas, simpan tepat di atas code </head>.

Cara Membuat Menu Navigasi Scroll ke Samping di Bawah Header Blog

Selanjutnya, cari code <data:post.body/> lalu ganti dengan code HTML berikut ini.

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

Selanjutnya, tinggal tambahkan kode CSS yang juga sudah saya tulis di atas untuk memperindah tampilan Daftar isinya.

Terakhir, agar TOC tampil di dalam artikel. selipkan code berikut ini sesuai keinginan kalian. bisa di atas tag <h2> atau di antara paragraf 2 dan 3.

<div class='tableOfContent'>
  <input aria-label='Daftar Isi' class='toctoggle' id='toctoggle' role='button' type='checkbox'/>
  <span class='toctogglespan'><label class='toctogglelabel' for='toctoggle'/></span>
  <div id='tocContent'></div>
</div>
<script>tockeren();</script>

Kurang lebih penerapannya seperti berikut ini.

............................
....................
.................
<br/>
<br/>
....................
.........................
..............

<div class='tableOfContent'>
  <input aria-label='Daftar Isi' class='toctoggle' id='toctoggle' role='button' type='checkbox'/>
  <span class='toctogglespan'><label class='toctogglelabel' for='toctoggle'/></span>
  <div id='tocContent'></div>
</div>

<h2>Judul Heading</h2>
..............
..................
<br/>
<br/>
....................
.........................
..............

<h3>Judul Sub Heading</h3>
...........................
.........................
..............
<br/>
<br/>
...........................
.........................
..............

<!-- akhir artikel -->
<script>tockeren();</script>

Untuk code script <script>tockeren();</script> sebaiknya anda letakkan di akhir artikel agar pemanggilan scriptnya dilakukan setelah halaman berhasil dimuat. Jadi tidak akan memberatkan blog.

Untuk hasilnya bisa di lihat melalui demo berikut ini.

Kesimpulan

TOC Otomatis dan Semi Otomatis menggunakan script yang sama, hanya saja cara pemanggilan scriptnya yang berbeda. TOC semi otomatis lebih fleksibel karena penggunaanya yang sesuai keinginan. Jika ingin menggunakan TOC di dalam artikel, tinggal pasang code pemanggilnya.