Cara Mengatasi Error Pada Breadcrumb

Published by AkhdaN Sabtu, 02 Mei 2020

Beberapa waktu lalu muncul masalah pada beberapa template blog, mungkin diantara kalian ada yang juga mengalami juga yang namanya Error Breadcrumb. maka dari itu saya akan memberitahukan Cara Mengatasi Error Pada Breadcrumb.

Breadcrumb yang saya bagikan ini sudah menggunakan markup breadcrumb versi terbaru yaitu schema.org yang telah direkomendasikan oleh mesin pencari seperti Google dan Bing.

Bagi kalian yang mengalami masalah ini, silahkan ikuti tips dibawah ini:

Cara Mengatasi Error Pada Breadcrumb  di Search Console Blogger

Jika template kamu sudah pernah terpasang Breadcrumb maka kamu harus menggantinya dengan versi terbaru ini.

Pertama kamu harus membuka Blogger > Klik menu Tema dan klik tombol Edit HTML > Tambahkan  dibawah ini diatas kode <b:includable id='comment-form' var='post'>

<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'>
               <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
                  <a class='homebread' 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' fill='#000000'/>
               </svg>
               <b:loop index='num' values='data:post.labels' var='label'>
                  <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
                     <a expr:href='data:label.url + &quot;?&amp;max-results=16&quot;' expr:title='data:label.name' itemprop='item'>
                        <span itemprop='name'>
                           <data:label.name/>
                        </span>
                     </a>
                     <meta expr:content='data:num+2' itemprop='position'/>
                  </span>
                  <b:if cond='data:label.isLast != &quot;true&quot;'>
                     <svg viewBox='0 0 24 24'>
                        <path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/>
                     </svg>
                  </b:if>
               </b:loop>
               <svg viewBox='0 0 24 24'>
                  <path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/>
               </svg>
               <span>
                  <data:post.title/>
               </span>
            </div>
         </b:if>
      </b:loop>
   </b:if>
</b:includable>

Kemudian tambahkan kode CSS ini tepat sebelum kode </head>

<style type='text/css'>
/* Breadcrumb */
.breadcrumbs{background:#fff;line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:10px 0;border-top:1px solid #dedede;border-bottom:1px solid #dedede;font-size:80%;color:#222;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:#222}
.breadcrumbs a:hover{color:#11589D}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#222}
.homebread{margin:0 2px 0 0}
</style>

Selanjutnya, tambahkan kode ini di bawah kode <b:includable id='main' var='top'>

<b:include data='posts' name='breadcrumb'/>

Setelah itu, klik Simpan tema dan selesai.

Langkah selanjutnya kalian bisa cek kembali di https://search.google.com/search-console dan klik menu Breadcrumb.

Klik pada bagian tulisan Error, setelah itu klik pada tombol Validate Fix

Kamu sekarang tinggal menunggu pesan perbaikan yang akan dikirmkan lewat email setelah divalidasi.

Semoga tips ini bermanfaat bagi kalian,

Sumber code : Arlina Design