Cara Membuat Daftar Isi Seperti Table of Contents (TOC) Wikipedia yang SEO Friendly

Cara Membuat Table of Contents Wikipedia Di Dalam Artikel Blog

Wikipedia terkenal akan satu fiturnya yang bernama table of contents atau bisa juga disebut daftar isi. Tapi bukan sekedar daftar isi biasa, karena ketika di-klik akan otomatis loncat ke menu yang dituju alias jump link. Tentunya ini memudahkan pengunjung karena bisa langsung pergi ke menu yang dicari. Apalagi kalau artikelnya super panjang yang bikin pegel kalau scroll terus.

Dan daftar isi Wikipedia tersebut bisa lho dibuat untuk Blogger. Bukan sekedar gaya-gayaan dan membuat tampilan lebih menarik, tapi ada satu manfaat besar dari sisi SEO. Menu-menu tersebut akan terindex dan tampil dalam hasil pencarian. Inilah yang disebut jump link tadi.

Scriptnya sangat ringan karena hanya dibuat menggunakan CSS dan HTML saja. Tidak perlu Javascript jadi tidak menambah beban ketika loading.

Sebagai contoh adalah artikel dengan judul Cara Daftar Dan Membuat Facebook Instant Articles Untuk Blogger. Di dalamnya terdapat table of content untuk Blogspot seperti Wikipedia. Tidak hanya itu, perhatikan gambar berikut.

Cara Membuat Table of Contents (TOC) di Postingan Blogger

Ini adalah contoh dari search result ketika melakukan pencarian di Google. Blog Igniel mempunyai link tambahan di bagian bawah alias jump link yang terindex dari table of contents Wikipedia di dalam artikel. Berbeda dengan blog diatasnya (posisi satu) yang tidak mempunyai jump link. Meski blog Igniel ada di posisi kedua, ini akan lebih menarik perhatian pengunjung karena mereka menemukan satu hal berbeda yang tidak ada di blog lain.

Sudah tertarik menggunakannya? Yuk kita langsung ke tutorialnya.

Cara Membuat Table of Contents (TOC) Di Dalam Postingan Blogger

Pada dasarnya akan membaca id heading yang ada di dalam struktur HTML dan langsung loncat ke bagian heading yang dipilih. Bingung? Sekalian praktek saja biar lebih gampang dipahami.

Untuk mepercantik tampilan, tambahkan dulu kode CSS berikut "SEBELUM / DI ATAS" tag penutup </style>.
/* Table of Contents by igniel.com */
.toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px; display:table; line-height:1.6em;}
.toc h2 {display:inline; margin-right:10px}
.toc a {text-decoration:none}
.toc a:hover {text-decoration:underline}
.toc ul {list-style-type:none; list-style-image:none; margin-left:0px; margin-bottom:0px; padding:0px; text-align:left}
.toc ul li a {margin-left:.5em}
.toc ul li ul {margin-left:2em}
.toctogglelabel {cursor:pointer; color:#0645ad}
:not(:checked) > .toctoggle {display:inline !important; position:absolute;  opacity:0}
:not(:checked) > .toctogglespan:before {content:'['}
.toctoggle:not(:checked) + .toctitle .toctogglelabel:after {content:'sembunyikan';display: inline}
.toctoggle:checked + .toctitle .toctogglelabel:after {content:'tampilkan'}
:not(:checked) > .toctogglespan:after {content:']'}
.toctoggle:checked ~ ul{display:none}
:target::before {content:''; display:block; height:0px; margin-top:0px; visibility:hidden}

Perhatikan deretan kode terakhir yaitu :target::before. Jika kamu memakai menu sticky header / navigasi, ubah height dan margin-top sesuai dengan ukuran header / navigasi yang dipasang. Misal ukurannya 50px, maka ubah menjadi height:50px dan margin-top:-50px.

Sekarang masuk ke bagian utamanya yaitu membuat daftar isi table of content di dalam postingan Blogger. Ketika membuat post baru, pastikan memilih mode HTML, BUKAN Compose. Lalu simpan kode ini di paragraf awal.
<div class="toc">
  <input type="checkbox" role="button" id="toctoggle" class="toctoggle">
  <div class="toctitle">
    <h2>Daftar isi</h2>
    <span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span>
  </div>
  <ul>
    <li>1 <a href="#toc1" title="Judul Satu">Judul Satu</a></li>
    <li>2 <a href="#toc2" title="Judul Dua">Judul Dua</a></li>
    <li>3 <a href="#toc3" title="Judul Tiga">Judul Tiga</a></li>
    <li>4 <a href="#toc4" title="Judul Empat">Judul Empat</a></li>
    <li>5 <a href="#toc5" title="Judul Lima">Judul Lima</a>
      <ul>
      <li>5.1 <a href="#toc5_1" title="Sub Judul Lima ke Satu">Sub Judul Lima ke Satu</a></li>
      <li>5.2 <a href="#toc5_2" title="Sub Judul Lima ke Dua">Sub Judul Lima ke Dua</a></li>
      </ul>
    </li>
    <li>6 <a href="#toc6" title="Judul Enam">Judul Enam</a></li>
  </ul>
</div>

#toc1 dan #toc lain adalah elemen pemanggilnya. Kamu bisa menambahkan atau mengurangi sesuai kebutuhan.

Selanjutnya atur penulisan heading atau judul di artikel dengan menyertakan id yang sama dengan table of contents. Contohnya seperti ini.
<h2 id="toc1">Judul Satu</h2>
...isi paragraf satu

<h2 id="toc2">Judul Dua</h2>
...isi paragraf dua

<h2 id="toc3">Judul Tiga</h2>
...isi paragraf tiga

<h2 id="toc4">Judul Empat</h2>
...isi paragraf empat

<h2 id="toc5">Judul Lima</h2>
...isi paragraf lima

<h3 id="toc5_1">Sub Judul Lima ke Satu</h3>
...isi paragraf lima part 1

<h3 id="toc5_2">Sub Judul Lima ke Dua</h3>
...isi paragraf lima part 2

<h2 id="toc6">Judul Enam</h2>
...isi paragraf enam

Cara Membuat Daftar Isi (Table of Contents) Pada Blog dan Website

Untuk demo atau previewnya bisa cek di Codepen saya.


Sekian tutorial cara membuat daftar isi dalam postingan blog seperti table of contents Wikipedia. Semoga bisa dipahami dengan mudah. Dan ada baiknya TOC ini hanya digunakan pada postingan yang benar-benar panjang. Karena kalau kependekan malah mengganggu, orang tinggal scroll kok mesti pakai jump link segala. Jadi terkesan kurang bagus kan. Kalau semua postingan mau ditambahkan TOC, maka perbanyaklah jumlah kata setiap artikel. Semangat!
Baca Juga

DONASI VIA PAYPAL

Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.igniel.com. Terima kasih.

Artikel Terkait

2 Komentar

  1. makasih gan tutorialnya, sangat membantu

    ReplyDelete
  2. Terima kasih bebangat. Sudah saya bikin dan menjadi.

    Dimuatkan dalam artikel saya bertajuk "9 Tips Mudah Menjadi Usahawan Gigih". Boleh dilihat melalui Google+... Ya klik gambar yang ganteng itu... akan dibawa ke G+nya...

    ReplyDelete

Centang kotak "NOTIFY ME" agar mendapatkan notifikasi melalui email ketika ada yang membalas komentar kamu.