Featured Post

Breadcrumbs Baru Blogger Yang Valid Schema.org

Breadcrumbs Baru Blogger Yang Valid Schema.org

  • Diterbitkan pada
  • January 23, 2020
  • Diposkan oleh
  • Eka Awaludin
Dengan meningkatnya penggunaan dan popularitas schema.org Google memutuskan untuk memfokuskan pengembangan kepada struktur data tersebut. Di postingan kali ini saya akan memberikan tutorial memasang Breadcrumbs baru yang valid schema.org. Namun sebelumnya saya juga akan memberikan tutorial buat yang udah memasang Breadcrumbs namun mendapatkan error di google search console. Yang sebelumnya breadcrumbs nya ada kode vocabulary.org nya pasti mendapatkan email yang memberitahukan kalau ada yang error di struktur data breadcrumbs nya seperti berikut ini:
data-vocabulary.org schema deprecated
Jangan panik manteman, disini saya akan berbagi tutorial cara memperbaikinya. Oke, mungkin dengan melihat gambar di bawah ini para master bisa langsung paham kode mana yang harus diganti.

vocabulary.org

schema.org

Gambar ini saya dapatkan langsung dari blog Google Webmasters.

Hapus Markup vocabulary.org Dan Ganti Dengan Markup schema.org

Saya akui kalau saya mendapatkan kode Breadcrumbs ini dari Google, tapi saya sudah lupa lagi sumbernya. Saya yakin kode ini di pakai oleh banyak orang, tidak menutup kemungkinan jika kalian juga memakai kode Breadcrumbs ini.
Oke pertama, di breadcrumbs kalian coba temukan kode seperti berikut ini:
<!-- breadcrumb for the post page -->
    <b:loop values='data:posts' var='post'>
     <b:if cond='data:post.labels'>
      <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
       <span typeof='v:Breadcrumb'>
        <a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Beranda</a>
       </span>
       <b:loop values='data:post.labels' var='label'>
&#8250; 
        <span typeof='v:Breadcrumb'>
         <a expr:href='data:label.url' property='v:title' rel='v:url'>
          <data:label.name/>
         </a>
        </span>
       </b:loop>
&#8250; 
       <span>
        <data:post.title/>
       </span>
      </div>
      <b:else/>
      <div class='breadcrumbs'>
       <span>
        <a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</a>
       </span> &#8250; 
       <span>Belum ada label</span> &#8250; 
       <span>
        <data:post.title/>
       </span>
      </div>
     </b:if>
    </b:loop>
Ganti Dengan kode di bawah ini.
    <!-- breadcrumb for the post page -->
    <b:loop values='data:posts' var='post'>
     <b:if cond='data:post.labels'>
      <div class='breadcrumbs' itemscope='itemscope' itemtype='http://schema.org/BreadcrumbList'>
       <span itemprop='itemListElement' itemscope='itemscope' itemtype='http://schema.org/ListItem'>
         <a expr:href='data:blog.homepageUrl' itemprop='item'>
           <span itemprop='name'>Beranda</span>
         </a>
        <meta content='1' itemprop='position'/>
       </span>
       <b:loop values='data:post.labels' var='label'>
&#8250;
        <span itemprop='itemListElement' itemscope='itemscope' itemtype='http://schema.org/ListItem'>
         <a expr:href='data:label.url' itemprop='item'>
           <span itemprop='name'><data:label.name/></span>
         </a>
         <meta content='1' itemprop='position'/>
        </span>
       </b:loop>
&#8250;
       <span>
        <data:post.title/>
       </span>
      </div>
      <b:else/>
      <div class='breadcrumbs'>
       <span>
        <a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</a>
       </span> &#8250;
       <span>Belum ada label</span> &#8250;
       <span>
        <data:post.title/>
       </span>
      </div>
     </b:if>
    </b:loop>
Save template dan kita bisa melihat hasilnya di Rich Result Test atau di Structured Data Testing Tool. Jangan lupa memasukan halaman postingan kalian, jangan halaman homepage.
Hasil test dari Rich Result
Breadcrumb valid di Structured Data Testing Tool

Cara Memasang Breadcrumbs di Blog

