Cara Memperbaiki Kesalahan Breadcrumb Pada Schema.org

Cara Memperbaiki Kesalahan Breadcrumb Pada Schema.org

OpODab.com ¬ Hai sobat opodab, kali ini saya akan membagikan cara untuk memperbaiki kesalahan breadcrumb yang terdeteksi oleh mesin crawler google. Sebelumnya saya ingin memberi tau apa itu breadcrumb dan apa fungsinya. Breadcrumbs adalah navigasi pada blog yang membantu pengunjung untuk memahami lokasi mereka saat berada dalam sebuah website. Dengan kata lain, breadcrumbs ini menyempurnakan navigasi seperti homepage, kategori, tag, dan arsip website. Lalu apa fungsinya breadcrumb ini? Dikutip juga dari dewailmu.id (), Sebenarnya breadcrumbs ini berfungsi sebagai navigasi website yang memudahkan mesin pencari melakukan crawl sehingga dapat menemukan website kita dengan mudah. Dilihat dari SEO, cara ini cuku bagus mendongkrak sedikit skor seo anda.

Saya tidak akan mmembahas banyak mengenai pengertian dan fungsi breadcrumb di atas, dan bagaimana cara menambahkannya pada blog kita. Karena kalian bisa baca dan pahami pada blog sebelah. Lanjut ke pembahasan untuk memperbaiki kesalahan breadcrumb ini. Bagaimana saya tau bahwa ada kesalahan pada breadcrumb, kalian bisa check struktur website anda di sini() lalu anda pastekan link blog anda di situ. Nanti hasilnya akan muncul di situ, apakah sudah tersedia breadcrumb, atau apakah ada kesalahan atau tidak. Contoh kesalahan breadcrumb ini bisa anda lihat pada photo di atas yang menunjukkan bahwa posisi dari ItemList dari BreadcrumbList tidak ada, padahal sangat di butuhkan penempatan posisinya. Lalu bagaimana cara memperbaiki BreadcrumbList pada ItemList? Ah, kelamaan ngomong mulu... wakakkaakak. Lanjut ya?

Ok apa yang kita butuhkan sekarang? kopi dan cemilan tentunya untuk menunggu internet kita yang lemot terhubung ke server blog kita. Yang benar adalah kita butuh code yang nantinya kita sisipkan pada template blog kita. Sebelumnya saya perlihatkan dulu potongan source code BreadcrumbList yang saya gunakan, kodenya di bawah ini :

[<b:includable id='breadcrumb'>
<div class='breadcrumbs' itemscope='' itemtype="http://schema.org/BreadcrumbList">
<span><a class='homex' expr:href='data:blog.homepageUrl'><span><data:homeMsg/></span></a></span><i class='fa fa-angle-right'/>
<b:loop values='data:posts' var='post'>
<span class='ultagnya'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<span class='labeltag' itemprop="itemListElement" itemscope='' itemtype="http://schema.org/ListItem">
<a typeof='WebPage' expr:href='data:label.url' itemprop="item"><span itemprop="name"><data:label.name/></span></a>
</span>
<b:if cond='data:label.isLast != "true"'><i class='fa fa-angle-right'/></b:if>
</b:loop>
<b:else/>
<span class='labeltag'>Unlabelled</span>
</b:if>
<i class='fa bread-title fa-angle-right'/><span class='bread-title'><data:post.title/></span> </span>
</b:loop>
</div>
</b:includable>]

Trus kodene opo dab? baiklah kalau sobat buru-buru. Yang kita butuhkan source code nya adalah index='num' dan

[<meta expr:content='data:num+2' itemprop='position'/>]

dah itu aja source code nya. Lalu kita cari kode berikut

[<b:loop values='data:post.labels' var='label'>]

dan tempatkan index='num' tepat setelah <b:loop dan tempatkan

[<meta expr:content='data:num+2' itemprop='position'/>]

setelah link dari url label itu. Tepat setalah kode </a>. Setelah kita sisipkan kodenya jangan lupa disimpan ya, dan tunggu sampai proses penyimpanannya selesai, sambil ngopi tentunya. Untuk memastikan source code BreadcrumbList secra lengkap ada di bawah :

[<b:includable id='breadcrumb'>
<div class='breadcrumbs' itemscope='' itemtype="http://schema.org/BreadcrumbList">
<span><a class='homex' expr:href='data:blog.homepageUrl'><span><data:homeMsg/></span></a></span><i class='fa fa-angle-right'/>
<b:loop values='data:posts' var='post'>
<span class='ultagnya'>
<b:if cond='data:post.labels'>
<b:loop index='num' values='data:post.labels' var='label'>
<span class='labeltag' itemprop="itemListElement" itemscope='' itemtype="http://schema.org/ListItem">
<a typeof='WebPage' expr:href='data:label.url' 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"'><i class='fa fa-angle-right'/></b:if>
</b:loop>
<b:else/>
<span class='labeltag'>Unlabelled</span>
</b:if>
<i class='fa bread-title fa-angle-right'/><span class='bread-title'><data:post.title/></span>
</span>
</b:loop>
</div>
</b:includable>]

Setelah sobat pastikan kodenya sudah benar dan templatenya yang di edit sudah di save dan sudah terupdate, saatnya kita menuju ke pengujian. Dan pengujiannya menggunakan fasilitas google juga yang bernama Structured Data Testing Tools (). Lalu fetch link url blog sobat yang bermasalah dan lihat hasilnya. Seharusnya sudah tidak ada lagi kesalahan posisi breadcumlist dan itemlist ini. 

Bagaimana apakah kalian berhasil? Semoga berhasil ya, karena ini sangan mudah. Jika mesih belum paham silahkan kalian tonton video di bawah ini. Setelah kalian menontonnya kalian akan tau apa yang harus di lakukan setelah memperbaiki kesalahan BreadcrumbList dan ItemList ini. Dan semoga tutorial sederhana ini dapat membantu sobat semua dalam menyelesaikan kesalahan posisi BreadcrumbList dan ItemList dangan cepat dan benar. Tidak lupa kritik dan saran senantiasa opodab nantikan agar dapat memberikan informasi yang berguna bagi sobat opodab semua.

Ciao,
OpODab,