Cara Memasang Breadcrumb Microdata Schema.org SEO Friendly Di Blog Menggunakan Ikon

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 == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'  >
<svg viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000000'/></svg>
<span   >
<a expr:href='data:blog.homepageUrl' title='Home' >
<span >Home</span></a>
<meta content='1' />
</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   >
<a expr:href='data:label.url + &quot;?&amp;max-results=16&quot;' expr:title='data:label.name' >
<span ><data:label.name/></span>
</a>
<meta expr:content='data:num+2' />
</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>

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

Cek error breadcrumb blog menggunakan google testing tool

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.

Share:

admin

Halo perkenalkan nama saya Mangaip. Saya merupakan konten kreator, influencer, dan penulis di blog ini.

Leave a Reply

Your email address will not be published.