Cara Membuat Navigasi Breadcrumbs (SEO On Page)

Sebenarnya saya sudah pernah posting tentang cara membuat navigasi breadcrumbs sebelumnya, tapi di tulisan cara baru membuat navigasi breadcrumbs ini agak berbeda dari yg sebelumnya.

Seperti sudah disebutkan di postingan sebelumnya tentang

pentingnya navigasi breadcrumbs

, selain bisa membantu pegunjung blog untuk mengetahui lokasi artikel, memasang navigasi breadcrumbs memang disarankan oleh mbah google.

Tulisan ini menjelaskan bagaimana membuat navigasi breadcrumbs yang bisa terindeks oleh google ketika tampil di mesin pencari.

Cara membuat navigasi breadcrumbs yang terindeks oleh Google

1. Sebelum

   membuat menu navigasi breadcrumbs

   jelas login dulu hahaha...
2. Kemudian pilih tab Rancangan (Design) > Edit HTML > Jangan lupa donlod dulu untuk jaga2 kalau error.
3. Langkah selanjutnya kita membuat css style dulu untuk navigasi breadcrumbs-nya, cari kode ]]></b:skin> gunakan Ctrl + F supaya lebih cepat, setelah itu tuliskan kode berikut ini tepat di atas ]]></b:skin>
   

   .breadcrumbs
{
padding:5px 5px 5px 0;
margin: 0 0 5px;
font-size:inherit;
font-family: Georgia, trebuchet ms, Verdana;
line-height: 1.4em;
border-bottom:4px double #000000;
}

4. Kemudian cari kode <b:include data='top' name='status-message'/> kalau ada 2 maka copas kode berikut ini di atas semua kode <b:include data='top' name='status-message'/>
   

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

5. Sekarang cari kode <b:includable id='main' var='top'> kalau sudah ketemu paste kode berikut ini di atasnya
   

   <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'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
 &#187; <span typeof='v:Breadcrumb'><a 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 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>

6. Tulisan berwarna merah itulah yang membedakan dengan membuat breadcrumbs sebelumnya.
7. Untuk melihat keberhasilan dari

   membuat menu navigasi breadcrumbs

   ini sobat bisa cek langsung di Google Rich Snippet Tool.

Selesai deh, selamat mencoba membuat navigasi breadcrumbs yang terindeks oleh google dan semoga bermanfaat :)