Cara memasang breadcrumb pada varian template default terbaru blogger

Ini adalah tentang bagaimana cara memasang breadcrumb schema.org ke dalam template terbaru Blogspot. 

Dan jangan salah ya...Template blogger itu terdiri dari dua jenis:

1. Template terbaru: Contempo, Soho, Emporio dan Notable (sudah mengusung desain layout versi ke 3) Jenis template bawaan Blogger yang sangat disarankan karena memiliki fitur responsif dan Mobile friendly.
2. Template lama: Simple, PT. keren sekali, Jendela, Kelembutan, dinamis, Perjalanan, watermark. (Mengusung desain layout versi ke 2). Jenis template bawaan lama yang lebih di prioritaskan untuk tampilan layar PC dekstop dan laptop, kurang responsif dan mobile sehingga untuk membuatnya responsif harus dimodifikasi terlebih dahulu.
3. Template Klasik (layout desain pertama)  - sudah tidak disarankan lagi untuk dipergunakan. Template ini jauh dari kata responsif dan mobile. Benar benar di rancang pada zaman sebelum kelahiran web mobile. Template dari tahun berapa ya..

Jadi tinggal dua jenis template default (bawaan) Blogger yang benar benar masih dipergunakan hingga saat ini. Namun google pernah menyarankan agar para Blogger segera mengganti template lama mereka dengan template terbaru (desain layout versi ke 3) diatas termasuk template premium berbeli yang masih belum up to date ke zaman serba mobile.

APA HUBUNGAN JENIS TEMPLATE TERSEBUT DENGAN PEMASANGAN BREADCRUMB?

Cara penerapannya! Memasang breadcrumb pada template lama dengan template baru itu beda, jika kalian mengikuti tutorial di penelusuran Google saat ini tutorial itu berlaku untuk template lama jenis kedua. Tutorial itu dapat di terapkan ke template template tersebut termasuk template premium viomagz buatan mas Sugeng karena viomagz itu masih menganut desain dan layout versi ke 2.

Beberapa elemen di tulis berbeda baik sintaks hingga posisi peletakannya diantara kedua jenis template, namun jangan kuatir semua jenis template kedua mirip saja, dan template jenis layout versi ketiga juga hampir memiliki ciri ciri yang sama.

Namun tidak akan dapat diterapkan kepada empat varian utama template terbaru Jenis kesatu yang saya urutkan di atas. Mengakomodasi hal tersebutlah tutorial ini saya siapkan sebagai cara terbaru memasang breadcrumb pada template template terbaru Blogger.

Breadcrumb itu sangat penting untuk menjadikan halaman Blog menjadi SEO terstruktur dan memiliki sitelink. Namun memasang breadcrumb ke dalam template blogger lama dengan layout versi 2 dengan template blogger varian terbaru dengan layout versi 3 sangatlah jauh berbeda. Kalau kalian terapkan tutorial pemasangan breadcrumb yang ada sekarang ke dalam empat varian utama template blogger terbaru ya pasti error atau tidak akan tampil breadcrumbnya. 

Dan, jenis breadcrumb itu sendiri selama ini yang paling banyak di pergunakan ada 2:

1. Data.vocalubary
2. Schema.org

Pemasangan breadcrumb jenis pertama menimbulkan masalah eror pada data terstruktur dan kotak penelusuran sitelink di Webmaster tool. Template viomagz buatan Mas Sugeng juga mengalami hal ini, jika kalian masih mempergunakan versi 3.0 ke bawah. Data.vocalubary sudah tidak dijadikan standard breadcrumb lagi oleh Google. Ia sudah di campakan.

Google telah mengumumkan perubahannya dan meminta para websider di muka bumi agar mengganti data.vocalubari dengan Schema.org. Secara sederhana kita dapat memasang script Jason-LD ke dalam template. Itu valid. Namun tanpa tampilan visual breadcrumb di atas Judul setiap postingan halaman blog.

Peringatan pada gambar di atas menjelaskan bahwasanya tidak setiap intruksi pemasangan widget dan elemen masa lalu yang masih beredar di internet sekarang dapat di terapkan begitu saja. Zaman terus berkembang dan apalagi template template default bawaan blogger terbaru telah hadir, demikian juga para desainer telah membuat template template berdasarkan layout versi ke 3, alih alih desain dengan layout versi ke 2 seperti template viomagz misalnya. Banyak instruksi pemasangan yang di tulis berpatok pada kasus breadcrumb error di template viomagz. 

Padahal template buatan Mas Sugeng tersebut masih dengan desain layout versi ke 2. Pada dasarnya mirip dengan template simple (sederhana) bawaan Blogger.

Berikut adalah cara terbaru pemasangan breadcrumb struktur data schema.org pada template blogger varian terbaru (layout versi ke 3), cara ini saya temukan di sela sela waktu membuat template template sederhana berdasarkan template default (bawaan) Blogspot.

