Alasan mengapa kita harus mengganti fitur breadcrumb lama dengan yang baru

Apakah Breadcrumb itu?

Breadcrumb adalah cara meninggalkan Jejak di halaman sebuah situs dan adalah suatu cara menunjukkan posisi halaman pada hierarki situs, ia dapat membantu pengguna memahami dan menjelajahi situs secara efektif. Pengguna dapat melihat isi situs, dari awal, tengah hingga akhir cerita, dengan memulai dari breadcrumb berakhir pada jejak breadcrumb.

Atau seperti cerita perihal dua anak yang diculik ia menaburkan remeh remeh roti sepanjang jalan yang di laluinya dan ketika ia berhasil kabur ia hanya tinggal mengikuti jejak dari roti yang telah ia taburkan di jalan untuk kembali ke rumahnya.

Jadi demikianlah gambarannya, fiturnya juga telah berubah dari waktu ke waktu. Sementara itu Breadcrumb tetap saja penting karena ia berhubungan langsung dengan SEO dan struktur data. Perubahan fitur yang disokong tersirat dari pernyataan Google berikut:

'Mulai tanggal 6 April 2020, markup data-vocabulary.org tidak akan lagi memenuhi syarat untuk fitur breadcrumb di Google Penelusuran. Agar memenuhi syarat setelah tanggal 6 April 2020, Anda perlu mengganti markup data-vocabulary.org dengan markup schema.org.' 

Demikian bunyi pernyataan terbaru Google tersebut.

Membaca pernyataan dari Google diatas jelas bagi kita bahwa markup data-vocabulary.org tidak di dukung lagi oleh mesin penelusuran Google dan akan menghasilkan eror pada pencarian. Tahukah kalian kebanyakan template umumnya masih menggunakan markup data vocabulary sebagai fitur breadcrumb? Jika hal itu terjadi sebaiknya kalian meminta dukungan pembuat template untuk meremove atau menyingkirkan data HTML/XML-nya dari dalam template yang sedang dipergunakan buat blogging.

Breadcrumb yang di sarankan oleh Google

Namun jika kalian ingin mencoba menyingkarkannya cobalah ketikan saja kata kunci "breadcrumb" kedalam halaman editor HTML blogger kalian. Namun tentu saja cara ini hanya apabila kalian telah benar benar mengenali atau menguasai dasar kode kode HTML. Namun jika kalian memilih menggunakan template blogger default atau bawaan dan ingin melengkapi template tersebut dengan breadcrumb cara yang paling di anjurkan oleh Google adalah dengan memasukan script JSON-LD berikut ke dalam template:

<script type='application/ld+json'>{ "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "<data:blog.homepageUrl.canonical/>" <b:if cond='!data:post.labels'>}<b:else/>},<b:loop index='i' values='data:post.labels' var='label'> { "@type": "ListItem", "position": <b:with value='data:i + 2' var='num'><b:eval expr='data:num'/></b:with>, "name": "<data:label.name/>", "item": "<data:label.url.canonical/>" <b:if cond='data:post.labels.size != data:i + 1'>},<b:else/>}</b:if></b:loop></b:if> ] }</script>

Letakan di bawah kode <data:post.body/> yang kedua atau yang ketiga. 

 

Atau:

<!-- Post Breadcrumbs -->

              <nav id='breadcrumb'><a expr:href='data:blog.homepageUrl'><data:messages.home/></a><b:if cond='data:post.labels'><em class='delimiter'/><a class='b-label' expr:href='data:post.labels.last.url'><data:post.labels.last.name/></a></b:if><em class='delimiter'/><span class='current'><data:post.title/></span></nav>

              <script type='application/ld+json'>

              {

                &quot;@context&quot;: &quot;http://schema.org&quot;,

                &quot;@type&quot;: &quot;BreadcrumbList&quot;,

                &quot;@id&quot;: &quot;#Breadcrumb&quot;,

                &quot;itemListElement&quot;: [{

                  &quot;@type&quot;: &quot;ListItem&quot;,

                  &quot;position&quot;: 1,

                  &quot;item&quot;: {

                    &quot;name&quot;: &quot;<data:messages.home/>&quot;,

                    &quot;@id&quot;: &quot;<data:blog.homepageUrl.jsonEscaped/>&quot;

                  }

                },{

                  &quot;@type&quot;: &quot;ListItem&quot;,

                  &quot;position&quot;: 2,

                  &quot;item&quot;: {

                    &quot;name&quot;: &quot;<b:if cond='data:post.labels'><data:post.labels.last.name/></b:if>&quot;,

                    &quot;@id&quot;: &quot;<data:post.labels.last.url.jsonEscaped/>&quot;

                  }

                },{

                  &quot;@type&quot;: &quot;ListItem&quot;,

                  &quot;position&quot;: 3,

                  &quot;item&quot;: {

                    &quot;name&quot;: &quot;<data:post.title/>&quot;,

                    &quot;@id&quot;: &quot;<data:post.url.jsonEscaped/>&quot;

                  }

                }]

              }

            </script> 

Beda dengan yang pertama Letakan kode ini di atas kode <data:post.body/> jika terdapat lebih dari satu kode yang sama letakan saja diatas kode yang ke 2 atau yang ke 3.

Fitur breadcrumb JSON-LD ini tidak sama dengan breadcrumb HTML markup data-vocabulary.org yang tampil di atas judul postingan kalian, ia tersembunyi dan menjadikan template lebih minimalis.

Jika menggunakan template viomagz versi lama dan belum memperbaharuinya sebaiknya ganti kode breadcrumbnya dengan cara masuk ke pengaturan blogger, pilih tema, pilih edit HTML, lalu cari kode berikut: <b:includable id='breadcrumb' var='posts'> ...sampai dengan penutup ... </b:includable> 

Hapus semua dan ganti dengan kode berikut:

<b:includable id='breadcrumb' var='posts'> <b:if cond='data:view.isPost'> <b:loop values='data:posts' var='post'> <div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'> <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> <a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'> <meta content='1' itemprop='position'/> <span itemprop='name'><b:switch var='data:blog.locale'><b:case value='id'/>Beranda<b:default/>Home</b:switch></span></a> </span> <b:if cond='data:post.labels'> <b:loop index='nomor' values='data:post.labels' var='label'> &amp;nbsp;&#8250;&amp;nbsp; <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> <meta expr:content='data:nomor+2' itemprop='position'/> <a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' expr:title='data:label.name' itemprop='item' rel='nofollow'> <span itemprop='name'><data:label.name/></span> </a> </span> </b:loop> <b:else/> &amp;nbsp;&#8250;&amp;nbsp; <span itemprop='name'><data:blog.pageName/></span> </b:if> </div> </b:loop> <b:elseif cond='data:view.isPage'/> <div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'> <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> <a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'> <meta content='1' itemprop='position'/> <span itemprop='name'><b:switch var='data:blog.locale'><b:case value='id'/>Beranda<b:default/>Home</b:switch></span></a> </span> &amp;nbsp;&#8250;&amp;nbsp; <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> <meta expr:content='data:num+2' itemprop='position'/> <a expr:href='data:blog.url' expr:title='data:post.url' itemprop='item'> <span itemprop='name'><data:blog.pageName/></span> </a> </span> </div> </b:if> </b:includable>

Kode tersebut di berikan oleh Mas Sugeng sebagai bagian dari paket pembaharuan viomagz terbarunya dan di pergunakan juga pada template linkMagz.

Kesimpulan:

1. Fitur markup data-vocabulary.org sudah tidak di dukung lagi. Supaya halaman terhindar dari eror markup data dan tetap SEO sebaiknya kalian yang masih menggunakannya agar segara menggantinya dengan fitur breadcrumb baru markup schema.org.
2. Validitas dapat di uji di google penelusuran.
3. Fitur breadcrums lama yang menggunakan markup data-vocablary umumnya menampilkan navigasi di atas judul setiap postingan, sedangkan fitur baru tidak harus.

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini!

Referensi:

https://developers.google.com/search/docs/data-types/breadcrumb