Mengatasi Struktur Data Breadcrumb Error Menggunakan schema.org

Mengatasi Error Pada Struktur Data schema.org Breadcrumb

Tutorial Cara Mengatasi Error Struktur Data pada Breadcrumb menggunakan markup schema.org karena data-vocabulary.org sudah tidak bisa dipakai / akan error ketika kita cek struktur data di Google Structured Data Testing Tool


Dibawah ini saya akan jabarkan Struktur Dasar Breadcrumb Schema.org dan bagaimana cara penerapannya pada Template Blogger...


Struktur Dasar Breadcrumb schema.org



<ol id='breadcrumb' typeof='BreadcrumbList' vocab='http://schema.org/'>

<li property='itemListElement' typeof='ListItem'>
<a href='#URL' property='item' typeof='WebPage'>
<span property='name'>Home</span></a>
<meta content='1' property='position'/>
</li>

<li property='itemListElement' typeof='ListItem'>
<a href='#' property='item' typeof='WebPage'>
<span property='name'>Label 1</span></a>
<meta content='2' property='position'/>
</li>

<li property='itemListElement' typeof='ListItem'>
<a href='#' property='item' typeof='WebPage'>
<span property='name'>Label 2</span></a>
<meta content='3' property='position'/>
</li>

<li>Post Title INDOASIAp</li>

</ol>


Pemasangan Breadcrumb schema.org di Template Blogger


Disini saya memberikan contoh breadcrumb yang Error / ketika menggunakan data-vocabulary.org dan setelah memperbaikinya ke breadcrumb schema.org


BEFORE - Breadcrumb data-vocabulary.org



<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>

<div class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'>
<span itemprop='title'>Home</span></a>
</span>

<b:loop values='data:post.labels' var='label'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:label.url + &quot;?max-results=6&quot;' expr:title='data:label.name' itemprop='url'>
<span itemprop='title'><data:label.name/></span></a>
</span>
</b:loop>

<span><a expr:href='data:blog.url' expr:title='data:blog.pageName' target='_blank'><data:post.title/></a></span>

</div>
</b:if>
</b:loop>


AFTER - Breadcrumb schema.org



<div class='breadcrumbs' typeof='BreadcrumbList' vocab='http://schema.org/'>

<span property='itemListElement' typeof='ListItem'>
<a expr:href='data:blog.homepageUrl' title='Home' property='item' typeof='WebPage'><i class='fa fa-home'/>
<span property='name'>Home</span></a>
<meta content='1' property='position'/>
</span>

<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
  <b:loop index='index' values='data:post.labels' var='label'>
    <span property='itemListElement' typeof='ListItem'>
      <a expr:title='data:label.name' expr:href='data:label.url' property='item' typeof='WebPage'>
      <span property='name'><data:label.name/></span></a>
      <meta expr:content='data:index + 2' property='position'/>
    </span>
  </b:loop>
  <span><data:post.title/></span>
<b:else/>
  <span>Unlabelled</span>
</b:if>
</b:loop>

</div>

Jika struktur breadcrumb pada teplate kalian sesuai dengan breadcrumb vocabulary diatas maka bisa langsung menggantinya dengan struktur breadcrumb schema.org yang sudah saya sesuaikan/ di perbaiki


Apabila struktur pada templae kalian berbeda maka bisa menyesuaikannya sendiri, teapi jika kalian bingung bisa mengganti Sruktur Breadcrumb kalian dengan salah satu breadcrumb dibawah ini.


Langkah-Langkah Mengganti Breadcrumb

  1. Masuk ke Mode HML
  2. Cari Tag <b:includable id='breadcrumb' var='posts'>
  3. Lalu hapus semuanya sampai </b:includable>
  4. Selanjutnya masukan salah satu Struktur Breadcrumb dibawa ini

Single Page Breadcrumb schema.org



<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<ol id='breadcrumb' typeof='BreadcrumbList' vocab='http://schema.org/'>

<li property='itemListElement' typeof='ListItem'>
<a expr:href='data:blog.homepageUrl' title='Home' property='item' typeof='WebPage'><i class='fa fa-home'/>
<span property='name'>Home</span></a>
<meta content='1' property='position'/>
</li>

<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
  <b:loop index='index' values='data:post.labels' var='label'>
    <li property='itemListElement' typeof='ListItem'>
      <a expr:title='data:label.name' expr:href='data:label.url' property='item' typeof='WebPage'>
      <span property='name'><data:label.name/></span></a>
      <meta expr:content='data:index + 2' property='position'/>
    </li>
  </b:loop>
  <li><data:post.title/></li>
<b:else/>
  <li>Unlabelled</li>
</b:if>
</b:loop>

</ol>

</b:if>
</b:includable>


All Page microdata Breadcrumb schema.org



<b:includable id='breadcrumb' var='posts'>
<b:comment> breadcrumb start </b:comment>
<ol id='breadcrumb' typeof='BreadcrumbList' vocab='http://schema.org/'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
  <li property='itemListElement' typeof='ListItem'>
    <a title='Home' expr:href='data:blog.homepageUrl' property='item' typeof='WebPage'>
    <span property='name'>Home</span></a>
    <meta content='1' property='position'/>
  </li>
  <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <li><data:blog.pageName/></li>
  <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <b:comment> breadcrumb for the post page </b:comment>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.labels'>
          <b:loop index='index' values='data:post.labels' var='label'>
          <b:comment> b:if cond='data:label.isLast == &quot;true&quot;' </b:comment>
            <li property='itemListElement' typeof='ListItem'>
              <a expr:title='data:label.name' expr:href='data:label.url' property='item' typeof='WebPage'>
              <span property='name'><data:label.name/></span></a>
              <meta expr:content='data:index + 2' property='position'/>
            </li>
          <b:comment> /b:if </b:comment>
          </b:loop>
          <li><data:post.title/></li>
        <b:else/>
          <li>Unlabelled</li>
        </b:if>
      </b:loop>
    <b:else/>
      <b:if cond='data:blog.pageType == &quot;archive&quot;'>
        <b:comment> breadcrumb for the label archive page and search pages.. </b:comment>
        <li>Archives for <data:blog.pageName/></li>
      <b:else/>
        <b:if cond='data:blog.pageType == &quot;index&quot;'>
          <b:if cond='data:blog.pageName == &quot;&quot;'>
            <li>All posts</li>
          <b:else/>
            <li>Posts filed under <data:blog.pageName/></li>
          </b:if>
        </b:if>
      </b:if>
    </b:if>
  </b:if>
</b:if>
</ol>
<b:comment> breadcrumb end </b:comment>
</b:includable>

Langkah terakhir tambahkan CSS dibawah ini lalu SAVE dan lihat hasilnya



/* breadcrumb */
ol#breadcrumb{
    font-size:13px;
    padding: 8px;
}
#breadcrumb li {
    display: inline;
    list-style-type: none;
}
#breadcrumb li:after {
    content: " > ";
}
#breadcrumb li:last-child:after {
    content: none;
}