MENGAPA ITU PENTING?

1. Agar data halaman blog terstruktur dan baik di mata mesin pencari
2. Meningkatkan kotak penelusuran sitelink
3. Halaman tampak lebih rapi dan profesional.
4. Mengurangi Bounce Rate alias efek pentalan
5. Sebagai navigasi kedua bagi halaman blog
6. Jelas sekali secara keseluruhan sangat baik untuk mengoptimalkan SEO

CARA MEMASANGNYA PADA TEMPLATE VARIAN TERBARU TEMPLATE BLOGSPOT

1. Langkah Pertama

1. Masuk ke pengaturan dasbor blogger baru (saya menggunakan template contempo)
2. Pilih tema
3. Pilih Edit HMTL

Pada halaman editor HTML template Blogger cari kode:

<b:includable id='main'>↔️</b:includable>

letakanya di bawah kode: <b:defaultmarkup type='Blog'>
Di dalam halaman editor blogger akan tampak sebagai berikut:

Jika tanda ↔️ kalian klik maka kode merentang jadi panjang, artinya tanda panah itu berfungsi menyembunyikan untaian kode kode di dalam penutup <b:includable id='main'↔️ </b:includable>.

Dan Kalian dapat menghapus seluruh kode dengan hanya menyorot kode ketika ia masih dalam format <b:includable id='main'>↔️</b:includable> dan menghapusnya, maka seluruh kode akan terhapus kode panjangnya akan terlihat sebagai berikut:

<b:includable id='main'>
<b:include name='noContentPlaceholder'/>

<b:comment>Cap the total number of ads (widgets and inline ads).</b:comment>
<b:with value='3' var='maxNumAds'>
<b:with value='data:widgets.AdSense.size' var='numDesktopAds'>
<b:with value='data:widgets.AdSense count (w =&gt; w.sectionId != &quot;ads&quot;)' var='numMobileAds'>
<b:comment>Filter out the featured post, but only on the homepage.</b:comment>
<b:with value='data:widgets.FeaturedPost filter (w =&gt; w.sectionId == &quot;page_body&quot;) map (w =&gt; w.postId)' var='featuredPostIds'>
<b:with value='data:view.isHomepage ? data:posts filter (post =&gt; post.id not in data:featuredPostIds) : data:posts' var='posts'>
<b:include name='super.main'/>
</b:with>
</b:with>
</b:with>
</b:with>
</b:with>
</b:includable>

Setelah menghapus semua kode tersebut dan ganti dengan kode breadcrumb valid standar schema.org berikut:

<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>

2. Langkah Kedua.

Begitu selesai langkah di atas, cari kode </head> dan letakan kode CSS berikut tepat di atasnya:

<style type='text/css'>
/* Breadcrumb */
.breadcrumbs{background:#fff;line-height:1.2em;width:auto;overflow:hidden;margin:10;padding:10px 0;border-top:2px solid #00FF66;border-bottom:2px solid #00FF66;font-size:80%;color:#006600;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:#00FF66;font-weight:400}

.breadcrumbs a:hover{color:#006600}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#00FF66}
</style>

3. Langkah terakhir 

Di dalam halaman editor HML blogger cari kode berikut:

<b:include name='noContentPlaceholder'/> 

Jika kesulitan memintas pencariannya dengan tulisan kode penuh diatas, tuliskan saja sebagian seperti berikut:

<b:include name='noContent 

Setiap template blogger terbaru memiliki kode tersebut sedangkan pada template yang lebih lama sintaks dan deklarasinya akan tampak berbeda beda.

dan letakan kode di bawah ini tepat di atasnya kode tadi:

<b:include data='posts' name='breadcrumb'/>

Cara ini dapat juga di terapkan ke template Notable dan Emporio. Akan tetapi sedikit berbeda cara penerapannya pada template SOHO, perbedaannya hanya terletak pada dimana meletakan kode: <b:include data='posts' name='breadcrumb'/>

Pada template Soho kalian harus mencari kode berikut:

<div class='post'>
<b:class cond='data:view.isMultipleItems and data:post.featuredImage' name='has-featured-image'/>
<b:class cond='data:view.isMultipleItems and not data:post.featuredImage' name='no-featured-image'/>
<b:include data='post' name='postMeta'/>
<b:if cond='data:view.isSingleItem'>
<b:include data='posts' name='breadcrumb'/>
<b:include name='headerByline'/>
<b:include data='post' name='postTitle'/>
<div class='post-body-container'>
<b:include data='post' name='postBody'/>
</div>

DEMO

Jika kalian jeli dan memperhatikan tutorial kami diatas akan terlihat perbedaan signifikan penerapan pemasangan breadcrumb ini pada kedua jenis template. Sekarang pengatahuan kita bertambah terkait hal hal menyangkut prosedur halaman website Google.

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share: