Cara Mengatasi Error Breadcrumb Blogger [2020]

Baru-baru ini muncul error tentang Breadcrumb Blogger error data-vocabulary, penyebabnya karena beralih ke schema.org yang sebelumnya data-vocabulary.org.

Ok saatnya kita memperbarui Breadcrumbs dengan Microdata Schema.org pada template blog kalian.

Cara Mengatasi Error Breadcrumb Blogger 2020

1. Pertama, buka Blogger > Tema > Edit HTML
   Cari <b:includable id='breadcrumb' var='posts'> ... </b:includable>
   


2. Ganti semua dengan markup html berikut

<b:includable id='breadcrumb' var='posts'>
   <b:if cond='data:view.isPost'>
      <b:loop values='data:posts' var='post'>
         <b:if cond='data:post.labels'>
            <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' title='Home' itemprop='item'>
                  <span itemprop='name'>Beranda</span></a>
                  <meta content='1' itemprop='position'/>
               </span>
              <span class='fa fa-angle-right'></span>
               <b:loop index='num' values='data:post.labels' var='label'>
                  <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
                     <a expr:href='data:label.url + &quot;?&amp;max-results=10&quot;' expr:title='data:label.name' itemprop='item'>
                        <span itemprop='name'><data:label.name/></span>
                     </a>
                     <meta expr:content='data:num+2' itemprop='position'/>
                  </span>
                  <b:if cond='data:label.isLast != &quot;true&quot;'>
                   <span class='fa fa-angle-right'></span>
                  </b:if>
               </b:loop>
                <span class='fa fa-angle-right'></span> 
               <span><data:post.title/></span>
            </div>
         </b:if>
      </b:loop>
   </b:if>
</b:includable>