Cara Mengatasi Error Breadcrumb di Google Search Console
Perubahan Breadcrumb ini sudah dimulai awal tahun 2020, sampai saat ini masih saja ada blog yang mengalami Error Breadcrumb di Google Search Console. Breadcrumb adalah sebuah navigasi pada blog untuk membantu pengunjung dalam memahami keberadaan mereka ketika mengunjungi sebuah halaman situs. dengan kata lain memberikan informasi tentang sebuah halaman dan mengkategori konten halaman dalam sebuah navigasi.
Mengapa Error Breadcrumb dapat terjadi pada suatu blog. Blogger yang masih mengunakan template menggunakan skema data-vocabulary.org. skema data-vocabulary.org Google sudah menghentikan dukungannya sehingga error breadcrumb mudah terjadi. Untuk mengatasi hal ini kita harus melakukan perpindahan Breadcrumb skema data-vocabulary.org ke Breadcrumb schema.org.
Dengan melakukan perbaikan skema data-vocabulary.org ke Breadcrumb schema.org kita dapat mengatasi Error Breadcrumb yang terdapat pada Google Search Console. Sekarang kita kan masuk pada cara mengatasi notifikasi error breadcrumb dibawah ini.
- Cara Mengatasi Error Breadcrumb di Search Console Blogger. Dalam mengatasi error yang terdapat pada blog di Search Console Blogger cukup mudah kita hanya melakukan beberapa langkah pengeditan dalam template html blog anda. Simak secara lengkap dibawah ini.
- Buka Blogger anda.
- Cari Tema dan klik ➩ Kemudian klik Edit HTML.
- Cari kode ini <b:includable id='breadcrumb' var='posts'>. Gunakan pencarian cepat, Klik disembarang tempat asal masih dalam edit html ➩ kemudian tekan CTRL+F secara bersamaan dan pastekan kode yang ingin anda cari di kolom Search: yang ada diatas.
- Anda akan menemukan kode Breadcrumb yang membuat error seperti dibawah ini.
- Setelah menemukan kode seperti di atas silahkan anda ganti kode tersebut dengan kode dibawah ini
- Langkah selanjutnya adalah merapikan tempilan Breadcrumb dengan CSS.
- Silhakn cari kode CSSnya seperti ini .breadcrumbs
- Setelah ketemu kode css dalam html blog anda, copy kode dibawah ini dan gantikan atau pastekan pada kode css lama.
- Klik simpan tema.
- Selesai.
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "item"'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'> <div class='container'>
<div class='breadcrumb'>
<span itemscope='itemscope' itemtype='https://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl'
itemprop='url' title='Home'><span itemprop='title'><i class='fa fa-home'/>
Home</span></a></span>&nbsp;<b:loop values='data:post.labels' var='label'>
<span itemscope='itemscope' itemtype='https://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + "?max-results=6"' expr:title='data:label.name' itemprop='url'><span itemprop='title'><i class='fa fa-tags'/>
<data:label.name/></span></a><b:if cond='data:label.isLast != "true"'> <i class='fa fa-angle-right'/> </b:if></span>
</b:loop>
<i class='fa fa-angle-right'/> <span><data:post.title/></span>
</div>
</div>
</b:if>
</b:loop>
</b:if>
</b:if>
</b:includable>
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.pageType == "item"'>
<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='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' 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 + "?&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>
<b:if cond='data:label.isLast != "true"'>
<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>
/* Breadcrumb dualipa.id*/
.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:#0fa8e8;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:#ea151c;font-weight:400}
.breadcrumbs a:hover{color:#4dda85}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#666}
- Buka Google Search Console anda.
- Kemudian klik menu Breadcrumb.
- Klik pada Error.
- Lanjut klik Validasi Perbaikan.
- Selesai.
Breadcrumbs dapat menyederhanakan navigasi sebuah situs atau blog untuk mempermudah pengunjung dalam berpindah halaman dalam kategori, produk atau label. Itulah Cara Mengatasi Error Breadcrumb di Google Search Console. mudah bukan. Selamat mencoba !