Membuat Breadcrumb Microdata Schema.org Dengan Ikon SVG

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

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

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.