Error Breadcrumb? Begini Cara Memperbaiki yang Benar

Image by Arlinadzgn

Error Breadcrumb? Begini Cara Memperbaiki yang Benar. Entah apa yang merasuki Google Search Console sehingga sebagian para blogger termasuk saya telah mendapatkan email darinya yang berisi peringatan untuk memperbaiki Error Breadcrumb pada blog yang kita kelolah.

Sebelum kami membahas bagaimana cara memperbaiki permasalahan diatas, sedikit saya jelaskan apa itu Data-vocabulary.org yang kami kutip dari blog Arlinadzgn sebagai berikut:

Apa Itu Data-vocabulary.org?

Data terstruktur Data-vocabulary.org adalah implementasi Google dari data terstruktur yang diperkenalkan pada tahun 2009 yang lalu. Data tersebut diawasi oleh data terstruktur Schema.org dua tahun kemudian pada tahun 2011.

Data terstruktur Schema.org yaitu Open Source data terstruktur yang didukung Google dan organisasi lain. Pada 2011 Google memperbarui situs Data-Vocabulary.org untuk menambahkan tautan ke halaman lain untuk mendorong pemindahan ke data terstruktur Schema.org.

Apa itu skema data terstruktur?

Disamping format data terstruktur, skema data terstruktur berfungsi seperti kamu, mendefinisikan istilah untuk jenis jenis hal misalkan seperti "Orang atau Acara". dan untuk properti dan hubungan seperti "nama". Dengan mempertahankan pemisahan antara format dan skema ini, dimungkinkan bagi pengguna format yang berbeda untuk mengambil keuntungan dari skema yang sama dan dibagikan secara luas.

meskipun begitu, google tetap mendukung versi data terstruktur ini sampai google akan menghentikan penggunaan Data-vocabulary.org ini dimulai April 2020 mendatang.

Dan berikut pengumuman dari google menjelaskan perubahan dari data terstruktur ini:

As of April 6, 2020, data-vocabulary.org markup will no longer be eligible for Google rich result features.

Dan dibawah ini cara memperbaiki Error Breadcrumb yang benar sebagai berikut.

Error Breadcrumb? Begini Cara Memperbaiki yang Benar

Jika di template sobat sebelumnya sudah terdapat Breadcrumb, silakan ganti dengan versi ini

Siahkan kamu buka halaman Blogger > Klik menu Tema dan klik Tombol Edit HTML > dan tambahkan kode dibawah ini 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>

Lalu tambahkan kode CSS dbawah ini sebelum 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>

Nah, selanjutnya tambahkan kode ini tepat dibawah kode <b:includable id='main' var='top'>

<b:include data='posts' name='breadcrumb'/>

Lalu klik Simpan Tema dan Selesai.

Sekarang kamu tinggal cek kembali di https://search.google.com/search-console blog kamu dan klik menu Breadcrumb. Lalu klik pada bagian Error, setelah itu klik pada tombol Validate Fix.

Nah, itulah cara memperbaiki Error Breadcrumb serta penjelasan tentang Apa Itu Data-vocabulary.org dan Apa itu skema data terstruktur? Dan semoga bermanfaat buat kamu yang sedang mengalami permasalahan di atas.