4 Cara Memperbaiki Error Breadcrumb Pada Blogger

4 Cara Memperbaiki Error Breadcrumb Pada Blogger - Setelah sekian lama tidak aktif dalam menjalankan aktivitas blogging, dan mulai kembali mempublikasikan artikel baru. Admin sedikit terkejut, karena dalam hasil pelaporan cakupan indeks google search console ternyata banyak sekali error yang ditemukan oleh google dalam situs yang Admin kelola. Salah satunya errors breadcrumbs.

Daftar Isi

Karena pihak google memberikan pelaparan ini, tentu saja sebagai seorang blogger yang bertanggung jawab penuh terhadap situs yang dikelola. Admin langsung saja mengecek masalahnya dimana. Sebab jika sudah masuk ke laporan sudah pasti ini berkaitan erat dengan SEO website, jika di biarkan berlarut tentu saja juga akan memberikan danfak buruk terhadap kesehatan serta kinerja blog. Terutama masalah kepercayaan mesin pencari.

Supaya teman-teman tidak bingung, dan sedikit mengerti tentang apa itu breadcrumb. Dan mengapa pihak google memberikan laporan khusus terkait masalah ini. Silakan lihat definisi dan fungsinya di bawah ini.

Apa itu Breadcrumbs

Breadcrumbs adalah salah satu elemen pada website yang memiliki fungsi sebagai navigasi halaman, yang berbentuk seperti teks kecil berisikan link halaman website. Breadcrumbs juga bisa dianggap sebagai navigasi sekunder dalam website, karena breadcrumbs menunjukan urutan struktur halaman-halaman yang sudah dibuka oleh pengunjung website. Dengan adanya breadcrumbs bisa membantu para pengunjung agar tidak perlu repot-repot apabila ingin kembali ke halaman awal.

Fungsi Breadcrumb

Seperti yang telah kami jelaskana dalam pengertian breadcrumb di atas, fungsi utama dari breadcrumb adalah sebagai navigasi tambahan, yang memudahkan pembaca untuk mengakses artikel atau konten serupa tampa perlu melakukan pencarian atau kembali kehalaman awal lagi.

Jika sahabat juga menemukan error berkaitan dengan breadcrumbs maka solusinya kalian bisa melakukan beberapa langkah di bawah ini.

Cara Mengatasi Errors Breadcrumb Khusus Blogger

Untuk kalian yang saat ini mencari panduan cara memperbaiki errors breadcrumb dengan masalah “data-vocabulary.org schema deprecated”, silakan gunakan salah satu cara yang kami sajikan di bawah ini untuk mengatasinya.

Ganti data-vocabulary.org dengan schema.org

Caranya gampang, kalian hanya perlu mengakses menu template >>> Edit HTML >>> cari kode “data-vocabulary.org”, jika sudah ketemu hapus semua yang ada dan ganti dengan schema.org. Lalu Klik simpan template.

Ganti Scrip Breadcrumb Lama Dengan Yang Baru

Untuk kawan-kawan yang selama ini menggunakan template yang sudah terpasang breadcrumbs, besar kemungkinan akan mendapatkan laporan error dalam cakupan indeksnya dari Google. Berikut cara mengatasinya.

Cara Pertama # Ganti Script Breadcrumb 

1. Klik Tema > Edit HTML

2. Cari kode seperti di bawah ini:

<div class='breadcrumbs'>

<span itemscope='' itemtype='http://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'> &#187;

<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?&amp;max-results=7&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>

</b:loop> &#187; <span><data:post.title/></span>

</div>

Jika sudah ketemu, hapus lalu ganti dengan kode berikut :

<div class='breadcrumbs'> <a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'>Home</a> <b:loop values='data:post.labels' var='label'> » <a expr:href='data:label.url + "?&max-results=7"' expr:title='data:label.name' itemprop='url'><data:label.name/></a> </b:loop> » <span><data:post.title/></span> </div>

Untuk memastikan tidak terjadi error, silakan klik preview. Lalu Save.

Cara Kedua # Ganti Kode Breadcrumbs Lama Untuk Atasi Errors

Masuk ke dashboard Blogger

Klik menu Tema >> Edit HTML

Cari & temukan kode berikut <b:includable id='breadcrumb' var='posts'> dengan cara tekan tombol Ctrl+F pada keyboard kalian.

Pastekan kode berikut ini tepat di bawah <b:includable id='breadcrumb' var='posts'>, jika pada tema yang kalian gunakan sudah ada kode yang agak mirip dengan script di bawah ini. Maka hapus kode lama yang ada mulai dari <b:includable> sampai </b:includable>.

Berikut script bredcrumbs barunya.

<b:includable> <b:if cond='data:view.isPost'> <b:loop values='data:posts' var='post'> <div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'> <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> <a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'> <meta content='1' itemprop='position'/> <span itemprop='name'><b:switch var='data:blog.locale'><b:case value='id'/>Beranda<b:default/>Home</b:switch></span></a> </span> <b:if cond='data:post.labels'> <b:loop index='nomor' values='data:post.labels' var='label'>  ›  <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> <meta expr:content='data:nomor+2' itemprop='position'/> <a expr:href='data:label.url + "?&max-results=8"' expr:title='data:label.name' itemprop='item' rel='nofollow'> <span itemprop='name'><data:label.name/></span> </a> </span> </b:loop> <b:else/>  ›  <span itemprop='name'><data:blog.pageName/></span> </b:if> </div> </b:loop> <b:elseif cond='data:view.isPage'/> <div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'> <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> <a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'> <meta content='1' itemprop='position'/> <span itemprop='name'><b:switch var='data:blog.locale'><b:case value='id'/>Beranda<b:default/>Home</b:switch></span></a> </span>  ›  <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> <meta expr:content='data:num+2' itemprop='position'/> <a expr:href='data:blog.url' expr:title='data:post.url' itemprop='item'> <span itemprop='name'><data:blog.pageName/></span> </a> </span> </div> </b:if> </b:includable>

