Bagaimana Cara Membuat Daftar Isi di Artikel Website?

mamehru
Question

Belakangan saya lumayan sering melihat situs-situs di halaman pertama Google sudah banyak yang menerapkan daftar isi, tampilannya mirip daftar isi wikipedia.

Bagaimana ya caranya?

sholeh
Answer

Kalau di wordpress biasanya pakai plugin table of content, kalau di blogger cukup tambahakan saja kode htmlnya seaching aja di google banyak kok.

mamehru
Answer

Baaik gan, saya coba googling lagi.

masrei
Answer

Ya, menambahkan jawaban dari mas sholeh, ada dua cara yang bisa diikuti, dengan plugin atau manual. Untuk plugin, biasanya digunakan pada platform CMS Wordpress.

Sementara manual, bisa digunakan untuk Wordpress, Blogger, atau platform lainnya yang mengizinkan mengedit HTML di dalamnya.

masrei
Answer

Membuat Daftar Isi Blog dengan Plugin

Pada case ini kita menggunakan Wordpress sebagai studi kasusnya.

Beberapa plugin yang bisa mas coba, di antaranya:

  • Table of Contents Plus / 300.000+ Active Installation
  • Easy Table of Contents / 100.000+ Active Installation
  • Powerkit / 6.000+ Active Installation
  • Ultimate Blocks / 6.000+ Active Installation

Dua plugin pertama: table of content plus dan easy table of content dikhususkan untuk menampilkan daftar isi saja.

Namun, dua berikutnya: powerkit dan ultimate block memiliki beberapa fitur yang salah satunya adalah daftar isi.

Lebih bagus yang mana?

Menurut saya, semuanya sama-sama bagus. Tinggal menyesuaikan saja mas lebih mudah dan suka tampilan daftar isinya yang mana.

1. Table of Contents Plus

Instalasi

Plugin > Tambah Baru > Table of Contents Plus > Aktifkan.

Kemudian, table of contents plus dapat diatur di menu Pengaturan > TOC+.

Misalnya, mas ingin mengatur posisi daftar isi sebelum heading pertama atau sesudah heading pertama, ini opsinya ada di pengaturan.

Pengaturan yang biasanya digunakan:

  • Position                                                                           : before first heading (default)
  • Show when                                                                     : 3
  • Auto insert for the following content types                      : post
  • Heading text (show title)                                                 : daftar isi
  • Heading text (show text)                                                 : lihat
  • Heading text (hide text)                                                  : sembunyikan
  • Show hierarchy                                                              : ✓
  • Number list items                                                           : ✓

Sementara itu, pengaturan lainnya perihal tampilan. Defaultnya, daftar isi TOC+ ini tidak tampil 100%, bila mas ingin tampil full sebesar lebar layar, maka pilih Width: 100%.

Kemudian, klik Update Options untuk menyimpan pengaturan terbaru. Nantinya, secara otomatis daftar isi akan otomatis dibuat pada tiap postingan mas.

Berikut ini hasil akhir setelah menggunakan table of contents plus.

Tips table of contents plus.

Bila ingin suatu postingan tidak memiliki daftar isi, cukup tambahkan shortcode [no_toc] pada postingan. Biasanya saya menambahkan sebelum heading pertama.

masrei
Answer

2. Easy Table of Contents

Instalasi

Tak jauh berbeda dari plugin table of contents plus. Pengaturan pada easy table of contents juga hampir sama.

 

  • Enable support                                                              : Pos
  • Auto insert                                                                      : Post
  • Show when                                                                     : 3
  • Header label                                                                   : Daftar Isi
  • Advance > Headings                                                     : H2, H3, H4, dst (kecuali H1)

 

Hasil implementasi easy table of contents seperti ini.

masrei
Answer

3. Powerkit

Instalasi

Plugin powerkit ini sedikit berbeda dengan plugin sebelumnya, terdapat beberapa module pada powerkit yang bisa digunakan, salah satunya table of contents.

Cara mengaktifkan daftar isinya: Pengaturan powerkit > aktifkan modul Table of Contents.

Lalu, tambahkan shortcode pada postingan.

[powerkit_toc title="Table of Contents" depth="2" min_count="3"]

Hasilnya seperti ini.

masrei
Answer

4. Ultimate Blocks

Instalasi

Cara kerja plugin ini hampir sama dengan powerkit, menggunakan shortcode untuk memlilih modul dari plugin.

Untuk modul table of contents atau modul lainnya cukup ketik /ulti pada halaman post. Lalu, muncul tampilan seperti berikut ini dan pilih table of contents.

Berikut hasil setelah menambahkan table of contents dari Ultimate Blocks. Pengaturan table of contents lebih lanjut ada di bagian sidebar kanan.

Pada sidebar ini, bisa dipilih heading mana saja yang akan dimasukkan pada daftar isi, visibility daftar isi, smooth scrooling, dan CSS tambahan.

Hasil daftar isi dari plugin ultimate blocks, seperti ini:

masrei
Answer

Membuat Daftar Isi Blog Manual

Untuk cara ini harus memiliki pemahaman dasar mengenai HTML dan CSS.

1. Edit as HTML atau sunting sebagai HTML

2. Beri id pada tiap heading tag postingan.

3. Tambahkan list pada postingan

4. Tambahkan link yang menuju id masing-masing heading tag.

5. Setelah masing-masing list diberi link ke id yang telah dibuat, hasilnya akan seperti ini.

Untuk mempercantik tampilan, perlu menambahkan CSS.

masrei
Answer

Keunggulan Menggunakan Daftar Isi Apa?

Ya, membantu pengunjung lebih mudah dalam navigasi postingan blog. Ya, sama seperti Wikipedia, jadinya pengunjung lebih mudah menemukan mana informasi yang mereka mau.

Namun, ada lagi. Menariknya, website yang memiliki daftar isi atau table of contents bisa mendapatkan fitur tambahan dalam SERP mereka. Seperti ini contohnya:

Ya, daftar isinya akan ditampilkan bersama meta description SEOnya.

Tapi tidak semua website yang mendapatkan fitur ini, kita mengoptimalkan lalu Google yang akan memutuskannya.

Bagusan mana, plugin atau manual?

Ya, kalau pengen cepat, plugin adalah pilihannya.

Please login to reply