Cara Membuat dan Memasang Breadcrumbs pada Blogger

Cara Membuat dan Memasang Breadcrumbs pada Blog

Sebelum kita membuat dan memasang breadcrumbs sebaiknya kita mengetahui arti dan fungsinya, breadcrumbs sendiri merupakan trik SEO yang masih sangat ampuh, apa itu breadcrumbs?

Breadcrums adalah sebuah navigasi pada blog maupun website yang biasanya memberikan informasi kepada pengunjung, dimana pengunjung mengetahui posisi konten yang mereka baca.

Contoh Breadcrumbs

Sedangkan fungsi dari Breadcrumbs adalah sebagai berikut:

Link pada breadcrumbs membantu para pengunjung untuk kembali dengan cepat ke halaman sebelumnya.
Menunjukkan posisi pengunjung saat ini.(lokasi konten yang mereka baca).

Apa fungsi breadcrumbs pada SEO? jelas ada, berikut fungsinya:

Untuk index halaman oleh Google.
Keyword Density-breadcrumbs menambakan keyword atau kata kunci yang difokuskan dalam halaman blog maupun website kamu.

Oke setelah kamu paham, sekarang saatnya membuat breadcrumbs pada blogger.

Langkah pertama yang pasti kamu harus sudah punya blog di blogger ya setelah itu Login, berikut langkah-langkah selanjutnya:

Masuk ke template dan pilih edit HTML

Cari kode berikut "]]></b:skin>" dengan bantuan ctrl+F.
Masukkan kode dibawah ini diatas kode "]]></b:skin>"

.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}

Setelah itu cari kode berikut "<b:includable id='main' var='top'>" dan ganti dengan kode dibawah ini:

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'><b:if cond='data:blog.pageType == "static_page"'><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div><b:else/><b:if cond='data:blog.pageType == "item"'><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'>» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span></b:loop>» <span><data:post.title/></span></div><b:else/><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div></b:if></b:loop><b:else/><b:if cond='data:blog.pageType == "archive"'><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span></div><b:else/><b:if cond='data:blog.pageType == "index"'><div class='breadcrumbs'><b:if cond='data:blog.pageName == ""'><span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span><b:else/><span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <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'/>

Save template. Dan breadcrumbs sudah terpasang pada blog kamu.
Jika langkah-langkah diatas sudah dilakukan silahkan kunjungi alamat situs ini : Testing Tool- Google Developers.
Masukkan salah satu alamat artikel dari blog kamu klik "Ambil URL"

Google Developers - Structured Data Testing Tool

Hasil dari Structured Data Testing Tool

Hanya catatan jangan membuat optimasi blogger berlebihan karena akan tidak bermanfaat dan sia-sia, jadi biasakan untuk membuat kategori pada setiap artikel ya.

Demikian cara membuat dan memasang breadcrumbs pada blogger, semoga bermanfaat.