Membuat Breadcrumb Search Engine Friendly

Membuat Breadcrumb Search Engine Friendly | Akhir - akhir ini, saya jarang buka blog, maklum sedang ada UTS jadi bukanya hanya power points. Kali ini wammy coba share permasalahan yang ada di blog saya. Setelah beberapa hari yang lalu aku ganti template ini, ada beberapa hal yang janggal yang selalu menaungi pikiranku::lebay:: Ternyata di template asli ini tidak ada fitur breadcrumb. Kalau yang belum pernah melihat breadcrumb, seperti ini bentuknya :

Kegunaan breadcrumb ini, adalah untuk meningkatkan hasil SERP Google terhadap judul artikel yang dibuat. Jadi tidak hanya artikel dan url saja yang di index tetapi yang ada di breadcrumb juga terindex. Aku sudah cek breadcrumb yang aku pasang sudah lolos  Google Webmaster.

1. Masuk di template

2. Klik Edit HTML => Lanjutkan => Centang Expand Template Widget

3. Cari kode <b:includable id='main' var='top'>

4. Pasang kode dibawah ini di atas kode tadi

<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.pageType == &quot;item&quot;'> <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:if> </b:loop> </b:if> </b:includable>

5. Cari lagi kode <b:include data='top' name='status-message'/>

6. Letakkan kode dibawah ini di atas kode tadi, biasanya ada dua, letakan di keduanya.

<b:include data='posts' name='breadcrumb'/>

7. Terakhir cari kode ]]></b:skin>

8. Letakkan kode di bawah ini diatas kode tadi

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

Ini adalah hasilnya ketika saya cek :