SATRIARYAN22

Informasi Dunia Blogging dan Tutorial

Cara Membuat Breadcrumb Microdata Schema.org Dengan Ikon SVG

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 atau blog 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 kalian 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.
SATRIARYAN22 adalah sebuah blog yang memberikan informasi tentang agama dan akidah islam
  • Facebook
  • Twitter
  • Instagram
  • DONASI VIA DANA Bantu berikan donasi anda jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.satriaryan22.com
    Buka Komentar
    Tutup Komentar

    0 Response

    Post a Comment

    √ Catatan Untuk Para Jejaker
    • Mohon Tinggalkan jejak sesuai dengan judul artikel.
    • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
    • Dilarang mencantumkan link aktif di komentar.
    • Komentar dengan link aktif akan otomatis dihapus
    • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel