Cara membuat label breadcrumbs blog terindex penelusuran Google

HaiSob apa kabar? Pada kesempatan ini haisob.com akan membagikan tutorial bagaimana cara memasang label breadcrumb yang terindex penelusuran Google. Jadi breadcrumbs yang akan kita pasang disini adalah breadcrumbs yang terindex search Google alias bukan hanya sekedar label yang tampil diblog saja.

Label Breadcrumb adalah alat navigasi yang bermanfaat untuk mempermudah pembaca di blog mengetahui kategori artikel dan  juga bermanfaat untuk mempromosikan kategori artikel yang sedang dibacanya tersebut sehingga apabila pembaca mengklik salah satu kategori menu yang ada di breadcrumbs semua artikel dari kategori itu akan muncul semua, dan yang spesial dari breadcrumbs dibawah ini adalah bisa terindex penelusuran Google.

Breadcrumbs yang terindex search Google


Breadcrumbs yang terindex search Google
Contoh Breadcrumbs yang terindex search Google

Baca juga: Cara membuat link aktif komentar blog terhapus otomatis

Cara memasang label breadcrumbs di Blogger


1. Di Blog Blogger
2. Pilih menu Template âž” Edit HTML
Begini cara membuat label breadcrumbs blog bisa terindex penelusuran Google
Template ➜ Edit HTML

Baca juga: cara membuat link aktif pada kode JavaScript

3. Cari kode ]]></b:skin> dan letakan kode di bawah ini di atas kode ]]></b:skin> 
.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}
4. Kemudian cari kode <b:includable id='main' var='top'> gunakanlah CTRL+F untuk mempermudah pencarian. Kemudian Ganti kode <b:includable id='main' var='top'> dengan kode yang dibawah ini
    <b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <!-- breadcrumb for the post page -->
    <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'> <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span> <b:loop values='data:post.labels' var='label'>
    &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span> </b:loop>
    &#187; <span><data:post.title/></span> </div> <b:else/> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div> </b:if> </b:loop> <b:else/> <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <!-- breadcrumb for the label archive page and search pages.. -->
    <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span> </div> <b:else/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <div class='breadcrumbs'> <b:if cond='data:blog.pageName == &quot;&quot;'>
    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span> <b:else/>
    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span></b:if></div></b:if></b:if></b:if></b:if </b:if></b:includable> <b:includable id='main' var='top'> <b:include data='posts' name='breadcrumb'/>
    5. Terakhir simpan template anda.

    Baca juga: cara membuat emoticon, gambar, dan elemen lain pada komentar blog

    Untuk mengetahui apakah berhasil atau tidak kamu dapat menguji cobanya di https://search.google.com/structured-data/testing-tool

    Breadcrumbs di testing tool
    Breadcrumbs di Alat uji data terstruktur


    Jika nantinya kamu memasang label breadcrumb diatas dan navigasi breadcrumbs menjadi dua (karena sebelumnya sudah ada label navigasinya), hapus saja breadcrumb yang lama atau sembunyikan saja breadcrumb di atas sehingga tidak tampil di template blog tapi hanya tapil di penelusuran Google.

    Jika kamu memilih menyembunyikannya ubah saja kode CSS breadcrumb (pada langkah ke 3 diatas) menjadi:
    .breadcrumbs {display:none;}
    Nah bagaimana sobat, mudah bukan? sekian semoga bermanfaat.
    Join This Site