Cara Memasang Breadcrumbs SEO Friendly

Mungkin Anda sudah sering melihat wujud Breadcrumb ini sendiri, namun mungkin belum tahu apa sebutannya. Breadcrumb biasanya berada di atas judul postingan dari suatu blog atau website.

Tampilanya mirip gambar dibawah ini

Breadcrumb adalah alat bantu navigasi yang memungkinkan pengunjung untuk memahami lokasi artikel yang mereka baca. Dengan kata lain, breadcrumb merupakan sebuah petunjuk sederhana terhadap sebuah artikel yang berkaitan dengan label dan halaman situs dari sebuah blog atau website.

Breadcrumb ini cukup penting sebagai faktor pendukung SEO di blog atau website, karena dengan breadcrumbs kita bisa menginformasikan kepada pengunjung mengenai label dan lokasi mereka pada saat mereka membaca postingan  yang ada didalam blog atau website kita.

Sudah tidak sabar ya, bagaimana cara membuatnya atau mengaditnya. Baiklah silahkan di coba tutorial di bawah ini

Cara Memasang Breadcrumbs SEO Friendly

1. Buka Blogger > Tema > Edit HTML > Kemudian tambahkan kode CSS dibawah ini sebelum kode ]]></b:skin> atau </style>.

/* Breadcrumbs */
.breadcrumbs {background:#fafafa;font-size:100%;height:45px;overflow:hidden;padding:0;border-bottom:0;position:relative;}
.breadcrumbs:after{display:inline-block;content:"\f135";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#768187;top:0;right:0;padding:12px 20px;position:absolute}
.breadcrumbs > span {padding:0;}
.breadcrumbs a{color:#768187;font-size:13px;font-weight:normal;line-height:45px;}
.breadcrumbs span a {color:#768187;padding:10px 0;}
.breadcrumbs span:first-child  a{color:#768187;margin-left:20px;}
.breadcrumbs > span:last-child {visibility:hidden;width:0;height:0;color:#768187;border-right:none;font-size:13px;font-weight:300;line-height:30px;}
.breadcrumbs span a:hover {color:#151515;}
.breadcrumbs a:hover {color:#151515;}

2. Cari kode di bawah ini, bisa di cari dengan cara CTRL + F

<b:includable id='main' var='top'>

Atau

<b:includable id='main' var='top'>...</b:includable>

3. Kemudian tambahkan kode HTML breadcrumbs tepat di bawah kode di atas

<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='nofollow'><i class='fa fa-home'/></a></span>  <span><data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'><i class='fa fa-home'/>  <data:title/></span></a></span>  <b:loop values='data:post.labels' var='label'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?&amp;amp;max-results=7&quot;' itemprop='url'><span itemprop='title'><i class='fa fa-caret-right fa-fw'/> <data:label.name/></span></a></span><b:if cond='data:label.isLast != &quot;true&quot;'>  </b:if> </b:loop>  <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'><i class='fa fa-home'/></a></span>  <span>Uncategories</span>  <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'><i class='fa fa-home'/></a></span>  <span><i class='fa fa-caret-right fa-fw'/> Archive for <data:blog.pageName/></span> 
</div> 
<b:else/>
<b:if cond='data:blog.searchQuery'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'><i class='fa fa-home'/></a></span>  <span><i class='fa fa-caret-right fa-fw'/> <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' rel='nofollow'><i class='fa fa-home'/></a></span>  <span>All post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' rel='nofollow'><i class='fa fa-home'/></a></span>  <span><data:blog.pageName/></span> 
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

4. Simpan Template, dan lihat Hasilnya

Demikian tutorial Cara Memasang Breadcrumbs SEO Friendly, Semoga Bermafaat...