Cara Memasang Breadcrumb Dengan Satu Label

Usuluddin, S.Kom    Kamis, Februari 06, 2020    SEO , TUTORIAL   

Cara Memasang Breadcrumb Dengan Satu Label

GoSEO.id - Pada postingan sebelumnya saya telah membagikan "Cara Mengatasi Error Breadcrumb Pada Search Console Blogger". Postingan tersebut menjelaskan cara mengatasi error breadcrumb dan memiliki breadcrumb dengan multi label. Maka label yang tampil pada pencarian akan muncul sebanyak label yang kita buat pada postingan.

Breadcrumb merupakan fitur penting untuk SEO. Pada postingan kali ini saya akan membagikan tutorial "Cara Memasang Breadcrumb Dengan Satu Label".

Oke, silahkan ikuti tahapan-tahapan berikut ini untuk memasang breadcrumb dengan satu label pada blogger :

Cara Memasang Breadcrumb Dengan Satu Label

1. Pertama, silahkan login pada akun blogger.com milikmu.
2. Setelah itu klik menu Tema => dan klik Edit HTML.
3. Ganti kode breadcrumb punya kamu yang sebelumnya dengan kode dibawah ini :
   

   <b:includable id='breadcrumb' var='posts'>
   <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' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
   <svg class='homesvg' viewBox='0 0 24 24'><path d='M12,3L20,9V21H15V14H9V21H4V9L12,3Z'/></svg>
   <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
   <a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
   <span itemprop='name'>Home</span></a>
   <meta content='1' itemprop='position'/>
   </span>
   <svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/></svg>
   <b:loop index='num' values='data:post.labels' var='label'>
   <b:if cond='data:num == (data:post.labels.size - 1)'>
   <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
   <a expr:href='data:label.url + &quot;?&amp;max-results=10&quot;' expr:title='data:label.name' itemprop='item'>
   <span itemprop='name'><data:label.name/></span>
   </a>
   <meta content='2' itemprop='position'/>
   </span>
   <svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/></svg>
   </b:if>
   </b:loop>
   <span><data:post.title/></span>
   </div>
   </b:if>
   </b:loop>
   </b:if>
   </b:includable>

4. Kemudian silahkan gantikan juga CSS breadcrumb sebelumnya dengan CSS dibawah ini :
   

   .breadcrumbs{line-height:1.2em;width:auto;overflow:hidden;padding:0;margin:0 auto 20px;font-size:90%;color:#888;font-weight:400;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}
   .breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:inherit;font-weight:400}
   .breadcrumbs a:hover{color:inherit}
   .breadcrumbs svg{width:20px;height:20px;vertical-align:-5px;margin:0 -4px}
   .breadcrumbs svg.homesvg{width:22px;height:22px;margin-right:0}
   .breadcrumbs svg path{fill:#c8c8c8}
   .breadcrumbs svg.homesvg path{fill:#999}

5. Terakhir klik tombol Simpan dan Selesai.

Kekurangan

Kekurangan yang mencolok menggunakan metode diatas adalah kita tidak dapat menentukan label breadcrumb mana yang akan tampil.

Label yang akan tampil pada breadcrumb adalah yang last label atau label yang terakhir.

Namun demikian menurut saya itu bukan merupakan suatu masalah, dikarenakan label yang kita pilih saat postingan pastinya label yang paling relevan dengan postingan tersebut.