Cara memasang breadcrumb di template blogspot

Cara memasang breadcrumb di template blogspot

Pada dasarnya ini bisa dipasang di Template manapun hanya saja memerlukan sedikit penyesuaian lagi jadi karena saya hanya mencoba ini pada Notable saja maka saya sebut begitu.

Ada berbagai macam model kode breadcrumb setidaknya ada 3 jenis, JSON-LD, RDFa, Microdata dan HTML, pada intinya semua sama saja dan kode yang saya bagikan ini jenis RDFa schema.org khusus tunggal bukan ganda.

Untuk info2 penting lainnya, apa itu breadcrumb? Contohnya dll, terkait itu semua silakan baca saja selengkapnya di https://developers.google.com/search/docs/data-types/breadcrumb?hl=id

Catatan: Merujuk pada developers tersebut bahwa kesalahan memasang Breadcrumb dapat menyebabkan Blog kita dikenai tindakan manual alias diabaikan dengan kata lain kesalahan yang dimaksud (menurut pemahaman saya) adalah jika label pada blog kita lebih dari satu. Jadi jika ada sebagian label pada posting kita yang memiliki lebih dari satu label saran saya sebaiknya jangan memasang Breadcrumb, alih2 ingin Blog kita keren malah bakal dicuekin Google. Mengapa saya berkata seperti itu sebab Breadcrumb ada 2 jenis, jenis tunggal dan beberapa jejak alias ganda. Jika memiliki banyak label/kategori kodenya harus menggunakan formasi jenis ganda.

Contoh Jenis Tunggal (1 label):

Home > Label > Judul Posting.

Contoh Jenis Ganda (3 label A, B, C):

Home posisi-1 > Label A posisi-2 > Judul Posting posisi-3.

Label B posisi-1 > Judul Posting posisi-2.

Label C posisi-1 > Judul Posting posisi-2.

Kedua contoh diatas berdasarkan pemahaman saya dari membaca di developers, lalu apakah boleh seperti ini?

Apakah boleh susunan seperti ini? saya juga tidak tahu!

Home posisi-1 > Label A posisi-2 > Label B posisi-2 > Label C posisi-2 > Judul Posting posisi-3.

Atau susunan seperti ini? saya juga tidak tahu!

Home posisi-1 > Label A posisi-2 > Label B posisi-3 > Label C posisi-4 > Judul Posting posisi-5.

Bingung? Sama saya juga bingung. Tapi sepertinya begitulah pemasangan breadcrumb untuk label yang lebih dari satu buah. Ya sudah lupakan saja jika bingung, saya juga gak ngerti2 banget. Lanjut saja.

Style yang saya gunakan dalam css ini yaitu model ellipsis dimana teks judul posting dalam breadcrumb hanya ditampilkan beberapa huruf saja selebihnya titik tiga biji. Jika di tap pada judul akan ditampilkan secara penuh, tap di area lain judul akan kembali memendek.

Cara pemasangannya sederhana:

1. Salin css dibawah ini dan pasang pada bagian css dalam template.

2. Salin kode <b:includable id='breadCrumb'> dibawah dan letakkan di bagian <b:defaultmarkups>, bebas letakkan dimana saja tapi harus pasang diluar includable lain.

3. Salin kode include berikut <b:include cond='data:view.isSingleItem and data:widget.type != &quot;PopularPosts&quot;' name='breadCrumb'/> dan tempatkan di dalam <b:defaultmarkups> bagian dalam <b:includable id='normalPost'> dalam class "post-content" bagian dalam "post-title-container" seperti gambar dibawah ini.

Mungkin anda bertanya mengapa ada kata2 PopularPosts pada kode include tersebut, itu bermaksud agar tidak ditampilkan di PopularPosts. Sedangkan view.isSinggle adalah hanya menampilkan ini khusus pada posting tunggal/individual.

<!-- css -->

.breadcrumb ol{

font-size:14px!important;

margin:0 0 30px 0;

padding:0;

display:flex

}

.breadcrumb li{

list-style:none;

display:inline-block

}

.breadcrumb li.last{

width:100px;

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap

}

.breadcrumb li.last:hover{

overflow:visible

}

<!-- kode -->

<b:includable id='breadCrumb'>

<div class='breadcrumb'>

<ol vocab='https://schema.org/' typeof='BreadcrumbList'>

<li property='itemListElement' typeof='ListItem'>

<a property='item' typeof='WebPage' expr:href='data:blog.homepageUrl'><span property='name'>Home</span></a>

<meta property='position' content='1'/>

</li>

&amp;nbsp;&amp;rsaquo;&amp;nbsp;

