Cara Membuat Navigasi Breadcrumbs (SEO On Page) & Terindeks Di Google

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


Breadcrumb adalah sejenis navigasi yang menunjukan dari mana saja arah artikel kita. Misalkan saya mempunyai artikel Cara Membuat Related Post / Artikel Terkait terletak di Kategori Tutorial Blog maka navigasi breadcrumb seperti ini Browse » Home » Tutorial Blog » Cara Membuat Related Post / Artikel Terkait. Fungsi breadcrumb ini tentunya akan membuat template blog menjadi seo friendly dan akan mempermudah search engine dalam menemukan artikel-artikel kita.



Cara membuat navigasi breadcrumb :

1. Sebelum

   membuat menu navigasi breadcrumbs
   

   jelas anda login dulu ...
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.  Terakhir Simpan Template,  navigasi breadcrumb sudah terpasang di blog anda.
7. Untuk melihat keberhasilan dari

   membuat menu navigasi breadcrumbs

   ini sobat bisa cek langsung di Google Rich Snippet Tool.   

Sumber: Klik Disini

Artikel Terkait