Cara Membuat Breadcrumb yang SEO Friendly

Coretan Bang Dadan on

Saturday, December 29, 2012

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:

klik gambar untuk memperbesar

Gambar diatas merupakan Breadcrumb yang ada di dalam postingan.

• Berikut gambar breadcrumb yang terindeks search engine Google

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...!