Cara memasang breadcrumb pada varian template default terbaru blogger


apakah breadcrumb itu?

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:
editor HTML Blogger
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>

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:

13 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. Tks ya mbk :

    1. Breadcrumb saya tiap hari terus bertambah

    2. Kotak penelusuran link tiap hari terus bertambah

    3. Ada tambahan menu navigasi berwarna hijau di atas judul artikel..

    Good..

    BalasHapus
    Balasan
    1. Sama sama, kotak penelusuran sitelink itu penting buat SEO, ujung ujungnya menguntungkan buat bisnis :)

      Hapus
    2. Mbak mau tanya lagi, untuk menampilkan kotak running text (diatas menu navigasi yang berwarna hijau), saya harus baca artikel yang mana di halaman ini ?

      Hapus
    3. itu namanya kode marquee.
      1. Masuk ke pengaturan blogger
      2. Pilih tataletak
      3. Tambahkan gadget/widget
      4. Pilih widget TEXT dan buka.

      Pada blanko kosong widget text, ketik:

      <marquee> kata kata saya...inforrmasi saya...</marquee>

      Geser/drag (atau pidahkan) widget ke ata bagian postingan atau di bawah header.

      Selesai

      Hapus
  2. Mbak, mau Tanya :

    1. Apakah saya perlu mengaktifkan robot.txt pada blog saya agar halaman bisa di index Dan di crawl semuanya ?

    2. Apakah ada pengaruhnya dengan kita mengaktifkan robot.txt dengan breadcrumb Dan kotak penelusuran link ?

    3. apa aja isi perintah Dari robot.txt tersebut?

    Blog saya menggunakan tema contempo

    BalasHapus
  3. jawaban 1: sebenarnya tidak perlu karena sejak pertama kit daftar blog sudah aktif dengan sendirinya secara default, dan itu lebih aman dari kesalahan.

    jawaban 2: Berpegaruh jika setting salah dan malah meblokir pengindekan mesin pencari.
    jawaban 3: Jika ingin setting lebih baik pasang sebagai berikut,

    User-agent: *
    Allow: /
    Disallow: /search

    Sitemap: https://www.bloganda.com/sitemap.xml

    Dan ingat, template contempo sudah memiliki setting ini sejak awal secara default

    BalasHapus
    Balasan
    1. Oke..saya akan coba update isi perintah robot.txt tsb pada blog.

      Tks atas pencerahannya ya

      Hapus
  4. Kebetulan nih saya juga mau pasang breadcrumb tapi masih mikir2 soalnya ada beberapa hal yg membuat saya bertanya2.

    1. Mengapa blogger tidak menyiapkan kode breadcrumb di template2nya?

    2. Apakah blogspot boleh dipasangi breadcrumb? masalahnya url breadcrumb tidak boleh dgn format misalnya: "domain/search/label/cinta"

    Url breadcrumb harus langsung seperti ini "domain/label"

    Btw itu kode2 yg dihapus diatas kode2 penting lho.

    Dan juga ada beberapa kode dari v2 dipasang ke v3.
    pageType itu kode v2
    Klo v3 pakai view.isSinggle

    Tak bermaksud apa2 hanya ingin komen 🙏🙏

    BalasHapus
    Balasan
    1. Menurut John Mueller pakar Web Google via twitnya, Blogger memang hanya membuat template dasar, penggunalah yang harus mengoptimalkannya, atau..tidak mengoptimalkannya, itu hanya pilihan. Seali lagi saya sih gak benar benar mengerti apakah pemasangan breadcrumb termasuk. Namun pada platform blog yang di tulis berdasarkan PHP, seperti igniester dan WP itu seperti wajib.

      Dan, sudah di uji kok, lagian sumber kode di atas dari halaman resmi Google (Jason-LD breadcrumb) walau tampilannya harus dimodifikasi.

      Saya juga tidak tahu, karena ini berawal dari 'keprihatinan' pada saat melihat performa halaman blog di halaman Google Webmaster, disana ada tool penguji breadcrumb dan kotak penelusuran sitelink, kok. Rapor halaman kami ternyata nilainya NOL (0). Jadi kami utak atik saja mana yang benar sambil mengujinya di halaman 'data terstruktur; Google.

      Pada saat tanpa breadcrumb di webmaster tool, halaman ini selalu dapat notifikasi merah pada bagian 'penyempurnaan' yakni terutama pada bagian breadcrumb dan kotak penelusuran sitelinknya...dan alih alih dapat nilai selalin merah, itu dinyatakan zero.

      Namun setelah breadcrumb di atas diterapkan perlahan lahan breadcrumb menjajadi valid secara signifikan: dari NOL (0) menjadi 733 dalam waktu seminggu! dan sitelink? tadinya juga NOL (0) sekarang telah muncul 369 kotak penelusuran yang valid!

      Apakah itu berharga...jujur sampai saat ini belum benar benar yakin dan percaya, hanya saja setelah pemasangan - entah kebetulan atau tidak - beberapa halaman menjadi page one dan pengunjung memang terasa bertambah banyak.

      Hapus
    2. Kalau begitu berarti tetap diterima walau salah sedikit.

      Bahkan digoogle developer menulis breadcrumb itu ada 2 model, tunggal dan ganda.

      Ok deh kalau memang dianggap valid aku mau pasang juga, tengkyu infonya mas mbak 👍

      Hapus
  5. Cara dia atas bisa ga buat theme emporio. Kmren saya pakai template bawaan blogger contempo dan Soho bisa pasang breadcrumbs dari mbak igniel. Tpi theme emporio ga bisa ga muncul di judul dan di google search console

    BalasHapus
    Balasan
    1. Tentu saja bisa, kecuali template soho caranya sedikit beda sesuai petunjuk

      Hapus
Lebih baru Lebih lama

Formulir Kontak