Membuat Breadcrumb Microdata Schema.org Dengan Ikon SVG

Ditulis oleh: Adhy Suryadi

Ditulis pada: 1/22/2020

Breadcrumb microdata schema.org dengan ikon SVG - Navigasi breadcrumb berfungsi menyediakan tautan kembali ke setiap halaman sebelumnya yang dilalui pengguna, dan menunjukkan lokasi pengguna saat ini di situs web. Secara sederhana, breadcrumb pada halaman menunjukkan posisi halaman dalam hierarki situs tersebut.

Dalam hal ini, Google Search juga 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.

Saat ini masih banyak situs atau blog yang menggunakan breadcrumb dengan markup data-vocabulary.org. Namun markup schema.org merupakan markup untuk breadcrumb terbaru yang direkomendasikan.

Sebenarnya tidak perlu markup apa pun untuk membuat breadcrumb tampil di hasil pencarian, yang penting ada navigasi halaman berupa list.

Namun apa pun itu, sebaiknya kita mengimplementasikan sesuatu yang direkomendasikan oleh mesin pencari seperti Google. Salah satunya membuat breadcrumb dengan markup schema.org.

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


Untuk membuat seperti itu, silahkan ikuti langkahnya berikut ini.

Silahkan copy kode berikut 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'>

<svg viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000000'/></svg>

<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>

<a expr:href='data:blog.homepageUrl' title='Home' itemprop='item'>

<span itemprop='name'>Home</span></a>

<meta content='1' itemprop='position'/>

</span>

<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.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;'>

<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>

Silahkan simpan di atas kode <b:includable id='comment-form' var='post'>. Jika sebelumnya sudah ada kode yang seperti atau mirip seperti itu, silahkan ganti dengan kode di atas.

Kemudian tambahkan CSS style berikut agar tampilan breadcrumb menjadi rapih.

/* 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}

Terakhir, simpan kode berikut di mana Anda ingin menampilkan breadcrumb.

<b:include data='posts' name='breadcrumb'/>

Sebagai contoh, Anda bisa simpan di bawah kode <b:includable id='main' var='top'> dan breadcrumb akan tampil di bagian atas postingan.

Selamat mencoba dan semoga bermanfaat.