Tutorial ini ditujukan untuk yang belum memasang Breadcrumbs sama sekali di blog nya. Pertama masuk ke Edit HTML, lalu sisipkan style ini di bagian style template kamu.
/* Breadcrumbs */
.breadcrumbs {
 overflow: hidden;
 padding: 8px 25px;
 text-transform: none;
 color: #fff;
 font-size: 13px;
 background-color: #4b515d;
}
.breadcrumbs a,
.breadcrumbs a:link {
 transition: all 200ms ease-in-out 0s;
 color: #ddd;
 text-decoration: none;
}
.breadcrumbs a:visited {
 color: #ddd;
 text-decoration: none;
}
.breadcrumbs a:hover,
.breadcrumbs a:visited:hover {
 color: #fff;
 text-decoration: underline;
}
Kemudian, cari kode berikut ini.
<b:includable id='main' var='top'>
Kemudian tempel kode berikut ini sebelum atau di atas kode tersebut.
<b:includable id='breadcrumb' var='posts'>
 <b:if cond='data:blog.homepageUrl != data:blog.url'>
  <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <div class='breadcrumbs'>
    <span>
     <a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</a>
    </span> &#8250;
    <span>
     <data:blog.pageName/>
    </span>
   </div>
   <b:else/>
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <!-- breadcrumb for the post page -->
    <b:loop values='data:posts' var='post'>
     <b:if cond='data:post.labels'>
      <div class='breadcrumbs' itemscope='itemscope' itemtype='http://schema.org/BreadcrumbList'>
       <span itemprop='itemListElement' itemscope='itemscope' itemtype='http://schema.org/ListItem'>
         <a expr:href='data:blog.homepageUrl' itemprop='item'>
           <span itemprop='name'>Beranda</span>
         </a>
        <meta content='1' itemprop='position'/>
       </span>
       <b:loop values='data:post.labels' var='label'>
&#8250;
        <span itemprop='itemListElement' itemscope='itemscope' itemtype='http://schema.org/ListItem'>
         <a expr:href='data:label.url' itemprop='item'>
           <span itemprop='name'><data:label.name/></span>
         </a>
         <meta content='1' itemprop='position'/>
        </span>
       </b:loop>
&#8250;
       <span>
        <data:post.title/>
       </span>
      </div>
      <b:else/>
      <div class='breadcrumbs'>
       <span>
        <a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</a>
       </span> &#8250;
       <span>Belum ada label</span> &#8250;
       <span>
        <data:post.title/>
       </span>
      </div>
     </b:if>
    </b:loop>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
     <!-- breadcrumb for the label archive page and search pages.. -->
     <div class='breadcrumbs'>
      <span>
       <a expr:href='data:blog.homepageUrl'>Beranda</a>
      </span> &#8250;
      <span>Arsip untuk
       <data:blog.pageName/>
      </span>
     </div>
     <b:else/>
     <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <div class='breadcrumbs'>
       <b:if cond='data:blog.pageName == &quot;&quot;'>
        <span>
         <a expr:href='data:blog.homepageUrl'>Beranda</a>
        </span> &#8250;
        <span>Semua pos</span>
        <b:else/>
        <span>
         <a expr:href='data:blog.homepageUrl'>Beranda</a>
        </span> &#8250;
        <span>Pos di bawah
         <data:blog.pageName/>
        </span>
       </b:if>
      </div>
     </b:if>
    </b:if>
   </b:if>
  </b:if>
  </b:if>
</b:includable>
Kemudian cari kode berikut ini.
<div class='post-footer'>
Dari pengalaman saya, kita akan menemukan dua buah kode seperti itu. Lewati kode yang pertama dan simpan kode di bawah ini setelah atau di bawah kode yang kedua.
<b:include data='posts' name='breadcrumb'/>
Save template. Breadcrumb akan muncul di bawah postingan, kamu tinggal menyesuaikan nya seperti yang kamu inginkan. Mohon maaf apabila ada kekurangan, apabila ada yang kurang jelas dan ingin di tanyakan bisa di tulis di kolom komentar.

1 comment:

  1. Sempat bingung mengatasi masalah "data-vocabulary.org schema deprecated". Terimakasih min, sekarang sudah fix.

    ReplyDelete