Cara memasang breadcrumb pada varian template default terbaru blogger

Diposting Oleh: konstributor

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..
Baca :

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:

Baca Juga:

Komentar

  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

Posting Komentar

Jika Anda mau menuliskan, menyisipkan atau mem"pastekan" suatu kode HTML, JS dll kedalam kotak komentar terlebih dahulu, silahkan mengkopi seluruh kode tersebut dan mem"parse"kannya kedalam kotak parse online yang banyak tersedia di Google, silahkan kunjungi:

BLOGCROWDS

Pastekan terlebih kode disana dan lalu klik tombol "PARSE" berada dibawah kanan kotak parse tersebut, setelah hasil parse muncul copy seluruh kode tersebut dan pastekan kedalam kotak komentar blogspot dan lalu publish.

Labels

adwords aibo ajax alexa algoritma alternative Am I Responsive amazon ambigu Amerika AMP Andorid Android Android 10 Angular animasi apple ARM Art Of War artikel sabtu asesories autodidact avatar avatar penulis awesome awsome back to top backdoor backlink bahasa bank btn batam beautiful beginning belajar belajar koding berita bing web master biografi blackberryOS blackhat blockquote blog blogcomments blogger bloggerhelp blogging Blogging mobile bloging blogspeed blogspot bluetooth bootstrap border dash breadcrumb browser btn mobile bugs Buku business capital letter cara catatan catatan awal tahun Cek IMEI Cerita cerpen cewek chimpense chipset chrome chrome 76 Cina cinta clickjacking codepen coding compose contact form contempo contempo base contempo blackmagic contempo hibrida contempo hybrid converter coolest copy-paste copyright covid 19 covid_19 cowok CPC credit footer css CTR cuitan curhat cybercrime Dahlan Iskan dark mode dasbor data default Demo desain diblokir dirtylink disway DOM domain domain authority Donald Trump download download template terbaru dropdown earn money edisi minggu edit editblogtema editor HTML ekonomi elektronik Elle Darby embed emoji emporio emporio hybrid english error essential expires header expires headers facebook fakta fanpage fast loading template fastloading template favicon featured posts feed burner firefox fitur fixed fixed sidebar font font awsome footer footer link Footer navigasi forbes Free friendship fuchsia full stacks furure g-suite gadget gagdet galeri gambar gambar bergoncang gambar profile penulis gambar responsive game generasi Alpha Generasi Z geng motor genius gerhana girl gmail Gmetrix gong xi fa cai good news google google chrome Google Domain google drive google font Google honemoon google Plus google search console google webmaster Googlewebmaster gradasi warna grafik gramedia gratis grid style GTmetrix h1 Habibie hack hacker halaman web hamburger menu hanya opini hapus hari bumi harimau heading headings heart secret hewan hoax hobi hotpink HTM5 html huawei hukum human Idulfitri Iklan ikon Imlek in memories indie Indonesia Indonesia darurat corona indosat infinite color infinity war informasi instagram intel inteligensia internal link internasional internet internt interntet interntt intert iOS iPad iPadOS iPhone isu IT italia Jaime Ocabo java JavaScript jimdo jin Ping jingling Jokowi jQuery JSitor kaca pembesar kafe kalimantan kalkulus kamera kanonis kartun keamanan keamanan blogger kebijkan kecepatan blog mobile kehidupan kemanusiaan kesehatan keyakinan keyboard keyword kiata G+ klasik klik kode warna koding komentar komentar blog komputer konsipirasi konten konversi kopi kota kotak navigasi menu blog kotak pencarian kotlin kriminalitas kualitas kucing label laptop lay out lay out version 3 theme layarlipat layout lazyload lifehack lingkungan logitech logo love Macbook Macbook Air machine learning MacOS magnifier maintenance makmur manusia margasatwa masa depan masonry matahari matematika medsos mega menu mengganti tempa menu menu navigasi menu pencarian menulis merombak metafisika Microsoft microsoft edge Minggu minify misteri mitos mobile modal modern modifikasi monetisi morality motivasi motivation moz myths nasehat terbaik navbar navigasi navigasi menu blog ngeblog nibbler notable office Omnibus online online editor operating sistem opini otodidak pagelist pagerank paginator Pandora panduan panduan mobile paradox parameter parasit parse pembatasan pemilu 2019 Pemilu Indonesia 17 April 2019 pemrograman pemula pendidikan pengalaman pengaturan pengusaha Penulis perang dagang Cina vs Amerika perang dunia ketiga perangdagang perceraian perihal perubahan pexel phablet PHP plagiat plagiator PlagScan play store polemik politik ponsel popularitas popularposts portable powered by blogger Powerpoint prediksi premium privasi produk profesi profile programmer programming programming. prosesor pseudo-sains psikologi Python rahasia ramalan ranking faktor rawgit re-desain re-desain tema blogger React Reactions read more recentPosts redesain related posts remaja resolusi responsinator responsive review robot robot.txt sains samsung sanggahan saran temaplate blogger saran template search secrets security sederhana sejarah seken selegram semrush SEO share button sharing buttons I.O sidebar sidenav siginifikan silikon simple simpson singularity sitelink sitemap smartphone snippet soho solusi somadmorroco spesial spoiler star wars sticky sidebar sticky widget Strategi SEO Student study study online style submenu subscriber success sudut cerita SVG SVG icon syimbian tab s2 tabel tablet tabs2 tagging takdir takhyul talenta tataletak Teen teka teki teknik teknologi TELKOMSEL tema tema kesederhanaan template template premium template premium gratis template SOHO template versi ke-2 terkemuka tes popularitas testimoni testmysite text theme Thucydides tip tips toggle tokoh tombol berbagi tombol pengalihan tombol reply komentar tops traffik trafic trafik translator tribun tricks Trik triks troubleshooting Tutorial Tutorial Anissa tutorialKhusus twitter uang UAS unduh unik update urang utan ustazd Abdul Somad vanilla Script video viomagz viral virus corona vlogging vue w3-css w3school W3Shool wabah warna web web story WebAssembly webdesign WEBP website whatsapp widget wifi ID windows Windows Mobile wisata WIX wordpress X-Frame xiomi xml yandex youtube youtuber z-index
Tampilkan selengkapnya

Populer

Cara memperbaiki add numbering dan add bullets yang tidak bisa tampil pada postingan blog

Downoad Notable simple yang pas buat blog curhat

Feed Burner akan di non aktifkan pada bulan Juli 2021

Follow by Email