rp0bNChIFHEQLNOWnNlTR7tYV3Qi69riOvEhpJHL
Banner IDwebhost

Cara Mengatasi Error Breadcrumb di Search Console Blogger

Samied.com - Pada artikel kali ini saya akan membagikan sebuah tutorial bagaimana cara mengatasi masalah breadcrumb error pada Google Search Console. Namun sebelumnya sobat perlu mengetahui apa itu breadcrumb? manfaat atau fungsi dari breadcrumb itu, berikut sedikit penjelasan.

mengatasi error pada breadcrumb blogspot

Apa Itu Breadcrumb?

Breadcrumb adalah sebuah navigasi blogspot yang membantu pembaca untuk mengetahui lokasi pada saat berada dalam sebuah blog. Lebih jelasnya breadcrumb ini penyempurnaan navigasi seperti homepage, tag(kategori), arsip.

Menurut saya pribadi breadcrumb tidak begitu penting karena sudah ada menu kategori (tag) dan arsip blog yang membantu pengunjung. Berbanding terbalik dengan pemahaman Google, menurut google sendiri breadcrumb ini merupakan bagian penting dari sebuah website atau blog. Mungkin itulah sedikit pengertian dari breadcrumb.

Fungsi Breadcrumb bagi Website dan Blog

Seperti yang telah saya jelaskan diatas, fungsi dari breadcrumb sendiri adalah sebagai navigasi untuk memudahkan mensin pencari (search engine) dalam melakukan crawl (merayapi) blog atau website, sehingga mudah ditemukan dalam hasil penelusuran.

Kalau dilihat dari segi SEO cara ini masih cukup efektif untuk mendongkrak skor SEO blog maupun website sobat.

Akhir-akhir ini banyak yang mengalami masalah terutama error breadcrumb pada saat melakukan validasi data terstruktur dari Google search console.

Hal tersebut dikarenakan Schema data-vocabulary.org sudah tidak digunakan lagi, kini google mewajibkan para webmaster untuk menggunakan breadcrumb jenis schema.org .

Cara Mengatasi Error Breadcrumb pada Search Console

Breadcrumb yang akan saya share berikut sudah menggunakan versi terbaru yaitu schema.org yang direkomendasikan oleh mesin pencari seperti Google dan Bing. Bagi kamu yang mengalami error pada breadcrumb silahkan ikuti tips berikut.

Pertama buka akun blogger > pilih menu Tema > edit HTML , kemudian cari kode <b:includable id='comment-form' var='post'>,selanjutnya letakan kode berikut tepat diatas kode tersebut.

<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>

Kemudian tambahan kode CSS berikut tepat diatas kode </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>

Selanjutnya tambahan kode berikut tepat dibawah kode <b:includable id='main' var='top'>

<b:include data='posts' name='breadcrumb'/>
Setelah itu klik simpan Tema dan selesai.

Mungkin cukup sekian artikel kali ini semoga bermanfaat, apabila ada pertanyaan silakan tinggalkan di kolom komentar dibawah.
Related Posts
Silvia
Tidak normal tapi spesial. Blogger merangkap content writer yang secara ajaib tersesat di bidang keuangan. Semua tulisan di sini tersedia berkat bantuan kopi tanpa gula.
SHARE

Related Posts

Subscribe to get free updates

Post a Comment