Mengatasi Masalah Breadcrumb Coba Dengan Cara Ini
Pemberitahuan diemail juga di google webmaster tentang masalah validasi breadcumb, setelah dilihat di webmaster sebanyak 344 item yang terpengaruh. Solusi awal yang diambil dengan gonta ganti tempate masih sama saja. Belum ada perubahan; Setelah itu, mengamati dengan baik saran yang diberikan untuk merubah sususan breadcumb agar tervalidasi.
Cari cara sana sini, akhirnya lihat ada yang muat tentang caranya, setelah saya praktekan lebih mudah menggunakan cara ini. Selain tidak rumit, mudah juga untuk menempatkan kodenya.
Tidak kuasai detail arti dari susunan kodenya yang penting semoga cara ini bisa mengatasi masalah breadcumb yang error tersebut. Kode dibawah ini bersumber dari https://www.aksesblog.com
Oke lanjut, dibawah ini ada caranya silahkan dipraktekan.
1. Masuk ke HTML Blog
2. CTRL+F untuk mencari dengan mudah itu kode ada dimana. Tepatnya kodenya akan terlihat seperti berikut :
<b:includable id='breadcrumb' var='posts'>...</b:includable>
Ganti kode tersebut dengan kode dibawah ini :
<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='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 + "?&max-results=16"' 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>
Kode tersebut ialah kode yang sudah menggunkana icon inline SVG.
3. Selanjutnya perbaiki tampilannya dengan menggunakan atau mengganti CSS yang kamu gunakan di template kamu dengan CSS berikut :
Cari kode ]]></b:skin> paste kode dibawah ini diatas ]]></b:skin>
.breadcrumbs{line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:12px 15px 12px;color:#fff;font-size:13px;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:#fff;font-weight:400}
.breadcrumbs a:hover{color:#fff}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#fff}
Setelah itu klik Simpan tema.
Selanjutnya
Setelah melakukan penempatan kode diatas notifikasi warning di Search Console tidak akan hilang begitu saja, yang harusnya kamu lakukan adalah dengan cara memvalidasi ulang URL yang sudah terdeteksi warning tersebut.
Langkah selanjutnya bisa masuk ke Search Consol > Breadcrumb dan klik bagian Valid dengan peringatan.
Semoga bermanfaat,-
Salam Blogger
Gabhex | Bisa Papua
