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 seolah-olah gambar dibawah ini

Breadcrumb ialah 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, alasannya ialah dengan breadcrumbs kita dapat menginformasikan kepada pengunjung mengenai label dan lokasi mereka pada ketika 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 sajian Tema kemudian Edit HTML.
3. Kemudian tambahkan instruksi CSS dibawah ini sebelum instruksi ]]></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 instruksi di bawah ini, dapat di cari dengan cara CTRL + F.

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

Atau

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

5. Kemudian tambahkan instruksi HTML breadcrumbs sempurna di bawah instruksi 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...
Sumber https://www.denylistianto.com/

Bagikan Artikel ini