Cara Mengatasi Warning Breadcrumb di Search Console Google

Cara Mengatasi Warning Breadcrumb di Search Console Google

Snippet Tips Blogger

Namina Kiky

1/22/2020

Baru-baru ini saya mendapatkan email dari Google Search Console tentang peringatan error Breadcrumb. Inti dari pesan tersebut adalah tentang data-vocabulary.org schema deprecated yang mulai dihentikan pada April 2020 yang akan datang.

Untuk mengatasi masalah ini, Anda hanya perlu mengganti markup breadcrumb dari data-vocabulary.org dengan jenis schema.org. Berikut ini adalah Cara Mengatasi Warning Breadcrumb di Search Console Google.

Cara Mengatasi Warning Breadcrumb di Search Console Google

Buka halaman Blogger > Klik menu Tema dan klik tombol Edit HTML > cari kode seperti gambar berikut

Atau Anda bisa gunakan fitur pencarian di editor tema dengan menekan tombol CTRL+F lalu temukan kode seperti ini

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

Selanjutnya ganti kode breadcrumb tersebut dengan versi terbaru ini

<b:includable id='breadcrumb' var='posts'>
   <b:if cond='data:view.isSingleItem'>
      <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 class='breadhome' 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'>
                  <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 expr:content='data:num+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:loop>
               <span>
                  <data:post.title/>
               </span>
            </div>
         </b:if>
      </b:loop>
   </b:if>
</b:includable>

Setelah itu ganti juga kode CSS dari breadcrumb yang lama dengan versi ini

/* Breadcrumbs */
.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;color:#888;font-weight:400;transition:all .3s ease-in-out}
.breadcrumbs a:hover{color:#0984e3}
.breadcrumbs svg{width:20px;height:20px;vertical-align:-5px;margin:0 -3px}
.breadcrumbs svg.homesvg{width:22px;height:22px;margin-right:0}
.breadcrumbs svg path{fill:#888}
.breadcrumbs svg.homesvg path{fill:#888}

Untuk kode CSS bisa diedit sesuaikan dengan tema yang digunakan.

Setelah itu klik tombol Simpan tema untuk simpan perubahan.

Demikian tips dari Namina untuk Cara Mengatasi Warning Breadcrumb di Search Console Google. Terima kasih sudah berkunjung dan semoga bermanfaat.

Namina Kiky