Mengatasi Masalah Peringatan Deteksi Error Breadcrumb Search Console

AksesBlog.com - Beberapa minggu belakangan tepatnya 22 Januari 2020 lalu saya mendapati pesan error validasi di Search Console yang berhubungan dengan Breadcrumb. Errornya kurang lebih errornya "data-vocabulary.org schema deprecated".

Notif Error

Ini sepertinya HTML blogger tidak mau lagi menggunakan sekema data-vocabulary.org yang selama ini digunakan di struktur template blogger. Jadi solusinya sudah sangat jelas bahwa kita hanya perlu menyesuaikan seperti yang disarankan oleh Google malalu Search Consolenya.

Langkah-langkah mengatasi Error tersebut sudah saya coba sendiri di situs ini, makanya saya baru buat artikel ini sekarang, setelah saya mendapati notif pemberitahuan bahwa sudah berhasil mengatasi error tersebut.

Notif Berhasil

Jika kamu masih bingung mengatasi error tersebut, caranya lumayan mudah namun tentunya kamu perlu bisa ngotak-ngatik HTML template blogger agar cara ini berhasil, atau cara paling mudahnya kamu hanya perlu ganti template yang sudah valid.

Mengganti Kode Breadcrumb

Cara pertama kamu hanya perlu mengganti kode breadcrumb yang lama ke yang baru, kamu perlu masuk ke Blogger > Tema > Edit HTML ini jika kamu menggukana blogger versi klasik, kalau pakai versi baru mungkin sedikit berbeda.

Selanjutnya temukan :

Kamu bisa juga menggunakan kombinasi CTRL+F untuk mencari dengan mudah itu kode ada dimana. Tepatnya kodenya akan terlihat seperti berikut :

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

Ganti kode tersebut dengan kode dibawah ini :

<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'>
<svg viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000000'/></svg>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a 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='M5.5,9A1.5,1.5 0 0,0 7,7.5A1.5,1.5 0 0,0 5.5,6A1.5,1.5 0 0,0 4,7.5A1.5,1.5 0 0,0 5.5,9M17.41,11.58C17.77,11.94 18,12.44 18,13C18,13.55 17.78,14.05 17.41,14.41L12.41,19.41C12.05,19.77 11.55,20 11,20C10.45,20 9.95,19.78 9.58,19.41L2.59,12.42C2.22,12.05 2,11.55 2,11V6C2,4.89 2.89,4 4,4H9C9.55,4 10.05,4.22 10.41,4.58L17.41,11.58M13.54,5.71L14.54,4.71L21.41,11.58C21.78,11.94 22,12.45 22,13C22,13.55 21.78,14.05 21.42,14.41L16.04,19.79L15.04,18.79L20.75,13L13.54,5.71Z' 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>

Kode tersebut adalah kode yang sudah menggunkana icon inline SVG, jadi kalau kamu menggunakan font awesome, mungkin nanti artikel ini akan saya update, kamu komentar saja untuk request yah.

Selanjutnya kamu bisa perbaiki tampilannya dengan menggunakan atau mengganti CSS yang kamu gunakan di template kamu dengan CSS berikut :

.breadcrumbs{line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:12px 15px 12px;color:#fff;font-size:13px;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:#fff;font-weight:400}
.breadcrumbs a:hover{color:#fff}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#fff}

Setelah itu kamu bisa klik Simpan tema.

Langkah Selanjutnya

Setelah kamu melakukan hal-hal yang saya pandu diatas notifikasi warning di Search Console tidak akan hilang begitu saja, yang harusnya kamu lakukan adalah dengan cara memvalidasi ulang URL yang sudah terdeteksi warning tersebut.

Kamu bisa masuk ke Search Consol > Breadcrumb dan klik bagian Valid dengan peringatan.

Setelah itu kamu perlu submit ulang semua URL yang terdeteksi disana, ini bertujuan agar proses validasi berlangsung lebih cepat, namun kamu bisa lewatkan langkah ini jika kamu lebih sabar menunggu mesin google meng crwl ulang semua URL yang ada di blog kamu.

Selamat mencoba.