Memperbaiki Masalah Breadcrumb ( Data-vocabulary.org Schema Deprecated )


Hai, disini saya akan memberikan cara memperbaiki masalah yang sedang dialami oleh para blogger di suluruh dunia. 😅 yaitu masalah Breadcrumb Data-vocabulary.org Schema Deprecated.
Sebelumnya terimakasih untuk arenapublik.com yang sudah memberi tahukan terkait masalah yang akan saya bahas saat ini, BTW smoga suka ya sama templatenya :v.

Untuk mengatasi masalahnya, kalian cukup mengkonversi dari data-vocabulary.org ke data terstruktur schema.org.
lalu apa itu skema data terstruktur?

Skema data terstruktur / structured data schemas


apa itu Skema data terstruktur? Di samping format data terstruktur, skema data terstruktur berfungsi seperti sejenis kamus, mendefinisikan istilah untuk jenis-jenis hal (misalnya "Orang", "Acara", "Organisasi"), dan untuk properti dan hubungan (misalnya "nama", "berfungsi untuk "). 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. [webmaster.gb]

Nah itu penejelasan sedikit tentang skema data terstruktur.
untuk mengatasi masalahnya kalian tidak bisa hanya dengan klik 'validasi perbaikan' di Google Search Console, seperti gambar dibawah ini.


Karna hasilnya akan muncul pemberitahuan seperti gambar dibawah ini (kesalahan).


Untuk langkah menyelesaikan masalah tersebut, ikuti instruksi di bawah ini.
1. Login ke blogger kalian
2. Pilih template > edit HTML
3. Cari kode  <b:includable id='breadcrumb' var='posts'>...</b:includable>
Seperti gambar dibawah ini.


4. Lalu ganti dengan kode di bawah ini.
<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' 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 + &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>

5. Cari tag .breadcrumbs
seperti gambar dibawah ini.

6. Lalu ganti CSSnya, dengan kode dibawah ini *( CSS Template INKA Story)
/* Breadcrumbs INKA Story */
.breadcrumbs{background:linear-gradient(90deg, #fff1eb 0%, #ace0f9 100%);color:#888;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px;padding:20px;margin:20px 0 10px 0;border-radius:10px;font-weight:700}.breadcrumbs a{color:#888;margin:0 5px;line-height:normal}.breadcrumbs .breadlabel:last-child{margin:0 0 0 4px}.breadcrumbs a:hover,.breadcrumbs:hover{color:#222;box-shadow:0 7px 7px 0 rgba(0,0,0,.06)}.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}.breadcrumbs svg path{fill:#888}.homebread{margin:0 2px 0 0}

CSS diatas untuk template INKA Story,
kalau untuk biasanya cukup tambah kode dibawah ini saja.
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}.breadcrumbs svg path{fill:#888}.homebread{margin:0 2px 0 0}

Ok, itulah cara untuk mengatasinya.
kalau mengalami masalah atau kendala ataupun ada yang kurang dari penjelasan diatas, silahkan komen atau melalui kontak
Terimakasih.

*Update
Berhasil perbaiki masalah breadcrumb

Personal Blog.

Berikan komentar anda sesuai Topik yang ada.