Cara Memasang Breadcrumbs SEO Friendly - Deny Listianto

January 14, 2018

Cara Memasang Breadcrumbs SEO Friendly

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

Tampilan Breadcrumb

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.
2. Buka menu Tema lalu Edit HTML.
3. 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;}

4. 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>

5. 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>

6. Simpan Tema, dan lihat Hasilnya

Demikian tutorial Cara Memasang Breadcrumbs SEO Friendly, Semoga Bermafaat...
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Notifications

Disqus Logo