Breadcrumbs dengan Microdata Schema.org

Breadcrumbs dengan Microdata Schema.org

Tips Blogger

Namina Kiky

8/09/2017

Sedari dulu saya memang tidak begitu nyaman dengan struktur breadcrumbs yang berbeda dengan struktur yang lain. Seperti menggunakan itemtype='https://data-vocabulary.org/Breadcrumb' atau xmlns:v='https://rdf.data-vocabulary.org/#'. Bukan karena tidak bermutu atau tidak ada bedanya (alias sama saja, karena masih satu aliansi dengan Schema.org). Hanya saja saya begitu kasian dengannya, dia bagaikan kaum marginal yang wujud di tengah microdata Shema.org pada struktur HTML template.

Maka berdasarkan arahan dari Developers Google Search saya memberanikan diri untuk mengutak-atik lagi struktur microdata Breadcrumb tersebut, menjadi valid Schema.org di alat pengujian struktur data.

Kalau untuk platform Blogger, kemungkinan cara pemasangannya seperti berikut ini.

Silahkan ganti atau sesuaikan html Breadcrumb pada template Anda seperti ini:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<ol class='breadcrumbs' itemscope="itemscope" itemtype="https://schema.org/BreadcrumbList">
<li><a expr:href='data:blog.homepageUrl' title='Home'><i class='fa fa-home'/> Home&amp;nbsp;</a><i class='fa fa-angle-right'/>&amp;nbsp;</li>
<b:loop values='data:post.labels' var='label' index='num'>
<li itemscope="itemscope" itemprop="itemListElement" itemtype="https://schema.org/ListItem"><a itemscope="itemscope" expr:href='data:label.url + &quot;?max-results=6&quot;' expr:title='data:label.name' itemtype="https://schema.org/Thing" itemprop="item"><span itemprop='name'><data:label.name/></span></a>&amp;nbsp;<i class='fa fa-angle-right'/>&amp;nbsp;
<meta itemprop="position" expr:content="data:num+1" />
</li>
</b:loop>
<span><data:post.title/></span>
</ol>
</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 class='breadhome'><a expr:href='data:blog.homepageUrl'>Home </a> &#8250; </span><span>Archives for <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 class='breadhome'><a expr:href='data:blog.homepageUrl'>Home</a> - </span><span class='breadlabel'>Next to See All Posts </span>
<b:else/>
<span class='breadhome'> <a expr:href='data:blog.homepageUrl'>Home</a> - </span><span class='breadlabel'>Currently Browsing: <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Kalau tampilannya kurang rapi (berjejer ke bawah), tinggal tambahkan CSS berikut ini:

.breadcrumbs li{list-style-type:none;display:inline-block;float:left} 

Lalu simpan template.

Namina Kiky