12 March, 2015

Cara Membuat Breadcrumbs SEO Friendly



Cara Membuat Breadcrumbs SEO Friendly

Membuat Breadcrumbs adalah sebuah navigasi yang terdiri dari "home > label posting > title post" dan berguna untuk memudahkan pengunjung blog dalam mengetahui lokasi ia sedang berada. Biasanya Breadcrumbs ini berada di atas judul artikel.

Bagi blog yang tidak memiliki breadcrumbs sayang sekali jika melewatkan tips SEO blog yang satu ini, karena Breadcrumbs akan sangat berguna untuk blog anda. Banyak para pakar seo menyatakan bahwa breadcrumbs adalah salah satu trik SEO, karena bisa membantu si robot google mengenali struktur dari sebuah blog.

Untuk template gratisan biasanya belum dilengkapi breadcrumbs sehingga anda perlu membuatnya sendiri. Namun jika template anda sudah memilikinya anda bisa juga menggantinya dengan Breadcrumbs SEO friendly yang saya bagikan ini.

Bagi yang tertarik untuk membuat breadcrumbs ini dan memasangnya pada blog, maka silahkan ikuti langkah-langkah berikut.

1. Masuk ke akun Blogger anda, lalu klik "Template"  =>  "Edit HTML"

2. Cari kode ]]></b:skin> , lalu copypaste kode css dibawah ini tepat diatas kode ]]></b:skin>
.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:90%; line-height: 1.4em; border-bottom:3px double #eee;}
3. Selanjutnya cari kode <b:includable id='main' var='top'> , lalu ganti 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'/>
4. Lalu klik "Simpan Template" dan Selesai

Maka silahkan cek pada salah satu artikel di blog anda, hasilnya akan seperti gambar spoiler dibawah ini.
Cara Membuat Breadcrumbs SEO Friendly
Dengan demikian selesai sudah posting Cara Membuat Breadcrumbs SEO Friendly, semoga bermanfaat. Cara Membuat Breadcrumbs SEO Friendly

Artikel Terkait

Cara Membuat Breadcrumbs SEO Friendly
4/ 5
Oleh

Berlangganan

Suka dengan artikel di atas? Silakan berlangganan gratis via email

Mari berkomentar dan berbagi info atau pengalaman Anda. Dan jangan SPAM!