Cara Membuat Breadcrumb yang SEO Friendly



Cara Membuat Breadcrumb yang SEO Friendly - Pada kesempatan malam minggu yang kelabu ini bang dadan akan membahas tentang Cara Membuat Breadcrumb yang SEO Friendly. para master blogger semua  mungkin sudah pada tahu dengan Breadcrumb, bahkan juga sudah menerapkan nya di blog. Namun kaya para blogger pemua mugnkin ada yang belum tahu tentang breadcrumb ini, Nah menurut bang dadan breadcrumb ini merupakan menu navigasi dari label yang dapat muncul atau terindeks oleh search engine google.
  • Bila soba ingin melihan DEMO nya cobalah perhatikan gambar dibawah ini yang telah saya lingkari:
Cara Membuat Breadcrumb yang SEO Friendly
klik gambar untuk memperbesar
Gambar diatas merupakan Breadcrumb yang ada di dalam postingan.
  • Berikut gambar breadcrumb yang terindeks search engine Google
Cara Membuat Breadcrumb yang SEO Friendly
klik gambar untuk memperbesar

Nah, sekarang kita mulai saja pada tahap pembuatan:
Cara Membuat Breadcrumb yang SEO Friendly

1. Masuk ke Akun Blogger
2. Klik Rancangan ➜ Template
3. Pilih Edit HTML  *Jangan lupa Centang Expand Template Widget
4. Kemudian cari kode ]]></b:skin> dan simpan kode berikut ini diatasnya:

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:12px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

5. Selanjutnya Cari kode <b:includable id='main' var='top'>. Kemudian ganti kode tersebut 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 == &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 simpan template anda

Nah sekarang sudah selesai, dan apabila sobat ingin memastikan Breadcrumb bekerja dengan baik silahkan kunjungi link berikut:


http://www.google.com/webmasters/tools/richsnippets

Mungkin cukup sekian dulu pembahasan kita kali ini tentang Cara Membuat Breadcrumb yang SEO Friendly. Semoga artikel ini bermanfaat buat sobat semua..!!!
Labels: blogger tutorial, seo, tips trick

Thanks for reading Cara Membuat Breadcrumb yang SEO Friendly. Please share...!

6 Comments on Cara Membuat Breadcrumb yang SEO Friendly

  1. Salam kenal...thanks infonya
    Kalo mau bikin halaman baru di blog(yg sejenis dg home,dll) gimana caranya...makasih
    nurani-bicara.blogspot.com

    ReplyDelete
  2. Salam kenal juga gan,, oy gmn maksudnya gan, saya gak paham?

    ReplyDelete
  3. Itu loh, di bagian atas blog kan ada tautan2 seperti home,contact,dll itu cara bikin tautan/halaman baru yg kyk gitu gmn?

    ReplyDelete
  4. oh yang itu silahkan buka link ini: http://bangdadan.blogspot.com/2012/12/cara-membuat-menu-horizontal-css-block.html

    ReplyDelete
  5. Sama2 gan,, Semoga bermanfaat artikel2 di blog ini.

    ReplyDelete

Back To Top