Cara Memperbaiki Breadcrumb Error Di Google Webmaster Tools

LIPUTANBERITA21.COM -  Pada akhir - akhir ini teman - teman para blogger di Indonesia mengeluh soal permasalahan soal breadcrumb yang peringatan  error pada website mereka. Biasa nya pesan yang sering muncul pada breadcrumb seperti ini Skema data-vocabulary.org yang telah di hentikan.

• Download

Kalo menurut pengalaman saya, pesan error breadcrumb muncul karena versi breadcrumb yang lama sudah tidak berfungsi lagi sehingga harus di ganti dengan versi terbaru. 

Baca Juga : Cara Memasang Widget Statistik Corona

Bagi kalian yang saat ini sedang mengalami permasalahan soal breadcrumb tidak perlu khawatir, saya akan membantu menyelesaikan permasalahan breadcrumb yang error di website kalian. Breadcrumb yang saya bagikan ini merupakan breadcrumb versi terbaru, jika menggunakan versi ini kemungkinan error nya bisa hilang. Berikut ini adalah cara nya :

Cara Memperbaiki Breadcrumb Error Di Google Webmaster Tools 

Cara 1 : Login Ke Dashboard Blogger.com

Langkah pertama kalian harus login terlebih dahulu ke akun blog kalian, setelah itu kalian Klik Menu Tema dan Pilih Edit HTML lalu cari kode ini  <b:includable id='comment-form' var='post'> . dan kemudian tambahkan kode di bawah ini tepat di atas nya. Untuk mempermudah pencarian kode nya bisa menggunakan CTRL+F. 

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

CARA 2 : Tambahkan CSS 

Untuk mempercantikan tampilan breadcrumb kalian tambahkan kode di bawah ini di atas kode </head> atau &lt;head&gt; 

 <style type='text/css'>
/* Breadcrumb LIPUTAN BERITA 21 */
.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> 

Cara 3 : Tambahkan kode

Setelah kalian sudah memasangkan kode CSS, kalian harus memanggil kode breadcrumb supaya berfungsi di tampilan website yaitu dengan cara tambahkan kode di bawah ini tepat di bawah kode <b:includable id='main' var='top'>   

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

Setelah kalian sudah memasang semua kode nya, Klik Simpan Tema .

Cara 4 : Login ke Google Webmaster Tools

Langkah berikutnya adalah silakan login ke google webmaster tools kalian lalu klik menu Breadcrumb.

Lalu kalian klik bagian tulisan error setelah itu kalian klik Validate Fix.

Jika validate fix telah berhasil nanti kalian akan mendapatkan email dari google bahwa website kalian sedang di validasi. Untuk mengetahui breadcrumb kalian sudah benar atau belum nanti akan muncul Ceklis di bagian tulisan yang error atau warning.

Demikian artikel tentang Cara Memperbaiki Breadcrumb Error Di Google Webmaster Tools semoga bermanfaat untuk kalian semua. 

Baca Juga