19 Agu 2022

SEO Blogger: Menampilkan Daftar Isi (TOC) Secara Otomatis

  Agustus 19, 2022


Kita dapat meningkatkan SEO dari Blogger atau Blogspot kita melalui penambahan Daftar Isi atau Table Of Content. Untuk selanjutnya, kita akan mempergunakan singkatan TOC untuk menyebut Daftar Isi atau Table Of Content. TOC adalah tabel yang berisi daftar hyperlink dari sub-judul artikel.

Untuk lebih jelasnya, kita dapat melihat contoh TOC yang ada pada artikel ini. Dan website ini juga dibangun mempergunakan Blogger dari Google. Jadi kita bisa mempelajari dan sekaligus melihat contohnya.

Manfaat TOC pada blog kita terutama untuk:

  1. Memberi kesan profesional pada artikel.
  2. Menampilkan pokok-pokok bahasan artikel.
  3. Mengelola ekspektasi pengunjung, dengan cara mengetahui garis besar artikel.
  4. Menyediakan peta bagi pengunjung untuk langsung menuju bagian yang ingin dibaca.
  5. Meningkatkan SEO dari artikel dan website kita.
Artikel ini akan membahas cara menampilkan TOC secara otomatis pada Blogger (atau Blogspot).

    Daftar Isi (TOC) Akan Muncul Otomatis?

    Dengan mendefinisikan Heading dan Sub-Heading secara teratur dan konsisten, otomasi TOC dapat
    dilakukan karena ada acuan jelas mengenai kalimat mana yang perlu disertakan. Jadi tidak perlu upaya tersendiri untuk menampilkan TOC, tidak perlu input manual. Begitu artikel di-publish, TOC akan muncul dengan sendirinya.

    Apakah Daftar Isi (TOC) Meningkatkan SEO?

    Tentu saja! TOC sangat membantu dalam meningkatkan SEO terutama apabila kita menulis postingan yang panjang. Postingan kita akan terbagi menjadi beberapa bagian, masing-masing dengan aspek yang berbeda pada topik yang sama. Karenanya, dengan postingan yang lebih panjang dan dilengkapi dengan TOC, postingan kita akan mendapat peringkat yang lebih baik di search-engines. Serta tahukah bahwa Google menganggap postingan yang lebih panjang sebagai salah satu faktor peringkat?

    Selain itu juga meningkatkan Click-Through-Rate (CTR) website kita. Hal ini disebabkan karena Google akan menampilkan link-link dari TOC dan menampilkan hasil yang paling relevan bagi pengguna.

    Fitur dari Daftar Isi (TOC) Otomatis

    • Otomasi TOC dilakukan melalui JavaScript dan CSS.
    • Script ini ringan dan tidak banyak mempengaruhi waktu buka halaman blog.
    • Meningkatkan peringkat postingan di search-engines.
    • Menggunakan button untuk menyembunyikan atau menampilkan TOC.
    • Kita dapat memilih halaman mana saja yang akan menampilkan TOC dan halaman mana yang tidak menampilkan TOC.
    • Tidak ada biaya tambahan, karena tidak memerlukan fasilitas atau plug-in tambahan.

    Setup Awal Untuk Otomatisasi Daftar Isi (TOC)

    Setup ini hanya perlu dilakukan sekali di awal. Selama kita tidak mengubah theme (atau tema), tidak perlu mengulang setup ini. Langkahnya sebagai berikut:

    1. Masuk ke akun Blogspot

    2. Pilih THEME lalu klik EDIT HTML.

    3. Cari </head>, dan salin script di bawah ini tepat di atasnya.

    <script type='text/javascript'>
    //<![CDATA[
    function tikomTOC() {var mbtTOC=i=headlength=gethead=0; headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)
    {gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[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>

    4. Cari <data:post.body/>, tag ini bisa lebih dari satu. Ganti semuanya dengan kode berikut

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

    5. Klik SAVE 

    6. Sekarang masuk ke THEME, lalu CUSTOMIZE, dan pilih ADVANCED. 

    7. Masuk ke sub-menu ADD CSS.

    8. Lalu salin teks berikut

    /*********************/
    /**  tigakoma.com   **/
    /*********************/
    .mbtTOC {
      border: 1px solid #777;
      border-radius: 5px;
      box-shadow: 8px 8px 0 #DDD;
      background-color: #FFF;
      line-height: 1.3em;
      margin: 20px 0 20px -2px;
      padding: 20px 10px;
      display: block;
    }
    .mbtTOC ol, .mbtTOC ul {
      margin: 0;
      padding: 0;
    }
    .mbtTOC ul {
      list-style: none;
    }
    .mbtTOC ol li, .mbtTOC ul li {
      padding: 10px 0 0;
      margin: 0 0 0 33px;
      font-size: 17px;
    }
    .mbtTOC a {
      color: #000;
      text-decoration: none;
    }
    .mbtTOC a:hover {
      text-decoration: underline;
    }
    .mbtTOC button {
      background-color: #FFF;
      font-size: 18px;
      position: relative;
      outline: none;
      cursor: pointer;
      border: none;
      padding: 0 0 12px 0;
    }

    Setup awal telah selesai sampai disini. Untuk lebih jelasnya, dapat dilihat pada referensi video di akhir artikel ini.

    Cara Menampilkan Daftar Isi (TOC) Pada Postingan

    Untuk setiap postingan dimana Daftar Isi (TOC) akan ditampilkan, lakukan langkah berikut:

    1. Setelah selesai input postingan, ubah mode ke "HTML View"

    2. Salin kode berikut pada posisi dimana Daftar Isi (TOC) diharapkan akan muncul.

    <div class="mbtTOC">
        <button onclick="mbtToggle()">Contents</button>
        <ol id="mbtTOC"></ol>
    </div>

    3. Salin kode Javascript di bawah ini pada bagian akhir dari postingan

    <script>tikomTOC();</script>

    4. Tekan tombol Publish dan Abrakadabra! Daftar Isi telah dibuat

    Petunjuk Video

    Video berikut akan memberi visualisasi yang lebih jelas. Sebaiknya kita perhatikan video ini terlebih dahulu, dan betul-betul memahaminya sebelum melakukan modifikasi.