Cara Membuat Breadcrumb Seo Friendly Ala Kang Ismet

Oke ketemu lagi bro, kali ini kita bakal bahas tentang Breadcrumb. Breadcrumb sendiri digunakan biasanya untuk mengindex postingan yang baru kita buka, agar kita melihat kategori serta alur pembukaanya (kira-kira seperti itu). Pentingkah pemasangan Breadcrumb?

Pemasangan Breacrumb sangat penting karena sangat berpengaruh pada SEO kalian. Banyak para blogger yang membagikan Breadcrumb dengan berbagai variasi, tapi tahukah kalian jika kalian salah-salah menempati script atau script tersebut tidak valid, bisa-bisa blog kalian tidak terindex search engine.

Breadcrumb kali ini berbeda dengan breadcrumb kebanyakan, karena breadcrumb ini sudah valid dengan HTML 5 yang sangat baik bagi blog kalian. Jadi dibawah ini screenshot Breadcrumb yang dilansir pada Kang Ismet.

Screenshot :

Tutorial Pemasangan :
1. Masuk pada Bagian Template, klik Edit HTML
2. Paste kode berikut diatas kode ]]></b:skin>

.breadcrumbs{
 background:#ff6c60;
 padding:15px 20px 15px 65px;
 font-size:14px;
 color:#fff;
 border-radius:4px;
 position:relative;
}
.breadcrumbs a{
 color:#fddbd8;
 text-decoration:none;
}
.breadcrumbs a:hover{
 color:#fff;
 text-decoration:none;
}
.breadcrumbs:before {
 content: "f041";
 font-family:fontAwesome;
 font-size:22px;
 font-style: normal;
 background-color:#e56155;
 color:#fff;
 border-radius:4px 0 0 4px;
 top:0;
 left:0;
 padding:13px 20px;
 position:absolute;
}

3. Cari kode <b:includable id='main' var='top'> kemudian ganti dengan kode berikut

<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'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
  &#187; <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</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>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Nb :
Jika kalian sudah menggunakan Breadcrumb sebelumnya, hapus dengan kode berikut :

<b:includable id='breadcrumb' var='posts'> ... </b:includable>

Untuk mempermudah, cari kode <b:includable id='breadcrumb' var='posts'> lalu hapus sampai </b:includable>

4. Jika sudah save dan lihat hasilnya.

Jika kalian kesulitan, beri tahu mimin dengan komen pada kolom dibawah
Selamat Mencoba !

Special Thanks To : Kang Ismet

Tweet