Cara Menciptakan Navigasi Breadcrumbs (Seo On Page)

Sebenarnya aku sudah pernah posting perihal cara menciptakan navigasi breadcrumbs sebelumnya, tapi di goresan pena cara gres menciptakan navigasi breadcrumbs ini agak berbeda dari yg sebelumnya.

Seperti sudah disebutkan di postingan sebelumnya perihal

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 knorma dan budbahasa tampil di mesin pencari.

Cara menciptakan navigasi breadcrumbs yang terindeks oleh Google

1. Sebelum

   membuat hidangan navigasi breadcrumbs

   terperinci login dulu hahaha...
2. Kemudian pilih tab Rancangan (Design) > Edit HTML > Jangan lupa donlod dulu untuk jaga2 jikalau error.
3. Langkah selanjutnya kita menciptakan css style dulu untuk navigasi breadcrumbs-nya, cari aba-aba ]]></b:skin> gunakan Ctrl + F supaya ludang kecepeh cepat, sehabis itu tuliskan aba-aba memberikankut 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 aba-aba <b:include data='top' name='status-message'/> jikalau ada 2 maka copas aba-aba memberikankut ini di atas tiruana aba-aba <b:include data='top' name='status-message'/>
   

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

5. Sekarang cari aba-aba <b:includable id='main' var='top'> jikalau sudah ketemu paste aba-aba memberikankut 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 hidangan navigasi breadcrumbs

   ini teman bisa cek pribadi di Google Rich Snippet Tool.

Selesai deh, untuk wordpress silahkan baca di sini. selamat mencoba membuat navigasi breadcrumbs yang terindeks oleh google dan supaya memberi manfaat :)

Advertisement