Breadcrumb Error Di Search Console? Begini Cara Memperbaikinya Menggunakan Microdata HTML

Dilansir dari akun sosial media twitter milik google search console yang mengatakan bahwa,

"Dengan meningkatnya penggunaan dan popularitas schema.org kami memutuskan untuk memfokuskan pengembangan kami pada satu skema tunggal. Data-vocabulary.org markup tidak lagi memenuhi syarat untuk fitur hasil kaya Google (benar-benar akan di hapus secara permanen) pada 6 April 2020 mendatang". Baca selengkapnya di Google blog.

Perlu Anda ketahui bahwa, "Google menggunakan format struktur data terstruktur dan skema bersama untuk memberikan informasi tentang halaman dan hal-hal yang dijelaskan oleh halaman".

Ingat! Seperti yang dikatakan google, Breadcrumb lama dari Data-Vocabulary sudah tidak efisien untuk hasil pencarian di SERP.

Maka dari itu, segeralah untuk cepat memperbaiki breadcrumb website / blog Anda. Karena kalau tidak ini akan sangat berpengaruh untuk situs Anda kedepannya. Dan untuk mengatasi kegundahan Anda semua, disini saya akan sedikit membagikan tutorial lengkap untuk memasang markup HTML Breadcrumb terbaru.

Apa saja yang harus Anda lakukan?

Disini kita akan menggunakan Microdata HTML seperti yang ada pada pada blog ini.

Oke langsung saja kita ketahap perbaikannya.

1. Tambahkan CSS dibawah ini dan tempatkan di atas <style> atau ]]></b:skin>.

.breadcrumbs {
margin: 0 0 10px 0;
}
.breadcrumbs, .breadcrumbs a, .breadcrumbs a:hover {
font-size: 14px;
color: #333;
}

Note: Jika di template blog Anda sudah terdapat kode CSS breadcrumbnya, itu terserah mau diganti atau tidak.

2. Carilah kode seperti dibawah ini:

<h1 class='entry-title'>

Atau, jika Anda menggunakan firstimage (gambar terdapat di atas judul) didalam postingan blog. Maka saya sarankan untuk menempatkannya tepat di atas markup firstimage tersebut.

3. Jika sudah ketemu, silahkan tambahkan kode berikut ini dan tempatkan seperti yang telah saya sebutkan sebelumnya.

<b:if cond='data:view.isPost'>
  <b:loop values='data:posts' var='post'>
    <div class='breadcrumb' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
      <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
        <a expr:href='data:blog.homepageUrl.canonical' title='Home' itemprop='item'>
        <meta content='1' itemprop='position'/>
        <span itemprop='name'>Home</span></a>
      </span>
      <b:if cond='data:post.labels'>
        <b:loop index='num' values='data:post.labels' var='label'> &amp;nbsp;&#8250;&amp;nbsp;
          <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
            <meta expr:content='data:num+2' itemprop='position'/>
            <a expr:href='data:label.url.canonical' expr:title='data:label.name' itemprop='item'>
              <span itemprop='name'><data:label.name/></span>
            </a>
          </span>
        </b:loop>
        <b:else/>
        &amp;nbsp;&#8250;&amp;nbsp; Tidak Ada Kategori
      </b:if>
    </div>
  </b:loop>
</b:if>

4. Terakhir, simpan semua kode di atas. Perlu diingat, penempatan bisa dimana saja asalkan masih di dalam ruang lingkup halaman artikel / postingan.

Untuk melakukan pengecekan, silahkan kunjungi Google Structured Data Testing Tool atau bisa juga di Rich Result Test. Masukan alamat atau Url postingan blog Anda lalu klik tombol "jalankan pengujian", dan nanti akan terlihat hasilnya.

Nah, begitulah cara memperbaiki breadcrumb error di search console. Jika menurut Anda artikel ini bermanfaat, silahkan share ke teman-teman yang lainnya agar mereka juga tahu apa yang Anda tahu.

Virm Aditya

Berita teknologi informasi terkini

Bagikan Artikel ini