Cara Memasang Breadcrumb Microdata Schema.org SEO Friendly Menggunakan Ikon - Breadcrumb merupakan sebuah navigasi yang sebagian besar terletak dibawah atau diatas judul blog. Dengan adanya breadcrumb mempermudah bagi pengguna untuk mengetahui halaman mana saja yang tertaut dengan halaman yang sedang mereka kunjungi.
Pada postingan sebelumnya Cara Memperbaiki Warning Breadcrumb Error Data-Vocabulary.org Schema Deprecated Di Blog yang menimpa hampir sebagian besar blogger dan webmaster. Untuk kali ini saya akan sedikit membahas mengenai cara memasang breadcrumb schema.org SEO Friendly di blog menggunakan ikon SVG.
Untuk contohnya bisa dilihat di blog ini ya, ada ikon terselip di breadcrumb yang terdapat tepat diatas judul blog ini.
Menurut beberapa sumber yang saya baca, breadcrumb bisa tampil di hasil pencarian dengan catatan navigasi halaman harus berupa list.
Maka alangkah baiknya jika kita pun ikut menerapkan breadcrumb hasil rekomendasi dari Schema.org. Silahkan ikuti panduannya dibawah ini.
Cara Memasang Breadcrumb Microdata Schema.org SEO Friendly
1. Masuk ke blogger kalian
2. Silahkan pilih Tema kemudian Edit HTML
3. Cari kode seperti dibawah ini
<b:includable id='breadcrumb' var='posts'>
..................
..................
..................
</b:includable>
4. Langsung ganti kode yang tadi dengan kode dibawah ini.
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.pageType == "item"'>
<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 + "?&max-results=16"' 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 != "true"'>
<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>
5. Setelah itu tambahkan CSS dibawah ini sebelum kode ]]></b:skin> atau </style> atau setalah <style amp-custom> untuk blog amp.
/* 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}
6 Simpan
Cek Breadcrumb Blog Dengan Google Testing Tool
Setelah berhasil diterapkan, silahkan salin alamat url postingan anda dan lihat hasilnya di google testing tool. atau silahkan ikuti panduannya sebagai berikut
1. Silahkan masuk ke halaman Google Testing Tool
2. Masukan url postingan ke kolom yang disediakan
3. Pilih Jalankan Pengujian
4. Lihat hasilnya disebelah kanan
5. Apabila ada tulisan berupa BreadcrumbList itu tandanya sudah berhasil. Contoh seperti dibawah ini
Kesimpulan
Apabila kalian menerima warning error breadcrumb, maka sebaiknya segera lakukan perubahan dengan menggunakan schema.org. Cara Mengatasi Warning Breadcrumb ini bisa di validasi dengan menggunakan google testing tools.
Apabila ingin menambahkan ikon ke breadcrumb blog kamu, silahkan ikuti panduannya diatas. Semoga bermanfaat.
