Cara Membuat Breadcrumb Navigation (SEO On Page)

Bagi sobat yang belum tau apa itu breadcrumb, breadcrumb itu adalah history tempat artikel kita dan biasa dipakai di forum2, misalkan sobat post artikel di parent kategori “SEO” terus ada subkategorinya “tutorial blog”, dst. Intinya, breadcrumb digunakan untuk memudahkan pembaca supaya mengetahui kategori dan sub kategori dari bacaan yang sedang dibaca.

Breadcrumb navigation dan SEO On Page

Nah terus apa dong hubungannya dengan seo terutama seo on page? hubungan intim kah? hehehe... hubungannya dengan seo, terutama seo google adalah sesuai instruksi dari simbah google sendiri. Neh kutipannya

makanya, membuat breadcrumb navigation adalah salah satu bagian dari optimasi web atau blog sobat karena memang dia disukai oleh mesin pencari (seo friendly). Selain mempercantik blog kita juga bisa menambahkan poin seo juga pada blog kita. Oke kita langsung aja ke bagaimana membuat breadcrumb navigation pada blog:

Cara membuat breadcrumb navigation

1. Log in ke blogger.com


2. Pilih design atau rancangan


3. Pilih edit html,centang expand temlate widget supaya semua kode
   muncul semua dan jangan lupa back up template untuk jaga jaga dengan
   cara mendownload full template


4. Lalu Cari kode tag ]]></b:skin>> dan letakkan kode berikut ini diatasnya

   
.breadcrumbs{border-bottom:1px dotted #999;margin:2em 0 0.5em;padding:0 0 0.5em;font-size:10px}



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


6. Jika sudah ketemu , letakkan kode berikut ini diatas kode no.6
   
   

   <b:includable id='breadcrumbs' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<p class='breadcrumbs'>

<span class='post-labels'>

<b:if cond='data:post.labels'>

Anda Berada di&#160; :

<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &gt;

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast == &quot;true&quot;'>

<a expr:href='data:label.url' rel='tag'> <data:label.name/></a>

</b:if>

</b:loop>

<b:if cond='data:post.title'>

&gt; <b><data:post.title/></b>

</b:if>

</b:if>

</span>

</p>

</b:if>

</b:includable>

    
7. Cari kode <b:loop values='data:posts' var='post'> biasanya ada lebih dari 1, tergantung templatenya, template saya saja ada 4 kode yang sama, pilih kode yang tepat dibawah letak kode kita di poin 6 tadi dan ketikkan kode berikut dibawahnya
   

   <b:include data='post' name='breadcrumbs'/>

8. Save template .

Selesai, sekarang blog sobat sudah mempunyai navigation breadcrumb yang sifatnya seo friendly. Semoga artikel tentang cara membuat breadcrumb navigation pada blog ini bermanfaat bagi anda.