<li property='itemListElement' typeof='ListItem'>

<b:loop values='data:post.labels' var='label'>

<a property='item' typeof='WebPage'

expr:href='data:label.url'><span property='name'><data:label.name/></span></a>

</b:loop>

<meta property='position' content='2'/>

</li>

&amp;nbsp;&amp;rsaquo;&amp;nbsp;

<li class='last' property='itemListElement' typeof='ListItem'>

<span property='name'><data:post.title/></span>

<meta property='position' content='3'/>

</li>

</ol>

</div>

</b:includable>

Setelah berhasil terpasang pada Template/Blog silakan lakukan pengujian hasil karya di https://search.google.com/test/rich-results?id=https://blog.anda.com dan Masukkan Url Blog anda disana dan tes. Apapun kesalahan yang anda lakukan petunjuk cara memperbaikinya ada disana. Saya tidak memasang Breadcrumb di Blog ini karena sepertinya alat tes tersebut tidak bisa memuat widget followers model modal pada Blog ini, dengan kata lain jika Blog ini ingin memasang Breadcrumb maka style model modal widget followers di Blog ini sepertinya harus di hapus tapi saya tidak mau menghapusnya. Demikian, Selamat mencoba dan Semoga bermanfaat!

Breadcrumb tersembunyi khusus Blogger

Sepertinya ada juga jenis Breadcrumb tersembunyi yang bisa dipasang di Template Blogger dan tentunya tidak terlihat oleh pengunjung namun tetap baik karena bisa terbaca oleh mesin pencari.

Kebetulan blog ini memakai itu dan dari tes "hasil kaya" atau tes breadcrumb ini di search console menyatakan valid alias sah, keren-nya lagi kode ini berfungsi untuk satu label maupun lebih, seperti kita ketahui pengambilan breadcrumb di blogger umumnya berdasarkan label postingan.

Saya tidak tau siapa pembuat kode ini tapi tengkyu untuk editblogtema.com karena saya mengambil kode ini disana, berikut ini kodenya.

<b:includable id='breadCrumb'>

<script type='application/ld+json'>{ "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "<data:blog.homepageUrl.canonical/>" <b:if cond='!data:post.labels'>}<b:else/>},<b:loop index='i' values='data:post.labels' var='label'> { "@type": "ListItem", "position": <b:with value='data:i + 2' var='num'><b:eval expr='data:num'/></b:with>, "name": "<data:label.name/>", "item": "<data:label.url.canonical/>" <b:if cond='data:post.labels.size != data:i + 1'>},<b:else/>}</b:if></b:loop></b:if> ] }</script>

</b:includable>

Cara pemasangan-nya:

1. Masuk ke halaman Tema pilih button berwarna orange mirip panah ke bawah lalu pilih Edit HTML, sesampainya disana selanjutnya tap titik tiga lalu pilih Loncat ke widget Blog.

2. Pasang kode <b:includable id='breadCrumb'> diatas dimanapun dalam area widget Blog (atau lihat gambar diatas).

2a. Umumnya pada Template Contempo maupun Essential susunan kode seperti gambar diatas berada diatasnya <b:includable id='postBody' var='post'> jadi cari "id postBody" dalam widget Blog pasti ketemu susunan kode seperti dalam gambar diatas. Tentu saja ini bukan satu2nya cara alias boleh juga dengan pemasangan cara lain.

2b. Pasang atau selipkan <b:include name='breadCrumb'/> diantara susunan seperti contoh gambar dan harus dibungkus oleh kode <b:if cond='data:view.isSingleItem'> bertujuan agar hanya tampil dihalaman postingan saja.

Catatan: Secara default susunan diatas sudah ada pada Template namun perlu ditambahi <b:include name='breadCrumb'/>

2c. Perlu dipahami juga setiap ada kode <b:include name='breadCrumb'/> bertujuan untuk memanggil dan yang dipanggil adalah <b:includable id='breadCrumb'>

includable = dipanggil.

include = memanggil.

Jika tidak di include maka kode includable tidak akan berfungsi/muncul alias nonaktif. Namun karena ini Breadcrumb tersembunyi maka meskipun sudah di include tetap tidak akan terlihat.

Untuk mengetahui apakah valid atau tidak  setelah pemasangan silakan cek blog anda di search console https://search.google.com/search-console pastikan blog anda sudah terdaftar disana jika belum bisa juga uji langsung di pengujian hasil kaya https://search.google.com/test/rich-results 

Masukkan alamat blog anda dan uji, petunjuk lengkapnya ada disana, Selamat mencoba.