BAGAIMANA MENGATASI "BREADCRUMBS ISSUES DETECTED" PADA BLOGGER

 

 

 

Bagi anda yang tengah bergelut di bidang blogging tentu pernah menemui peringatan "Breadcrumbs Issues Detected" yang dikirim melalui email oleh Google Search Console (Webmaster). Google search console (Webmaster) sendiri merupakan sebuah tools / media untuk melihat performa dari blog yang kita buat, melalui tools ini kita dapat melakukan permintaan pengindekan ats artikel yang telah kita post di blog kita. Tujuan dari pengindeksan ini adalah agar artikel tersebut bisa tayang di mesin pencarian google, terlebih untuk memunculkannya di halaman pertama ketika kata kunci menegenai artikel tersebut dicari melalui kolon search google. Bagi blogger yang sudah bergelud di dunia google adsense tentu sangat familiar dengan situs google search console ini, karena salah satu fungsinya sebagai SEO (Search Engine Optimation), terkait dengan hal ini akan saya bahas di artikel lain, karena butuh pembahasan yang cukup panjang. Sementara pada artikel kali ini kita hanya akan berfokus pada penyelesaian isu "Breadcrubms" saja.

 

Ok, kembali ke pembahasan utama, akan saya jelaskan dulu apa sebenarnya "breadcrumbs" ini dan apa fungsinya untuk blog?. Breadcrumbs jika kita artikan secara bahasa, dari bahasa Inggris ke Indonesia artinya adalah remah-remah roti (remuk'an roti), tentu maksudnya tidak sama mengingat kita sedang bekerja pada bidang blogging. Arti sesungguhnya memang tidak jauh jika dimaknai dari arti aslinya, remah-remah roti, diibaratkan blog itu adalah sebuah roti dan artikel yang dimuat di dalamnya adalah remah-remah roti yang terkumpul membentuk sebuah roti atau blog itu sendiri. Jadi, breadcrumbs itu adalah sebuah menu yang berfungsi sebagai navigation (penunjuk lokasi) dimana letak postingan / artikel yang sedang dibuka itu berada. Secara visual link breadcrumbs ini berada di atas postingan / artikel yang ditampilkan pada blog, biasanya tertulis Menu >> Label >> judul postingan/artikel. Dari sini kita tahu bahwa breadcrumbs digunakan untuk memudahkan navigasi dan juga untuk memudahkan dalam pengindeksan oleh mesin pencari, kaitanya untuk memudahkan dalam SEO.

 

Lalu kenapa sekarang issue ini muncul, tidak lain dan tidak bukan karena mulai tanggal 6 April 2020, google bots tidak lagi menerima penggunaan "data-vocabulary.org" yang tertulis pada halaman Html, situs tersebut sudah usang (deprecated) dan saat ini google telah menggantinya dengan penggunaan situs "schema.org". Isue ini tentunya hanya muncul pada blogger yang masih menggunakan tema dengan struktur data html lama, atau masih menggunakan "data-vocabulary.org", sementara theme keluaran baru mungkin sudah mengganti struktur datanya dengan "schema.org", jadi tidak akan mendapat peringatan / issue semacam ini. Jika blog anda menggunakan tema dari pihak ketiga dan tidak diupdate oleh pengembangnya, anda akan menerima peringatan ini. Lalu bagaimana cara mengatasinya? Konsepnya sederhana yaitu mengganti "data-vocabulary.org" dengan "schema.org" pada struktur html blog anda, dimana menemukannya? Silahkan ikuti langkah-langkah berikut ini:

 

Masuk ke menu Dashboard blog anda terlebih daluhu

Pilih menu "Theme", lalu klik tanda panah kebawah pada tombol "Customize", lalu pilih "Edit HTML" 

Klik pada halaman HTML, lalu klik tombol "Ctrl + F" untuk membuka menu Search pada halaman HTML

Pada kolom "Search" ketikkan "<b:includable id='breadcrumb' var='posts'>", lalu klik enter,

Setelah ketemu silahkan hapus kode tersebut dimulai dari "<b:includable id='breadcrumb' var='posts'>" sampai dengan "<b:includable>" 

Setelah itu salin kode HTML dibawah ini dan pastekan pada tempat yang anda hapus tadi

 

<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' title='Home' itemprop='item'>
<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>

 

Lalu klik tombol "Save" untuk menyimpannya

 

Agar tampilan di postingannya rapi, copy dan paste juga kode "CSS" dibawah ini:

.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:#000;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:#000;font-weight:400}.breadcrumbs a:hover{color:#089416}.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}.breadcrumbs svg path{fill:#000}

Klick "Ctrl + F", lalu ketikkan pada kolom search <style type='text/css'>, lalu pastekan kode diatas dibawah kode:

 

<style type='text/css'>

 

sebelum kode 

 

</style>

Lalu klik tombol "Save" lagi untuk menyimpannya

Sampai disini anda sudah berhasil mengganti "data-vocabulary.org" yang error karena sudah tidak digunakan oleh google, dengan "schema.org" yang digunakan google saat ini. Langkah terakhir adalah memberitahukan kepada google bahwa anda telah menyelesaikan masah "Breadcrumbs Isuue" tersebut, caranya adalah buka email dari google search console lalu klick pada tombol "Fix Breadcrumbs Issues". Setelah itu, anda akan dibawa masuk ke webmaster / google search console lalu pilih "Validate Fix" untuk memberitahukan pada google bahwa masalah sudah anda perbaiki. Selanjutnya kita tinggal tunggu hasilnya, karena google butuh waktu untuk memproses validasinya, jika telah selesai anda akan menerima notifikasi  email, seperti dibawah ini:

Untuk memantau progres dari validasinya anda bisa click pada "See valodation flow progress" pada email tersebut.

Demikian tadi cara untuk mengatasi "Breadcrumbs Issues Detected" karena "data-vocabulary.org schema deprecated" pada blog baik blogger maupun wordpress sama-sama mengalami hal ini. silahkan dicoba dan semoga berhasil.