Cara Membuat Daftar Isi di Dalam Artikel Blogger Yang SEO Friendly

Cara Membuat Daftar Isi di Dalam Artikel Blogger Yang SEO Friendly

Buat kalian seorang pengelola blog pasti tidak asing dengan istilah table of contents yang dapat memudahkan pengunjung dalam memahami isi artikel yang kita tulis buat, nah buat yang mau tahu cara membuat daftar isi di dalam artikel blogger yang seo friendly wajib simak panduan kita kali ini

Baca juga : 2 Cara Mudah Menampilkan Video Responsive di Artikel Blog

Daftar isi di dalam artikel ini sudah pasti berbeda dengan daftar isi pada halaman blogger seperti sitemap dan semuanya memiliki pengaruh besar untuk meningkatkan nilai SEO blog. Keuntungan lainya dari kalian menggunakan table of contents di dalam artikel otomatis google akan mengindex daftar isi di dalam artikel tersebut.

Cara membuat daftar isi di dalam artikel blogger yang seo friendly sangat di anjurkan bagi kamu yang memiliki artikel panjang setidaknya lebih dari 1000 kata serta banyaknya topik turunan dari pembahasan utama agar nanti selain memudahkan pembaca artikel tersebut juga akan mendapatkan jump link google.

Cara Membuat Table Of Contents (TOC) di Dalam Artikel Blogger Yang SEO Friendly


Dasarnya jika ingin menggunakan table of contents di dalam artikel blogger kalian setidaknya artikel tersebut terdiri lebih dari 1 heading (h2 atau h3), heading inilah yang akan menjadi jump link di artikel blog kita berikut panduan cara membuat daftar isi di dalam artikel blogger yang seo friendly;

Login dashboard blogger

cara membuat daftar isi di dalam artikel blogger yang seo friendly
edit tema blog
➜ Klik Tema pilih Edit Html lalu tambahkan kode CSS di bawah ini dan letakan sebelum </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<style type='text/css'>
/* CSS Table of Contents */
#light-toc{background:#f5f5f5;border-radius:3px;padding:10px 20px}
#toc_list{font-weight:700;cursor:pointer;margin:10px 0}
#toc_list:focus,#toc li:focus,.back_tocontent:focus{outline:none}
#toc_list svg{vertical-align:middle}
#toc li{background:transparent;cursor:pointer;margin:.2em 0 .2em 1em}
#toc ol li:before{left:-2em}
#toc li a{color:#222}
#toc li a:hover{color:#1e90ff}
#toc{display:grid}
.back_tocontent{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#00cec9;color:#fff;font-size:11px;padding:2px 12px;border-radius:99em;transition:all .3s}
.back_tocontent:hover{background:#2d3436;color:#fff}
:target::before{content:&#39;&#39;;display:block;height:40px;margin-top:-40px;visibility:hidden}
</style>
table of contents by arlinadzgn

➜ Berikutnya letakan kode di bawah ini sebelum </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<script type='text/javascript'>          
//<![CDATA[          
$(document).ready(function(){$(".post-body a").on("click",function(o){if(""!==this.hash){o.preventDefault();var t=this.hash;$("html, body").animate({scrollTop:$(t).offset().top},600,function(){window.location.hash=t})}})});
//]]>          
</script>

➜ Terakhir simpan tema.

➜ Sekarang balik ke artikel atau yang mau kalian pasang daftar isi atau table of contents-nya pada menu editor rubah compose menjadi html dan letakan kode berikut,

<div id="light-toc">
<div id="toc_list" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0">
Contents <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
<div id="toc">
<ol>
<li><a href="#toc_1" title="Subheading 1">Bagian Subheading 1</a></li>
<li><a href="#toc_2" title="Subheading 2">Bagian Subheading 2</a></li>
<li><a href="#toc_3" title="Subheading 3">Bagian Subheading 3</a></li>
<li><a href="#toc_4" title="Subheading 4">Bagian Subheading 4</a></li>
</ol>
</div>
</div>

➜ Rubah tulisan yang di tandai dengan judul heading yang terdapat di artikel kalian, lalu tambahkan kode id="toc_1" di setiap heading sesuaikan nomor ID-nya dengan kode heading diatas,

<h4>
Cara Membuat Daftar Isi di Dalam Artikel Blogger Yang SEO Friendly</h4>

➜ Tinggal kalian tambahkan ID seperti ini,

<h2 id="toc_1">
Cara Membuat Daftar Isi di Dalam Artikel Blogger Yang SEO Friendly</h4>

<h2 id="toc_2">
Cara Membuat Table Of Contents (TOC) di Dalam Artikel Blogger Yang SEO Friendly</h4>

dan seterusnya

➜ Jika dalam satu artikel kalian banyak heading nya misalkan lebih dari 4 kalian tinggal tambahkan kode berikut sesudah <ol> dan sebelum </ol>

<ol>
<li><a href="#toc_4" title="Subheading 4">Bagian Subheading 4</a></li>
</ol>

➜ Tambahkan juga kode di bawah ini di setiap akhir paragraf tiap heading

<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>

➜ Dan hasil akhirnya akan seperti ini

<h2 id="toc_1">
Cara Membuat Daftar Isi di Dalam Artikel Blogger Yang SEO Friendly</h4>

isi heading...

<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>

➜ Silahkan publiskan artikel kalian dan lihat hasilnya.

Baca juga : Cara Membuat Sitemap di Webmaster Tool Agar Lebih SEO Friendly

Akhir Kata
Sampai disini panduan cara membuat daftar isi di dalam artikel blogger yang seo friendly silahkan untuk di share ke teman atau sosial media kalian siapa tahu bermanfaat bagi orang lain, untuk tutorial dan beragam informasi teknologi menarik lainya silahkan aktifkan lonceng notifikasi pada sudut kiri bawah, terimakasih.

Baca juga

Terimakasih telah berkunjung dan silahkan aktifkan notifikasi dari blog saya untuk mendapatkan informasi artikel terbaru dan menarik lainya.

Load comments