Memasang Breadcrumbs, Agar Blog SEO Friendly

Semua blogger, pasti menginginkan blognya menjadi nomor satu di mata search engine. Baik itu Google, Bing, ataupun search engine yang lainnya. Berbagai cara pun dilakukan untuk bisa memancing perhatian mesin pencari agar selalu memprioritaskan blog kita di urutan yang pertama. Mulai dari merubah tampilan blog agar lebih menarik dan simple. Sampai dengan mengutak-atik template blog agar menjadi lebih SEO friendly.

Jika berbicara tentang search engine, pasti tidak jauh dari yang namanya SEO. Karena dengan menerapkan SEO (Search Engine Optimization) pada blog kita, maka kita akan bisa mengoptimalkan blog kita di mata search engine tersebut.

Nah, sobat Penghuni 60, salah satu cara yang bisa membantu meningkatkan nilai SEO blog kita di mata search engine, adalah dengan cara memasang Breadcrumbs pada blog kita.

Apa itu Breadcrumbs?

Breadcrumbs adalah menu navigasi yang akan muncul di atas sebuah postingan atau artikel manakala kita sedang membuka artikel tersebut. Menu navigasi itu bisa membantu para pembaca artikel kita untuk mengetahui diposisi mana artikel yang sedang mereka baca itu berada dalam arsip blog kita. Contohnya, bisa sobat lihat diblogku ini. Sebuah tampilan menu navigasi bisa sobat temukan terletak persis di atas postingan ini. Atau sobat bisa lihat contoh bentuknya seperti ini:

Home page> Nama Kategori> Judul Postingan

Penampakan breadcrumbs navigasi di blog Penghuni 60
Lalu, bagaimanakah cara membuat Breadcrumbs?

Untuk bisa memasang Breadcrumbs ini, maka sobat diwajibkan sudah memasang label atau kategori di blog sobat. Karena menu yang akan ditampilkan sebagai breadcrumbs itu berdasarkan sorting pada label. Nah, jika sobat sudah mempunyai label, maka ikutilah langkah-langkah cara membuatnya di bawah ini.

Langkah-langkah Cara Memasang Breadcrumbs di Blog:

• Silahkan sobat login terlebih dahulu ke akun blogger sobat

• Setelah itu pilih menu Template – Edit HTML

• Cari kode berikut ini: ]]></b:skin>

• Jika sudah ketemu, taruh kode di bawah ini tepat di atasnya:

.breadcrumbs{border-bottom:1px solid #ccc; border-top:1px solid #ccc; padding:0.5em 0 0.5em; font-size:11px;}

kode #ccc adalah kode warna garis atas dan bawah menu, untuk pilihan warna garis, bisa disesuaikan dengan selera kalian masing-masing.

• Jika sudah, sekarang cari lagi kode berikut ini: <b:includable id='main' var='top'>

• Ganti kode di atas 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 title='Home' 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 title='Home' expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
&#187; <span typeof='v:Breadcrumb'><a expr:title='data:label.name' expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a title='Home' 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 title='Home' 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 title='Home' expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a title='Home' 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'/>

• Jangan lupa “Simpan template”

• Selesai

Untuk mencobanya, silahkan sobat buka salah satu postingan sobat. Jika di atas postingan sobat sudah muncul sebuah navigasi menu yang bisa mengarahkan kita ke homepage, dan label postingan, berarti breadcrumbs sudah sukses terpasang. ^_^)b selamat ya...

Semoga dengan adanya navigasi breadcrumbs ini, blog kita akan menjadi lebih SEO friendly lagi. Amin.

---