Mengatasi masalah breadcrumbs deprecated
Barusan semalam saya mendapatkan email masuk yang memberitahukan kalau terdapat masalah pada blog saya, ini jelas mempengaruhi performa halaman di penelusuran karena struktur datanya tidak valid yaitu pada breadcrumbs.
Seperti yang kita ketahui template blogger sekarang ini sudah banyak yang dilengkapi dengan breadcrumbs, karena bagus untuk seo. Breadcrumb membantu visitor mengetahui dimana mereka berada, dan pada topik mana yang mereka baca. Gak cuma itu navigasi breadcrumbs juga menambahkan backlinks internal secara otomatis pada label artikel yang kita miliki.
Notif yang dikirim oleh google memang belum terasa efeknya, tetapi kemungkinan dalam waktu dekat bisa sangat terasa. Google memberitahukan kalau link schema markup yang kita gunakan pada domain data-vocabulary.org sudah tidak digunakan lagi.
Ini juga mencangkup perubahan pemnyusunan struktur dana untuk breadcrumbs yang baru. Jika teman-teman hanya mengganti domain yang mengalami deprecated saja pada struktur breadcrumbs maka halaman tersebut tetap tidak valid struktur datanya.
Ini tidak berlaku jika kamu menggunakan template yang baru saja di update, atau template berbayar karena templatenya sudah menggunakan breadcrumbs versi baru. Kalau error nggak perlu repot karena pembuatnya bakalan kasih solusih kok. Dan kali ini buat yang mau belajar saja,
Anda mungkin tertarik
Kita akan belajar membuat Breadcrumbs menggunakan schema markup, tapi sebelumnya kamu harus tahu terlebih dahulu susunan breadcrumbs yang benar. Coba lihat gambar dibawah, ini adalah contoh penulisan breadcrumbs yang benar:
Home » Link 1 » Link 2 » Link 3 » dst.
<div class='Kelas CSS' itemscope='itemscope' itemtype='https://schema.org/BreadCrumbList'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<meta content='1' itemprop='position'/>
<a href='URL INDEX' itemprop='item' title='Home'>
<span itemprop='name'>NAMA DFTAR 1</span></a>
</span> »
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<meta content='2' itemprop='position'/>
<a href='URL DAFTAR LINK 2' itemprop='item' title='NAMA DAFTAR LINK 2'>
<span itemprop='name'>NAMA DAFTAR LINK 2</span></a>
</span>
»
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<meta content='3' itemprop='position'/>
<a href='URL DAFTAR LINK 3' itemprop='item' title='Tips and trik'>
<span itemprop='name'>NAMA DAFTAR LINK 3</span></a>
</span>
» <span>JUDUL ARTIKEL YANG SEDANG DIBUKA</span>
</div>Itu saya copas langsung dari postingan saya, bagian Kelas CSS adalah nama class yang digunakan untuk mendesain tampilan breadcrumbs kamu. Setiap template mempunyai kelas dan tampilan yang berbeda-beda.
Sedangkan bagian dalamnya terdiri dari list (daftar) link kategori atau lokasi dimana saja pengguna itu berada. Domain schema.org adalah yang digunakan saat ini sebagai pengganti vicabulary.
Dan kode ini adalah kode breadcrumbs versi baru yang baru saja saya susun sesuai dengan truktur data markup. Semalam sempat bingung bikinya gimana, tapi berkat bantuan dari google developer saya bisa membuatnya. Kode dibawah ini cukup ribet dan kompleks, jika kamu tidak memahami struktur kode maka akan sulit mengenalinya:
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span><data:blog.pageName/></span>
</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' itemscope='itemscope' itemtype='https://schema.org/BreadCrumbList'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<meta content='1' itemprop='position'/>
<a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
<span itemprop='name'>Home</span></a>
</span> » <b:loop index='num' values='data:post.labels' var='label'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<meta expr:content='data:num+2' itemprop='position'/>
<a expr:href='data:label.url + "?&max-results=8"' expr:title='data:label.name' itemprop='item'>
<span itemprop='name'><data:label.name/></span></a>
</span>
<b:if cond='data:label.isLast != "true"'> » </b:if> </b:loop> » <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span>Uncategories</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span>Archive for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.searchQuery'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span><data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span>All post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
Kode breadcrumbs diatas adalah semua bagian halaman termasuk halaman archive, halaman, pencarian, label, dan semua artikel. Dan satu lagi kode diatas ada nama kelasnya, itu nama kelas template ini om, silakan dengan nama kelas template kamu sendiri.
Bagaimana mencari kode breadcrumbs lama?
Masuk ke edit HTML pada tema blogger kamu, jangan lupa cadangkan untuk jaga-jaga jika terjadi error atau tidak sesuai dengan keinginan. Lalu cari kode <b:includable id='breadcrumb' var='posts'> kalau ketemu kamu tandai kode breadcrumbs dibawahnya hingga ketemu dengan tag penutupnya yaitu </b:includable>, tandai semua kode itu lalu ganti dengan yang saya bagikan diatas. Gambaran penyusunanya seperti ini :<b:includable id='breadcrumb' var='posts'>
<!-- Kode BreadCrumbs kamu disini -->
</b:includable>Setiap template pasti mempunyai kode yang berbeda-beda, namun saya tidak bisa membantumu lebih jauh lagi. Sekarang giliran kamu yang memagaminya, pastika kamu melakukan sesuai dengan langkah-langkah yang mimin berikan diatas.
Hasilnya mungkin tidak akan sama dengan breadcrumb sebelumnya karena nama kelasnya juga berbeda. Agar bisa terilhat sama silakan teman - teman ganti kelas nya dengan kelas css yang lama. Memang dibutuhkan keahlian dalam bidang perkodingan agar kamu paham, kalau belum paham so belajar lagi sampe bisa.
Rumit yah memahaminya? Kamu juga bisa belajar mengenai meta tag condition blogger agar lebih mudah menerapkanya, suatu saat pasti akan ada masalah dan kamu sudah siap mehadapinya. Maafin yah aku gak bisa jelasinya ke kalian rumit sayanya kalau dijelasin satu per satu 😪