Cara Mengatasi Error Breadcrumb Pada Search Console Blogger

Cara Mengatasi Error Breadcumb Pada Search Console Blogger
Cara Mengatasi Error Breadcumb Pada Search Console Blogger
GoSEO.id - Beberapa waktu lalu saya mendapatkan pemberitahuan dari Google Search Console berupa error breadcrumb data-vocabulary.org schema deprecated saat melakukan Test Live Inspection URL.

Tutorial yang saya bagikan kali ini menggunakan markup Breadcrumb versi terbaru yang direkomendasikan langsung oleh mesin pencari besar Google dan Bing.

Silahkan ikuti tutorial "Cara Mengatasi Error Breadcrumb Pada Search Console Blogger" berikut bagi kamu yang ingin mengatasi masalah error breadcumb tersebut.

Cara Mengatasi Error Breadcrumb Pada Search Console Blogger


Catatan :Jika template pada blog yang kamu miliki sudah terdapat Breadcrumb, silahkan hapus terlebih dahulu dan ganti dengan versi yang saya sediakan dibawah ini.

Pertama buka halaman blogger dengan klik DISINI. Lalu login dengan akun kamu. Setelah itu silahkan klik menu Tema dan klik tombol button Edit HTML. Tambahkan kode yang saya sediakan dibawah ini dan letakkan tepat diatas kode <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'>
<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>

Setelah itu tambahkan kode CSS dibawah ini dan letakkan diatas atau sebelum </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:#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:#666;font-weight:400}
.breadcrumbs a:hover{color:#11589D}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#666}
</style>

Kemudian tambahkan kode dibawah ini tepat dibawah kode <b:includable id='main' var='top'>.


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

Jika kode <b:include data='posts' name='breadcrumb'/> sudah ada maka tidak perlu kamu tambahkan lagi. Terakhir klik Simpan Tema dan Selesai.

Kemudian silahkan kamu check kembali pada Google Search Console blog kamu. Jika error masih muncul silahkan klik error tersebut kemudian klik tombol Validate Fix.

Kamu akan menerima email pemberitahuan berupa pesan perbaikan validasi blog kamu, silahkan tunggu.

Demikian tutorial tentang "Cara Mengatasi Error Breadcrumb Pada Search Console Blogger". Semoga artikel ini bermanfaat.

Apakah kamu sudah membaca :
Cara Daftar Google News Untuk Blogger
Memasang Widget Recent Post Blogger
Embed Video Blogger Agar Responsive
Meningkatkan Kecepatan Blog Dengan Cloudflare
Perbedaan Visitor dan Unique Visitor Google Analytics
Menghilangkan URL ?m=1 Blogger
Membuat Press Release yang Baik dan Disukai Media
Membuat URL Sumber Otomatis Blogger
Membuat URL Shortener Dengan Javascript
Cara Menghapus Spam Backlinks
Mempercepat Loading Iklan Adsense Terbaru
Niche Blog Dengan CPC Tertinggi Tahun 2020
Tutorial SEO Langkah Demi Langkah Untuk Pemula
Cara Membuat Strategi Konten
Rekomendasi SEO untuk YouTube
Bagaimana Menghindari Kesalahan Informasi SEO
Ebook Blogger Profesional, Adsense, FB Ads Serta SEO Terlengkap
10 Cara Menghasilkan Dari Blog Tanpa Google Adsense
Show comments
Hide comments

4 komentar

  1. share ginian tapi kaga bisa di copy, buat apaan jadi ga guna gan

    BalasHapus
    Balasan
    1. Sebelum copy kode, silahkan hapus terlebih dahulu link sumber. Maaf atas ketidaknyamanannya.
      Saya menggunakan metode ini agar para copaser menghormati artikel yang dibuat dan tidak asal copy paste.

      Hapus
  2. ah sia sia saja dibaca, gak bisa dicopy kode nya gan

    BalasHapus
    Balasan
    1. Maaf, itu bisa di copy kodenya kok..
      hanya saja agan perlu untuk menghapus kode sumbernya..

      Hapus


EmoticonEmoticon