Permasalahan Error Pada Breadcrumb Dan Cara Mengatasinya

Blog Satria - Sebagian waktu yang kemudian aku memperoleh pemberitahuan email dari Google Search Console tentang permasalahan breadcrumb data- vocabulary. org schema deprecated dengan isi pesan semacam pada foto di dasar ini.

Gimana metode mengatasinya? Saat sebelum sobat menanggulangi permasalahan breadcrumb ini terdapat baiknya sobat mengenali tentang apa itu data- vocabulary. org.

Apa itu data- vocabulary. org?


Informasi terstruktur Data- Vocabulary. org merupakan implementasi Google dari informasi terstruktur yang diperkenalkan pada tahun 2009 yang kemudian. Informasi tersebut diawasi oleh informasi terstruktur Schema. org 2 tahun setelah itu pada tahun 2011.

Informasi terstruktur Schema. org merupakan Open Source informasi terstruktur yang didukung Google serta organisasi lain, hal ini juga dipengaruh oleh index nomor values data.

Pada 2011 Google memperbarui web Data- Vocabulary. org buat meningkatkan tautan ke taman lain buat mendesak pemindahan ke informasi terstruktur Schema. org.

Apa itu skema informasi terstruktur?


Di samping format informasi terstruktur, skema informasi terstruktur berperan semacam sejenis kamus, mendefinisikan sebutan buat jenis- jenis perihal( misalnya" Orang"," Kegiatan"), serta buat properti serta ikatan( misalnya" nama") nomor values data post.labels. Dengan mempertahankan pembelahan antara format serta skema ini, dimungkinkan untuk pengguna format yang berbeda buat mengambil keuntungan dari skema yang sama serta dibagikan secara luas.

BACA JUGA : Cara Menonaktifkan atau Disable Inspect Element Pada Blog

Walaupun begitu, Google senantiasa menunjang tipe informasi terstruktur ini hingga Google hendak menghentikan pemakaian data- vocabulary. org ini diawali April 2020 mendatang.Beginilah pengumuman dari Google menarangkan pergantian dari Informasi terstruktur ini:

As of April 6, 2020, data- vocabulary. org markup will nomor longer be eligible for Google rich result features.

Wajibkah Memperbaiki Permasalahan Error Breadcrumb ?


Pertanyaan ini banyak sekali ditanyakan pada grup-grup blogger dan komentar yang saya lihat.Tentu saja memperbaiki permasalahan breadcrumb sangat penting, karena breadcrumb juga menjadi salah satu kesempurnaan dalam search console.

Bisa di ibaratkan seperti ini, jika kita mempunyai 2 buah apel beda jenis namun karena sama-sama apel google dapat mendeteksi jenis itu, nah jika breadcrumb error 2 buah apel itu di identifikasi juga sebagai 2 buah yang berbeda bukan 1 jenis buah yaitu apel.

Jadi bila web sobat yang masih memakai data- vocabulary. org silakan bergeser saat ini ke struktur informasi Schema. org.Contohnya pada markup breadcrumb yang terpasang pada template sobat semacam ini :

<div class='breadcrumbs'>
<span itemscope='' itemtype='https://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
<i aria-hidden='true' class='fa fa-angle-right'/>
<span itemscope='' itemtype='https://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:label.url + &quot;?max-results=7&quot;' expr:title='data:label.name' itemprop='url'>
<span itemprop='title'>
<data:label.name/>
</span>
</a>
</span>
</b:loop>
<i aria-hidden='true' class='fa fa-angle-right'/>
<span>
<data:post.title/>
</span>
</div>

Cara Mengatasi Error Breadcrumb di Search Console Blogger


Untuk mengatasinya, sobat perlu mengganti breadcrumb yang sudah terpasang dengan versi ini dapat dilakukan seperti dibawah ini :

1. Pertama, buka dashboard blogger dan menuju edit html.Pastekan kode dibawah ini tepat diatas kode ini <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>

2. Kedua, tambahkan kode dibawah 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>

3. Ketiga, Tambahkan kode dibawah ini tepat dibawah kode <b:includable id='main' var='top'>

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

4. Simpan tema dan selesai

Penutup


Demikianlah artikel yang dapat saya sampikan, jangan lupa untuk share artikel ini ke media sosial kalian,terima kasih.