Cara Mengatasi Error Breadcrumb Pada Search Console Blogger

Usuluddin, S.Kom    Senin, September 30, 2019    BLOGGING , TUTORIAL   

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