Cara Membuat Table of Contents Otomatis di Artikel Blogger
Cara Membuat Table of Contents Otomatis di Artikel Blogger dengan Pure Javascript dan CSS
Note: Tutorial ini hanya berlaku untuk anda yang menggunakan Template Blogger non-AMP, atau hanya bisa ditempatkan pada halaman non-AMP saja.
Setiap harinya, Google selalu memperbaharui Algoritmanya. Ini bertujuan agar Google semakin memudahkan penggunanya dalam mencari informasi di mesin pencari.
Semakin banyaknya perbaikan dan update yang dilakukan Google, membuat para Webmaster dan SEO maupun Blogger untuk bekerja lebih ekstra agar website yang dikelolanya tetap bisa bersaing di Google.
Beberapa waktu yang lalu, Google sempat memperbaharui algoritma untuk hasil penelusuran mobile. Dimana sebuah konten yang memiliki Table of Contents, memiliki 'perlakuan khusus' di Google. Saya akan menjelaskan secara rinci, mulai dari apa itu Table of Contents, dampak baik terhadap hasil penelusuran, serta Cara membuanya.
Apa itu Table of Contents (ToC) ?
Bisa dibilang, Table of Contents ini merupakan "daftar isi" bagi sebuah artikel. Daftar isi ini akan mempermudah pengguna untuk melompat ke bagian artikel yang ingin mereka baca. Jadi ketika pengguna mengklik isi dari Table of Contents tersebut, pengguna akan langsung bisa membaca bagian yang mereka klik tersebut.
Jika anda pernah membaca artikel di Wikipedia, tentu saja anda pernah melihat Table of Contents, yang memudahkan anda menuju bagian artikel tertentu. Begitulah sekiranya mengenai Table of Contents.
Dampak TOC terhadap SEO?
Ternyata, penggunaan Table of Contents pada sebuah konten website cukup penting, khususnya bagi anda yang mengandalkan trafik website dari Google. Kenapa penting?
Karena ternyata, robots mobile Google akan menggunakan bagian atau subheading yang terdapat artikel (yang sudah menggunakan TOC) menjadi sebuah sitelink. Anda bisa melihat contoh di screenshot hasil penelusuran mobile di bawah ini:
Yang saya tandai berwarna merah tersebut merupakan sitelink yang dibuat Google, dengan mengambil data dar Table of Contents pada Artikel Blog.
Memasang Table of Contents pada Blogger Secara Otomatis
Jika anda pengguna CMS WordPress, tentunya sangat mudah untuk membuat Table of Contents pada artikel secara otomatis, cukup menggunakan plugin tambahan yang sudah banyak tersedia di gallery plugin WordPress.
Namun bagi pengguna Blogger, memasang TOC harus menggunakan JavaScript yang ditanam dalam template.
Kali ini, saya akan membahas Tutorial Cara Memasang Table of Contents pada Blogspot secara otomatis. Otomatis yang saya maksud, anda tidak perlu menulis artikel dalam mode HTML, dan memasukan kode manual setiap kali menulis artikel.
Semua kode yang akan saya bagikan berikut ini cukup pasang di template Blogger anda, dan anda cukup membua subheading H3 (subheading) dan H4 (minor subheading), dan Blockquote.
Langsung saja ikuti langkah berikut ini:
Buka tab Themes pada Dashboard Blogger.com, lalu klik Edit HTML untuk memasang kode JavaScript dan CSS untuk Table of Contents otomatis.
Kemudian copy CSS berikut ini, dan paste sebelum
]]></b:skin> atau diantara kode <style>/*CSS ToC Alinux*/
.TOCalinux {
line-height: 1.4em;
padding: 20px 30px 20px 10px;
display: block;
width: 95%;
margin: 0 auto;
background: #f0f3f4;
border: 1px solid #ccc;
box-shadow: 1px 1px 2px #fff inset, -1px -1px 2px #fff inset;
border-radius: 3px/6px
}
.TOCalinux ol,
.TOCalinux ul {
margin: 0;
padding: 0;
}
.TOCalinux ul {
list-style: none;
}
.TOCalinux ol li,
.TOCalinux ul li {
padding: 15px 0 0;
margin: 0 0 0 30px;
font-size: 15px;
}
.TOCalinux a {
color: #0080ff;
text-decoration: none;
}
.TOCalinux a:hover {
text-decoration: underline;
}
.TOCalinux button {
background: #FFFFE0;
font-family: oswald, arial;
font-size: 20px;
position: relative;
outline: none;
cursor: pointer;
border: none;
color: #707037;
padding: 0 0 0 15px;
}
.TOCalinux button:after {
content: "\f107"
font-family: "
Font Awesome 5 Free"
position: relative;
left: 10px;
font-size: 20px;
}
Selanjutnya, kita akan memasang JavaScript yang berguna untuk memasang Table of Contents secara otomatis di artikel Blogspot. Copy kode ini diatas
</head> atau </head><<script type='text/javascript'>
//<![CDATA[
function TOCalinux() {
var TOCalinux = i = headlength = gethead = 0;
headlength = document.getElementById("post-toc").querySelectorAll("h3, h4").length;
for (i = 0; i < headlength; i++) {
gethead = document.getElementById("post-toc").querySelectorAll("h3, h4")[i].textContent;
document.getElementById("post-toc").querySelectorAll("h3, h4")[i].setAttribute("id", "point" + i);
TOCalinux = "<li><a href='#point" + i + "'>" + gethead + "</a></li>";
document.getElementById("TOCalinux").innerHTML += TOCalinux;
}
}
function mbtToggle() {
var mbt = document.getElementById('TOCalinux');
if (mbt.style.display === 'none') {
mbt.style.display = 'block';
} else {
mbt.style.display = 'none';
}
}
//]]>
</script>
Sampai disini, pemasangan JavaScript untuk ToC sudah selesai, tinggal mengaktifkannya di artikel agar muncul secara otomatis setiap kita publish artikel. Untuk itu, proses selanjutnya adalah memanggil script tersebut pada tag data data:post.body .
Silahkan cari <data:post.body/> pada template anda, lalu ganti dengan kode di bawah ini. Perlu diperhatikan, biasanya kode <data:post.body/> muncul lebih dari satu, silahkan anda sesuaikan saja.
<div id='post-toc'>
<div class='TOCalinux'>
<button onclick='mbtToggle()'>Contents</button>
<ol id='TOCalinux' />
</div>
<data:post.body/>
<script>
TOCalinux();
</script>
</div>
Semua proses pemasangan JavaScript dan CSS sudah selesai, klik Save untuk mengkonfirmasi perubahan template.
Untuk melihat hasil / demo Table of Contents Blogger, silahkan klik artikel Data Tag Blogger Advance Level berikut ini.
Cara Membuat Artikel Blog agar TOC Muncul
JavaScript diatas akan secara otomatis membaca tag heading h3 dan h4, yang kemudian akan menjadi Table of Contents untuk artikel tersebut.
Jadi, agar Table of Contents tidak kosong, pastikan anda menggunakan Subheading dan atau Minor Heading saat menulis artikel pada panel Blogger. lebih jelasnya untuk cara merubah sebuah kalimat menjadi Subheading dan Minor heading, lihat gambar di bawah ini
Yap, itulah tutorial Alinux Blog mengenai Cara Membuat Table of Contents Otomatis di Artikel Blogger. Semoga bermanfaat, jika berguna akan sangat berterima kasih jika artikel ini anda bagikan di sosial media :)