Pasang Breadcrumb

Kalau tema yang kalian pakai belum ada fitur breadcrumb, tapi terdeteksi error “data-vocabulary.org schema deprecated”, pada google search console. Maka solusinya kawan-kawan tinggal pasang kode breadcrumb di dalam tempalate yang sedang digunakan saat ini. adapun caranya adalah sebagai berikut.

1. Klik Tema > Edit HTML

2. Cari kode </b:skin>, dengan cara klik dulu di sembarang tempat di dalam area kode template, lalu tekan CTRL + F , masukkan </b:skin> pada kotak kecil yang tersedia. Jika sudah jika sudah ketemu, silakan pastekan kode dibawah ini tepat di atasnya.

.breadcrumbs{line-height:1.2em;width:auto;overflow:hidden;padding:0;margin:0 auto 20px;font-size:90%;color:#888;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:#777;font-weight:400} .breadcrumbs a:hover{color:blue} .breadcrumbs svg{width:20px;height:20px;vertical-align:-5px;margin:0 -3px} .breadcrumbs svg path{fill:#c8c8c8}

3. Cari dan temukan kode <b:includable id='breadcrumb' var='posts'> ... </b:includable>

4. Hapus dan ganti dengan kode breadcrumb tanpa error terbaru di bawah ini:

<b:includable id='breadcrumb' var='posts'> <b:if cond='data:view.isSingleItem'> <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 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'/></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 + "?&max-results=10"' expr:title='data:label.name' itemprop='item'> <span itemprop='name'><data:label.name/></span> </a> <meta expr:content='data:num+2' 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'/></svg> </b:loop> <span><data:post.title/></span> </div> </b:if> </b:loop> </b:if> </b:includable>

5. Save untuk menyimpan perubahan template.

Gunakan Template Versi Terbaru

Selain dengan menggunakan tiga cara di atas, kawan-kawan juga dapat dengan mudah mengatasi semua masalah error terkait dengan breadcrumb dengan cara menganti tema lama dengan template seo terbaru. Kalian bisa menggunakan template gratis maupun template berbayar. 

Namun sebelum kalian memutuskan untuk menggunakan template tersebut, sebaiknya kalian pastikan kalau temanya sudah di optimasi dengan baik. Jangan sampai setelah ganti template traffik anjlok. Dan amankan kode penting sebelum kalian mengantinya.

Selain mengamankan beberapa kode penting yang sudah terpasang di tema lama, kalian juga harus menghidari beberapa hal yang besar kemungkinan akan memberikan pengaruh buruk untuk situs kawan-kawan kedepannya.

Untuk mengatasi masalah ini silakan kawan-kawan baca tips memilih tema blogspot  dan bagaimana cara menganti template blogspot yang baik dan benar yang sudah kami sajikan sebelumnya.

Cek Breadcrumb 

Setelah menerapkan kode yang telah kami bagikan ke dalam template yang sedang kalian pakai saat ini, kalian wajib untuk mengecek apakah breadcrumb di  situs kawan-kawan masih error atau tidak. Berikut langkah-langkah mengecek error breadcrumb menggunakan google webmaster tools.

Bagaimana Cara Cek Breadcrumb Errors atau Tidak

Akses google search console yang terkait dengan situs yang sedang kawan-kawan perbaiki.

Masuk menu url inspection >>> pastekan url lengkap salah satu postingan kalian yang terdapat gambarnya, di dalam kotak yang tersedia >>> enter.

Klik Live Test, jika masalah breadcrumbnya sudah diperbaiki. Maka kalian akan melihat laporan kurang lebih seperti gambar di bawah ini.

Melakukan Validasi Perbaikan Breadcrumb

Jika kawan-kawan sudah menerapkan beberapa perubahan, menggunakan tips yang kami bagikan di atas, dan sudah dipastikan kalau sudah tidak terdeteksi masalah lagi. Supaya laporan errors cakupan indeks di google search console terkait breadcrumb segera teratasi. Maka silakan lakukan validasi perbaikan breadcrumb melalui Google Search Console. 

Cara Melakukan Validasi Perbaikan Breadcrumb

Akses google search console >>> Breadcrumbs >>> klik “data-vocabulary.org schema deprecated” >>> VALIDATE FIX

Setelah melakukan semua langkah di atas, yang perlu teman-teman lakukan adalah menunggu Google malakukan validasi perbaikan error breadcrumb. Kamu bisa memantau progressnya dengan cara klik SEE DETAIL. Mengenai kapan akan selesai, tergantung dari banyaknya jumlah postingan yang ada di situs.

Penutup

Masalah errors breadcrumb dengan laporan yang isinya “data-vocabulary.org schema deprecated”, pada google search console dapat di atasi dengan mudah menggukan 4 cara. Diantaranya adalah sebagai berikut. 1) Ganti kode “data-vocabulary.org” dengan “schema.org”, 2) Ganti kode breadcrumb yang ada dengan yang baru, 3) Pasang kode breadcrumb, dan 4) Gunakan template versi terbaru.

Demikianlah artikel singkat yang bisa kami sampaikan mengenai 4 Cara Memperbaiki Error Breadcrumb Pada Blogger, yang bisa sahabat coba praktekkan. Semoga ada salah satu tips di atas yang bisa berguna, terima kasih.

Berbagi :