Cara Mengganti Breadcrumb Microdata Dengan LD-JSON

www.azid45.web.id - Cara Mengganti Breadcrumb Microdata Dengan LD-JSON. Assalamualaikum Wr.Wb, pada kesempatan kali ini saya akan share terkait breadcrumb. Seiring perkembangan zaman struktur data sebuah template mengalami berbagai perubahan salah satunya adalah LD-JSON dan template dinamis masa kini.

Menurut situs masihterjaga.id pihak google sekarang merekomendasikan untuk membuat scema markup LD-JSON dimana sebelumnya kita kenal dengan scema markup microdata. Disi lain kompiajaib.com juga sudah merombak template terbarunya dengan scema markup LD-JSON sehingga mudah dikenali oleh google.

Baca juga: cara membuat toggle sidebar buka tutup seperti kompiajaib.com

Terkait hal tesebut google console juga menambahkan breadcrumb dalam valid setiap url yang akan kita submit. Dengan begitu breadcrumb harus kita perhatikan juga nilai valid dan SEO-nya. Jika anda belum mengetahuinya anda bisa menyimak breadcrumb yang baik dan bagus di kompiajaib.

Apakah breadcrumb dari template viomagz sudah baik dan bagus?, menurut saya sendiri sesuai dengan keterangan developer template mas Sugeng sudah menyebutkan bahwa templatenya sudah dioptimasi nilai SEO-nya sehingga kita tidak perlu otak-atik template lagi. Jadi intinya, kita sudah tidak perlu lagi mengganti breadcrumb yang ada pada template Viomagz.

Terus mengapa saya membuat artikel ini?. Dari breadcrumb LD-JSON bagi saya memiliki keunikan tersendiri yaitu jika biasanya breadcrumb microdata anda bisa melihatnya di atas judul postingan dengan nama home, label, dan judul postingan maka untuk breadcrumb dengan LD-JSON anda tidak akan menjumpai breadcrumb tersebut diatas postingan.

Terus dimana breadcrumb tersebut? apakah hilang dan tidak berfungsi?, tentunya jika kita menggunakan LD-JSON tetaplah valid struktur data dan terindeks oleh google hanya saja memang tidak nampak dikeranakan LD-JSON merupakan script khusus bukan sebuah kode HTML.

Selain itu saya memposting ini adalah karena sahabat saya cekpedia.com menginginkan saya membuat tutorial terkait hal ini. Baiklah, mungkin selain cekpedia.com ingin membuat breadcrumb menggunakan LD-JSON terutama pada template Viomagaz anda bisa mengikuti tutorial dibawah ini.

Pertama, buka menu tema dan pilih edit HTML. Setelah itu anda bisa mencari kode dibawah ini (dengan cara CTRL + F)

<b:include data='posts' name='breadcrumb'/>

jika sudah ketemu tambahkan tanda <!-- sebelum kode tersebut dan tanda --> untuk menghidden agar lain kali anda jika ingin mengembalikan breadcrum microdata tidak mencari-cari lagi tutorial lain.

Jika anda belum jelas, anda bisa melihat hasilnya setelah menambahkan tanda diatas.

<!--<b:include data='posts' name='breadcrumb'/>-->

Kedua, setelah kode tersebut di hidden selanjutnya cari kode <article class='post'> dan letakkan script breadcrum LD-JSON dibawahnya

<b:if cond='data:view.isPost and data:post.labels'>
<script type='application/ld+json'>{
  &quot;@context&quot;:&quot;https://schema.org&quot;,
  &quot;@type&quot;:&quot;BreadcrumbList&quot;,
  &quot;itemListElement&quot;:[
    {
      &quot;@type&quot;:&quot;ListItem&quot;,
      &quot;position&quot;:1,
      &quot;item&quot;:{
        &quot;@type&quot;:&quot;WebSite&quot;,
        &quot;@id&quot;:&quot;<data:blog.homepageUrl/>&quot;,
        &quot;url&quot;:&quot;<data:blog.homepageUrl/>&quot;,
        &quot;name&quot;:&quot;<data:blog.title/>&quot;
      }
    }<b:loop index='num' values='data:post.labels' var='label'>,
    {
      &quot;@type&quot;:&quot;ListItem&quot;,
      &quot;position&quot;: <b:eval expr='data:num + 2'/>,
      &quot;item&quot;:{
        &quot;@type&quot;:&quot;WebPage&quot;,
        &quot;@id&quot;:&quot;<data:label.url/>&quot;,
        &quot;url&quot;:&quot;<data:label.url/>&quot;,
        &quot;name&quot;:&quot;<data:label.name/>&quot;
      }
    }</b:loop>
  ]
}
</script>
</b:if>

Kurang lebih akan menjadi seperti ini

<article class='post'>
<b:if cond='data:view.isPost and data:post.labels'>
<script type='application/ld+json'>{
  &quot;@context&quot;:&quot;https://schema.org&quot;,
  &quot;@type&quot;:&quot;BreadcrumbList&quot;,
  &quot;itemListElement&quot;:[
    {
      &quot;@type&quot;:&quot;ListItem&quot;,
      &quot;position&quot;:1,
      &quot;item&quot;:{
        &quot;@type&quot;:&quot;WebSite&quot;,
        &quot;@id&quot;:&quot;<data:blog.homepageUrl/>&quot;,
        &quot;url&quot;:&quot;<data:blog.homepageUrl/>&quot;,
        &quot;name&quot;:&quot;<data:blog.title/>&quot;
      }
    }<b:loop index='num' values='data:post.labels' var='label'>,
    {
      &quot;@type&quot;:&quot;ListItem&quot;,
      &quot;position&quot;: <b:eval expr='data:num + 2'/>,
      &quot;item&quot;:{
        &quot;@type&quot;:&quot;WebPage&quot;,
        &quot;@id&quot;:&quot;<data:label.url/>&quot;,
        &quot;url&quot;:&quot;<data:label.url/>&quot;,
        &quot;name&quot;:&quot;<data:label.name/>&quot;
      }
    }</b:loop>
  ]
}
</script>
</b:if>
<b:switch var='data:blog.pageType'>
<b:case value='static_page'/>

Ketiga, Save Template

Demikianlah artikel saya cara mengganti breadcrumb microdata dengan LD-JSON. Semoga artikel ini bermanfaat. Amin