Maskalem – Baru-baru ini banyak perbincangan mengenai Breadcrumb yang bermasalah. Kebanyakan dari mereka menerima Email yang mengatakan bahwa ada masalah di breadcrumb dengan status Breadcrumb Data vocabulary schema deprecated. Pada kesempatan kali ini saya akan berbagi tutorial untuk mengatasi error pada breadcrumb tersebut.

Akan tetapi sebelum menuju ke tutorial tersebut, alangkah baiknya kita mengenal apa itu breadcrumb.

Pengertian Breadcrumb

Breadcrumb Merupakan halaman navigasi sebuah website yang berfungsi untuk membantu pengguna dalam memahami posisi mereka pada saat mengunjungi halaman suatu website. Bisa dikatakan bahwa breadcrumb ini merupakan penyempurna dari navigasi website seperti homepage, label, dan sitemap.

Cara Mengatasi Breadcrumb Data Vocabulary Schema Deprecated

Bagi kalian yang mengalami masalah ini, simak cara di bawah ini.

1. Buka Dashboard Blog kalian, lalu pergi ke Tema
2. Silahkan kalian pilih Edit HTML
3. Salin script di bawah ini, lalu pastekan di atas kode </b:skin>
   

   
   /* 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}
   	

   
   
4. Setelah itu cari lagi kode <b:include data=’posts’ name=’breadcrumb’/>, lalu ganti dengan script yang ada 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' 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>
   	

   
   
5. Terakhir Simpan Tema

Setelah melakukan cara di atas jangan lupa untuk memvalidasinya di Google Webmaster. Sekian tutorial yang bisa saya bagikan ke kalian, semoga dapat membantu untuk memecahkan masalah Breadcrumb data-vocabulary schema deprecated Terima kasih.