Cara Membuat Breadcrumb dengan Markup Microdata Schema.org Terbaru !

April 06, 2018

Cara Membuat Breadcrumb dengan Markup Microdata Schema.org Terbaru !

Pada umumnya situs situs atau blog masih banyak yang menggunakan breadcrumb dengan markup data-vocabulary.org. Ketika markup microdata schema.org merupakan markup untuk breadcrumb terbaru yang direkomendasikan oleh google, ada baiknya kitapun mengikuti apa yang direkomendasikan oleh Google .

Google Search menggunakan markup breadcrumb dari sebuah halaman web untuk mengkategorikan informasi dari halaman dalam hasil pencarian. Dengan begitu, pengguna dapat tiba di suatu halaman dan pengguna dapat kembali ke halaman web yang sama dengan kategori yang sama dengan halaman sebelumnya.

Kali ini saya akan membagikan cara membuat breadcrumb untuk Blogger dengan menggunakan markup microdata schema.org dengan menambahkan ikon SVG sebagai separator pada tiap tiap labelnya.

Untuk mengganti atau membuat Membuat Breadcrumb dengan Microdata Schema.org, silahkan ikuti langkahnya berikut ini :

1. Cari kode ]]></b:skin> Jika sebelumnya sudah ada kode CSS yang mirip seperti itu, silahkan ganti dengan kode CSS style dibawah ini :
 /* Breadcrumb */
.breadcrumbs{background:#fff;line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:10px 0;border-top:1px solid #dedede;border-bottom:1px solid #dedede;font-size:80%;color:#888;font-weight:400;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}
.breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:#666;font-weight:400}
.breadcrumbs a:hover{color:#11589D}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#666} 

2. Silahkan cari kode seperti dibawah ini

 <b:includable id='breadcrumb' var='posts'>
.......................
.......................
.......................
</b:includable> 


Jika sudah ketemu, silahkan ganti dengan kode di dibawah ini :

<b:includable id='breadcrumb' var='posts'>
<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='https://schema#org/BreadcrumbList'>
<a expr:href='data:blog#homepageUrl' title='Home'>
<svg viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000000'/></svg> <span>Home</span></a>
<svg viewBox='0 0 24 24'><path d='M5.5,9A1.5,1.5 0 0,0 7,7.5A1.5,1.5 0 0,0 5.5,6A1.5,1.5 0 0,0 4,7.5A1.5,1.5 0 0,0 5.5,9M17.41,11.58C17.77,11.94 18,12.44 18,13C18,13.55 17.78,14.05 17.41,14.41L12.41,19.41C12.05,19.77 11.55,20 11,20C10.45,20 9.95,19.78 9.58,19.41L2.59,12.42C2.22,12.05 2,11.55 2,11V6C2,4.89 2.89,4 4,4H9C9.55,4 10.05,4.22 10.41,4.58L17.41,11.58M13.54,5.71L14.54,4.71L21.41,11.58C21.78,11.94 22,12.45 22,13C22,13.55 21.78,14.05 21.42,14.41L16.04,19.79L15.04,18.79L20.75,13L13.54,5.71Z' fill='#000000'/></svg>
<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=16&quot;' expr:title='data:label#na#e' itemprop='item' itemscope='itemscope' itemtype='https://schema#org/Thing'>
<span itemprop='name'><data:label.name/></span></a>
<meta expr:content='data:num+1' itemprop='position'/>
</span>
<b:if cond='data:label.isLast != &quot;true&quot;'>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
</b:if></b:loop>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable> 

3. Terakhir, simpan template...
Selamat mencoba dan semoga bermanfaat.

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
0 Komentar

Penulisan markup di komentar
  • Silakan tinggalkan komentar sesuai topik. Komentar yang menyertakan link aktif, iklan, atau sejenisnya akan dihapus.
  • Untuk menyisipkan kode gunakan <i rel="code"> kode yang akan disisipkan </i>
  • Untuk menyisipkan kode panjang gunakan <i rel="pre"> kode yang akan disisipkan </i>
  • Untuk menyisipkan quote gunakan <i rel="quote"> catatan anda </i>
  • Untuk menyisipkan gambar gunakan <i rel="image"> URL gambar </i>
  • Untuk menyisipkan video gunakan [iframe] URL embed video [/iframe]
  • Kemudian parse kode tersebut pada kotak di bawah ini