Cara Menghasilkan Navigasi Breadcrumbs (Seo On Page)

Sebenarnya aku sudah pernah posting ihwal cara menghasilkan navigasi breadcrumbs sebelumnya, tetapi di goresan pena cara gres menghasilkan navigasi breadcrumbs ini agak berlawanan dari yg sebelumnya.

Seperti sudah disebutkan di postingan sebelumnya ihwal

pentingnya navigasi breadcrumbs

, selain dapat menolong pegunjung blog untuk mengenali lokasi artikel, memasang navigasi breadcrumbs memang diusulkan oleh mbah google.

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

Cara menghasilkan navigasi breadcrumbs yang terindeks oleh Google

1. Sebelum

   membuat suguhan navigasi breadcrumbs

   terperinci login dahulu hahaha...
2. Kemudian pilih tab Rancangan (Design) > Edit HTML > Jangan lupa donlod dahulu untuk jaga2 bila error.
3. Langkah berikutnya kita menghasilkan css style dahulu untuk navigasi breadcrumbs-nya, cari instruksi ]]></b:skin> gunakan Ctrl + F agar lebih cepat, setelah itu tuliskan instruksi berikut ini sempurna 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 instruksi <b:include data='top' name='status-message'/> bila ada 2 maka copas instruksi berikut ini di atas semua instruksi <b:include data='top' name='status-message'/>
   

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

5. Sekarang cari instruksi <b:includable id='main' var='top'> bila sudah ketemu paste instruksi 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 menyaksikan kesuksesan dari

   membuat suguhan navigasi breadcrumbs

   ini kawan dekat dapat cek pribadi di Google Rich Snippet Tool.

Selesai deh, untuk wordpress silahkan baca di sini. selamat menjajal membuat navigasi breadcrumbs yang terindeks oleh google dan biar berharga :)

Share this post