Membuat Breadcrumbs dengan Microdata Schema.org

Membuat Breadcrumbs dengan Microdata Schema.org - Sedari dulu saya memang tidak begitu nyaman dengan struktur breadcrumbs yang berbeda dengan struktur yang lain. Seperti menggunakan itemtype='http://data-vocabulary.org/Breadcrumb' atau xmlns:v='http://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.
Membuat Breadcrumbs dengan Microdata Schema.org

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'>
<div class='breadcrumbs' itemscope="itemscope" itemtype="http://schema.org/BreadcrumbList">
<span><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;</span>
<b:loop values='data:post.labels' var='label' index='num'>
<span itemscope="itemscope" itemprop="itemListElement" itemtype="http://schema.org/ListItem"><a itemid="" expr:href='data:label.url + &quot;?max-results=6&quot;' expr:title='data:label.name' itemtype="http://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" />
</span>
</b:loop>
<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 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 seperti berjejer ke bawah, tinggal perbaiki saja CSS-nya.

Catatan:
Icon pada breadcromb di atas menggunakan FontAwesome, jadi pastikan pada template Anda sudah terdapat stylesheetnya seperti ini:
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Atau seperti ini:
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Lalu simpan template.

Terkait: Cara Memasang Breadcrumb pada Blogger Layout Versi 3 Terbaru
Niagahoster
VPS Starts from
$2.5
/Month

Vultr

Read Review
  • One-click installation of 20+ apps
  • Available 17 worldwide locations
  • 100% local SSD and high performance Intel CPUs
  • Infinite OS combinations
Visit Site
Gunakan link di atas untuk saldo akun $100 gratis
DigitalOcean
VPS Starts from
$5
/Month

DigitalOcean

Read Review
  • Deploy custom image, RDP, 1-Click App, or standard distribution
  • Flexibility and scalability
  • Fantastic average uptime of 99.99%
  • Infinite OS combinations (Linux and Windows)
  • Developer-friendly tools and APIs
Visit Site
Topup $25 to gets $100 in credit over 60 days with refer link above
Niagahoster
Mulai dari
Rp10K
/Bulan

Niagahoster

View Details
  • Free SSL Certificate
  • Garansi 30 hari
  • Free domain & website migration
  • Tersedia unlimited disk space (shared hosting, kecuali paket bayi)
Visit Site
Diskon unlimited hosting hingga 75%
Niagahoster
VPS mulai dari
Rp68
/Jam

IDCloudHost

View Details
  • One-Click Deploy
  • Lokasi server Indonesia termurah
  • Instal berbagai Control Panel, VM, OS dan aplikasi
  • Menghubungkan dengan API
Visit Site
Dapatkan free credit Rp50K dengan minimal topup Rp50K

Komentar telah ditutup dan disembunyikan. Jika ada yang perlu disampaikan silahkan kirim pesan lewat laman kontak.