Cara memperbaiki Error Breadcrumb di Blogger. Beberapa waktu lalu menerima email dari Google Search Console (GSC) yang mengatakan kalau pada blog yang saya kelolah terdapat kesalahan di bagian Breadcrumb. GSC meminta saya memperbaikinya. Awalnya saya binggung, bagaimana caranya memperbaikinya. Lalu saya search di google pencarian tentang maksud dari peringatan itu. Dan ketemulah blognya mbak Arlina.
Dalam artikelnya mbak Arlina menjelaskan step by step cara mengatasi error breadcrumb. Setelah saya baca dengan teliti dan detail, ternyata masalah error tersebut disebabkan oleh berubahnya data terstruktur yang di gunakan Google. Dulu, Google menggunakan data terstruktur dari Data-vocabulary.org dan sejak 2011 yang lalu, scara bertahap, google meninggalkan data terstruktur data-vocabulary.org dan berpindah ke Schema.org. Dan perubahan itu mencapai puncaknya di akhir 2019 yang lalu. Sehingga pada bulan Januari banyak webmaster yang mendapat email dari google yang berisi pemberitahuan tentang error breadcrub dan saran agar segera memperbaikinya.
Akhirnya, demi agar tidak menerima email breadcrumb error lagi, saya pun memperbaiki data breadcrumb dengan mengikuti tutorial dari mbak Arlina step by step. Dan hasilnya, saat saya periksa kembali di google search console, semua readcrumb saya valid.
Adapaun cara memperbaiki error breadcrumb ala mbak Arlinadzgn adalan sebagai berikut:
1. Pertama-tama login ke akun blogger Anda.
2. Pilih blog yang akan di perbaiki breadcrumb nya
3. Pilih menu Theme dan klik edit Html
4. Klik control F, cari kode: <b:includable id='comment-form' var='post'>
5. Tambahkan kode di bawah ini tepat diatas kode <b:includable id='comment-form' var='post'>
7. Kemudian tambahkan kode berikut ini diatas kode </head>
9. Yang terakhir, tambahkan kode berikut ini tepat dibawah kode <b:includable id='main' var='top'>
2. Pilih blog yang akan di perbaiki breadcrumb nya
3. Pilih menu Theme dan klik edit Html
4. Klik control F, cari kode: <b:includable id='comment-form' var='post'>
5. Tambahkan kode di bawah ini tepat diatas kode <b:includable id='comment-form' var='post'>
<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'> <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> <a class='homebread' 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=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>6. Klik save.
7. Kemudian tambahkan kode berikut ini diatas kode </head>
/* 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:#222;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:#222}.breadcrumbs a:hover{color:#11589D}.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}.breadcrumbs svg path{fill:#222}.homebread{margin:0 2px 0 0}8. Klik save.
9. Yang terakhir, tambahkan kode berikut ini tepat dibawah kode <b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>10. Klik Save.
Selesai sudah proses memperbaiki breadcrumb yang error di blogger. Untuk membuktikannya silahkan cek breadcrumb untuk blog terkait di Google Search console. Jika Tepat maka akan ada proses alidasi untuk memvalidasi semua breadcrumb yang ada di blog Anda.
Demikian semoga bermanfaat. Jika kurang jelas, silahkan berkunjung langsung ke blognya mbak Arlinadzgn.com.
Sekian dan terima kasih.
