Template Breadcrumb Schema.org - Blogger

Menambahkan Breadcrumb di Blogger

Postingan terkait:

Breadcrumb simple Bogger

Daftar isi:

Breadcrumbs berdasarkan referensi dari Google search Console alias Google Webmaster tool yaitu :
berfungsi sebagai tautan navigasi yang memberitahukan lokasi postingan / halaman yang dibuka oleh dan kepada pengunjung.

Contohnya nampak seperti yang terdapat tepat diatas potingan ini.

Disitu cukup jelas memberitahukan dari mana asal postingan atau dimasukkan pada kategori / label apa saja di blog ini.

Selain memberitahukan lokasi, Breadcrumb ini juga bisa menjadi cuplikan pendukung dihalaman hasil pencarian seperti yang nampak pada screenshot dibawah ini.

Screenshot ini diambil dari tampilan informasi yang ada di Search Console, jadi masing-masing bisa melihatnya langsung disana, klik saja ikon yang terdapat sejajar dengan menu :

Tampilan penelusuran

Breadcrumb di SERP Google

Breadcrumb - Schema.org

Untuk penempatannya, copy kode HTML dibawah ini lalu lanjutkan ke bagian Praktik & CSS.

HTML

<div class='breadcrumb'>
<ol itemscope='' itemtype='http://schema.org/BreadcrumbList'>
<li class='hidden' itemprop='itemListElement' itemscope='' itemtype='http://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' itemprop='item'>
<span itemprop='name'><data:view.title.escaped/></span></a>
<meta expr:content='data:view.title.escaped' itemprop='name'/>
<meta content='1' itemprop='position'/>
</li>
<li itemprop='itemListElement' itemscope='' itemtype='http://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' itemprop='item'>
<span itemprop='name'>Depan</span></a> ›
<meta content='Beranda' itemprop='name'/>
<meta content='2' itemprop='position'/></li>
<li itemprop='itemListElement' itemscope='' itemtype='http://schema.org/ListItem'>
<span itemprop='name'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' itemprop='item' rel='tag'>
<span><data:label.name/></span></a> ›
</b:loop>
</span>
<meta content='3' itemprop='position'/>
</li>
<li itemprop='itemListElement' itemscope='' itemtype='http://schema.org/ListItem'>
<span itemprop='name'><data:post.title/></span>
<meta expr:content='data:post.url' itemprop='item'/>
<meta content='4' itemprop='position'/>
</li>
</ol>
</div>

Hasil validasi data terstruktur

Praktik & CSS

Cara penggunaan :

Paste di tag elemen <div> paling luar dari halaman postingan. Biasanya class-nya post-outer

Atau cari teks yang seperti ini :


  <!-- If metaDescription is empty, use the post body as the schema.org description too, for G+/FB snippeting. -->

Paste kode breadcrumb tadi, diatas atau dibawah teks tersebut.

Lalu tambahkan css berikut ini untuk sedikit memberikan gaya pada tampilannya.

Tampilan live Breadcrumbs ini bisa dilihat langsung dibawah judul postingan disetiap halaman blog ini.

Tambahkan tag : <div class='clear'/> tepat dibawah kode diatas untuk mengantisipasi perubahan posisi bodi postingan akibat kode float pada cssnya.

Uji Hasil (hanya untuk halaman postingan / single item) di: Pengujian hasil kaya - Search Console