Baru-baru Google Search Console telah merilis fitur terbarunya, yang mana fitur baru tersebut berupa data terstruktur untuk Breadcrumbs.
Fitur baru yang sudah mulai di jalankan ini tentu saja membuat pusing rekan-rekan Blogger, bagai mana tidak pusing breadcrumb yang sudah ada di template yang di gunakan kita yakini sudah terpasang dengan benar, namun kenyataanya setelah kita melakukan crawling URL dan URL tersebut sudah terindex google ternyata terdeteksi memiliki error data-vocabulary.org schema deprecated.
Sebagian besar permasalahan error beadcrumb diatas terjadi atas permasalahan Id Tidak Valid. Peringatan Google webmaster tool terkait error data-vocabulary.org schema deprecated ini merupakan indikasi bahwa markup yang sudah ada akan di ganti dengan markup schema.org yang merupakan rekomendasi dari mesin pencari seperti Bing, Google search console dan lain sebagainya.
Oleh karena itu, bagi rekan-rekan blogger yang sampai saat ini masih terdapat error data-vocabulary.org schema deprecated di webmaster tools, silahkan anda perbaiki data terstruktur blog anda.
Untuk mengecek apakan data terstruktur blog anda terdapat error atau tidak, silahkan anda cek dengan link berikut Cek Data Blog
Jika dalam pengecekan blog anda terdapat masalah error data breadcrumb nya, silahkan anda ikuti tutorial berikut ini
Cara Memperbaiki Breadcrumbs Di Blog
Untuk memperbaiki permasalahan ini silahkan anda ikuti langkah-langkah berikut:
- Langkah pertama silahkan anda buka blog anda
- Langkah selanjutnya silahkan anda buka menu Tema ==>Klik Edit HTML
- Langkah berikutnya silahkan anda cari kode berikut, untuk mempermudah silahkan anda gunakan Ctr+F dan paste kan kode berikut
<b:includable id='breadcrumb' var='posts'> ...sampai dengan penutup ... </b:includable>- Langah selanjutnya silahkan anda ganti kode script breadcrumbs lama seperti kode script berikut ini
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs-outer'><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'><b:switch var='data:blog.locale'><b:case value='id'/>Beranda<b:default/>Home</b:switch></a></span> › <span><data:blog.pageName/></span>
</div></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs-outer'><div class='breadcrumbs'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'><b:switch var='data:blog.locale'><b:case value='id'/>Beranda<b:default/>Home</b:switch></span></a></span> › <b:loop values='data:post.labels' var='label'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + "?&max-results=8"' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span><b:if cond='data:label.isLast != "true"'> › </b:if> </b:loop>
</div></div>
<b:else/>
<div class='breadcrumbs-outer'><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'><b:switch var='data:blog.locale'><b:case value='id'/>Beranda<b:default/>Home</b:switch></a></span> › <span><b:switch var='data:blog.locale'><b:case value='id'/>Tanpa Kategori<b:default/>No Category</b:switch></span></div></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs-outer'><div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'><b:switch var='data:blog.locale'><b:case value='id'/>Beranda<b:default/>Home</b:switch></a></span> › <span><b:switch var='data:blog.locale'><b:case value='id'/>Arsip untuk<b:default/>Archive for</b:switch> <data:blog.pageName/></span>
</div></div>
<b:else/>
<b:if cond='data:blog.searchQuery'>
<div class='breadcrumbs-outer'><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'><b:switch var='data:blog.locale'><b:case value='id'/>Beranda<b:default/>Home</b:switch></a></span> › <span><data:blog.pageName/></span>
</div></div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs-outer'><div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'><b:switch var='data:blog.locale'><b:case value='id'/>Beranda<b:default/>Home</b:switch></a></span> › <span>Daftar Artikel</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' rel='nofollow'><b:switch var='data:blog.locale'><b:case value='id'/>Beranda<b:default/>Home</b:switch></a></span> › <span><data:blog.pageName/></span>
</b:if>
</div></div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>- Langkah selanjutnya silahkan anda ganti kode script diatas di mulai dari kode yang di tandai warna kuning sampai kode yang di tandai wrna merah, ganti dengan kode berikut
<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' 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 + "?&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>- Langkah selanjutnya silahkan anda cari kode </head> kemudian pasang atau tambahkan kode css berikut sebelum atau 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 silahkan anda klik simpan tema
Untuk melihat apakah masih terdapat error pada blog anda silahkan anda cek lagi data terstrukturnya
di https://search.google.com/search-console blog anda dan klik menu Breadcrumbs
Selanjutnya silahkan anda klik tulsan Error kemudian klik Validate Fix
Silahkan anda tunggu sampai proses valitasi selesai, anda akan menerima email pemberitahuan validasi dari google search console
Demikian tutorial terkait Cara Mengatasi Error Breadcrumbs data-vocabulary.org schema deprecated ini, semoga tutorial ini bermanfaat untuk kita semua
