Cara Memasang Breadcrumbs di Blog

Selamat datang kembali di Demo IdBoegis, Blog yang membahas seputar Tips Adsense, Tips Komputer, Tutorial Blog, SSH Gratis, Tips Youtube, Tips Smartphone dan informasi internet lainnya.

Pada Artikel kali ini kita akan membahas Cara Memasang Breadcrumbs di Blog, Postingan ini masih berhubungan dengan Artikel Teknik SEO. Artikel Tutorial Blog.

Baca juga:

Cara Memasang Breadcrumbs di Blog

Advertisement

Cara membuat breadcrumb di blog yang terindex google - Apa itu breadcrumb? kalian yang sudah lama berkecimpung di dunia blogging saya rasa sudah tidak asing lagi dengan yag namanya breadcrumbs. Namun bagi anda yang masih pemula, saya yakin anda pasti belum mengerti mengenai breadcrumb. Tapi jangan salah, ternyata masih ada juga lho seseorang yang sudah lama terjun ke dunia blogging namun tidak memahami betul apa itu breadcrumbs modelya seperti apa dsb, pasalnya ketika mereka menggunakan template yang mereka pilih, mereka hanya tinggal pakai saja template itu tanpa memahami struktur-stuktur yang ada pada pada template mereka. Maka dari itu, pada kesempatan kali ini saya ingin mejelaskan terlebih dahulu mengenai pengertian breadcrumbs.

Breadcrumbs dapat di artikan sebagai navigasi situs. Namun menurut wikipedia, breadcrumbs itu sendiri di artikan sebagai berikut :

Breadcrumbs biasanya muncul secara horizontal di bagian atas sebuah halaman web, biasanya ada di bawah bar judul atau header. Breadcrumbs menyediakan link penghubung kembali ke halaman sebelumnya setiap user menavigasi antar link untuk menuju ke halaman yang aktif atau halaman induk dari halaman yang aktif. Breadcrumbs memberikan jejak bagi pengguna untuk mengikuti kembali ke titik awal atau entri. Sebuah tanda yang lebih besar dari (>) sering berfungsi sebagai pemisah hirarki, meskipun dapat menggunakan simbol lainnya (seperti �atau>), serta beragam grafik.

Nah, agar lebih jelasnya, sekarang coba sobat perhatikan struktur yang ada di atas judul artikel ini, sobat pasti akan menjumpai yang namanya breadcrumbs dengan struktur seperti ini : Home >> Tutorial >> Teknik SEO >> Cara Memasang Breadcrumbs di Blog. Atau silahkan perhatikan gambar di bawah ini untuk mengetahui seperti apa sih breadcrumbs.

Nah, dengan beberapa ambaran di atas, saya sakin sobat semua sudah memahami apa itu breadcrumbs, sekarang mari kita membahas apa fungsi dan manfaat memasang breadcrumbs di blog.

Pada dasarnya, breadcrumbs berfugsi untuk memberi tahu kepada para pengunjung/ pembaca artikel, sedang di halaman mana saat itu mereka berada. Namun di samping itu ada juga manfaat yang dapat kita peroleh selaku pemilik blog, yakni dengan memasang breadcrumbs di blog ternyata juga mempengaruhi nilai optimasi SEO Onpage blog sobat lho. Ya, karena degan ada breadcrumbs itu sendiri kita dapat memperkaya kata kunci yang sedang kita gunakan. Gak percaya? silahkan saja sobat buktikan sendiri dengan memasang breadcrumbs yag terindex google di bawah ini.

Cara Memasang Breadcrumbs di Blog

1. Langkah pertama, silahkan sobat masuk ke halaman blog sobat terlebih dahulu.
2. Selajutnya, silahkan sobat masuk pada halaman template dan edit template.
3. Setelah sobat berada di editor template. silahkan cari kode ]]></b:skin> da silahka letakka kode di bawah ini tepat di atas kode tersebut.

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

4. Selanjutnya, silahka cari kode <b:includable id='main' var='top'>
5. Setelah kode di atas berhasil sobat temukan, selanjutnya silahkan hapus kode tersebut dan ganti dengan kode di bawah 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'/>

6. Selanjutnya silahkan sobat save template dan silahkan lihat hasilnya :)

Oiya, untuk mengecek hasilnya silahkan sobat mengunjungi Google stuctured data testing tool.

Demikian artikel kali ini mengenai cara memasang breadcrumbs di blog, bagi sobat yag memiliki pertanyaan terkait aritkel di atas, silahka tiggalkan pertanyaan di kolom kometar. Semoga bermanfaat dan selamat mencoba :)