Cara Memasang Breadcumbs Valid Schema.org Terbaru



Breadcrumbs merupakan navigasi yang berada di blog atau web tepatnya di atas postingan, breadcrumb sendiri berfungsi sebagasi petunjuk  terhadap sebuah artikel yang berkaitan dengan kategori dan halaman situs sebuah artikel yang terdapat di dalam sebuah blog, atau secara garis besar breadcrumb sebagai alat bantu navigasi yang memungkinkan pengunjung untuk memahami lokasi mereka saat ini dalam konteks sebuah website.


Breadscrumb terhadap SEO

Breadcrumb merupakan teknik SEO lama yang dianjurkan oleh Google. Mesin pencari Google sendiri menganjurkan untuk membuat navigasi yang jelas pada setiap website agar robot Google lebih mudah meng-crawl isi situs kita sehingga lebih mudah terindeks di mesin pencari.

Beberapa waktu lalu google sudah mengirimkan pemberitahuan lewat email bagi penggunanya, isi pemberitahuan tersebut tentang masalah data-vocabulary.org, untuk segera menggantinya dengan BreadcrumbList valid Schema.org.

"Search Console has identified that your site is affected by 1 Breadcrumbs issues" on Google Search Console, and "data-vocabulary.org schema is deprecated and not supported by Google anymore. Please migrate to using schema.org types." or "Skema data-vocabulary.org is no longer used and is no longer supported by Google. Please migrate using type schema.org."

Memasang Breadcumbs

Yang jadi pertanyaan, lalu bagaimana cara mengatasi masalah ini atau menggantinya pada blog yang sudah ada breadcrumbs sebelumnya? Sebenarnya cara menggantinya sangat mudah, sobat tinggal mencari semua data-vocabulary.org di dalam breadcrumb sebelumnya dengan Schema.org, setelah menggantinya seperti yang tadi saya jelaskan sebenarnya hal ini sudah teratasi, namun yang jadi kendala dalam hal ini walaupun sudah teratasi sobat masih menggunakan markup breadcrumb versi lawas.

Memasang BreadcumbList Versi Terbaru

Adapun sobat bisa mengganti Breadcrumb versi lawas dengan cara berikut ini, langkah pertama yang sobat perlu lakukan adalah dengan masuk terlebih dahulu di blog yang akan di ganti Markup Breadcrumbnya.

1. Masuk ke dashboard Blogger > Theme > Edit HTML.
2. Kemudian cari code <b:includable id='breadcrumb' var='posts'> sampai penutupnya atau lihat gambar berikut

Memasang Breadcumbs

3. Setelah ketemu, kemudian ganti dengan code Breadcumb application/ld+json  berikut ini

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:view.isSingleItem'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<!-- 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>
</b:if>
</b:loop>
</b:if>
</b:includable>

4. Langkah selanjutnya, tempatkan code pemanggilnya tepat di bawah code <article class='post'> 


<b:if cond='data:view.isSingleItem'>
<b:include data='post' name='breadcrumb'/>
</b:if>

Sehinggga akan tampak seperti ini

<article class='post'>
.......
.......
<b:if cond='data:view.isSingleItem'>
<b:include data='post' name='breadcrumb'/>
</b:if>
.......
.......
</article>

5. Dan untuk merapikannya tambahkan code berikut di dalam code   <style> ... </style> atau <b:skin<![CDATA[ ... ]]></b:skin>

#breadcrumb {
  font-size: 12px;
  font-weight: 400;
  color: #555555;
  margin: 0;
}
#breadcrumb a {
  color: #555555;
  transition: color .17s;
}
#breadcrumb a:hover {
  color: #4cdbd3;
}
#breadcrumb a, #breadcrumb em {
  display: inline-block;
}
#breadcrumb .delimiter:after {
  content: '';
  border: solid #4e4d4d;
  border-width: 0 1px 1px 0;
  display: inline-block;
  width: 3px;
  height: 3px;
  transform: rotate(-45deg);
  margin: 0 8px 0 5px;
  position: relative;
  top: -1px;
}

5. Save

Silahkan cek Breadcrumb yang baru di pasang pada Structured Data Testing Tool Google, demikian tentang pemecahan masalah Breadcrumb kali ini, semoga dengan adanya tutorial yang disajikan diatas menambah ilmu kita dalam masalah per Bloggeran terutama tentang masalah SEO. Salam Blogger!!!

Hanya Blogger Pemula yang suka menulis dan membaca

Disqus Comments