Cara memasang breadcrumb pada varian template default terbaru blogger
- 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.
- 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.
- 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..
APA HUBUNGAN JENIS TEMPLATE TERSEBUT DENGAN PEMASANGAN BREADCRUMB?
- Data.vocalubary
- Schema.org
MENGAPA ITU PENTING?
- Agar data halaman blog terstruktur dan baik di mata mesin pencari
- Meningkatkan kotak penelusuran sitelink
- Halaman tampak lebih rapi dan profesional.
- Mengurangi Bounce Rate alias efek pentalan
- Sebagai navigasi kedua bagi halaman blog
- Jelas sekali secara keseluruhan sangat baik untuk mengoptimalkan SEO
CARA MEMASANGNYA PADA TEMPLATE VARIAN TERBARU TEMPLATE BLOGSPOT
1. Langkah Pertama
- Masuk ke pengaturan dasbor blogger baru (saya menggunakan template contempo)
- Pilih tema
- Pilih Edit HMTL
<b:includable id='main'>↔️</b:includable>
letakanya di bawah kode: <b:defaultmarkup type='Blog'>
<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 => w.sectionId != "ads")' var='numMobileAds'>
<b:comment>Filter out the featured post, but only on the homepage.</b:comment>
<b:with value='data:widgets.FeaturedPost filter (w => w.sectionId == "page_body") map (w => w.postId)' var='featuredPostIds'>
<b:with value='data:view.isHomepage ? data:posts filter (post => 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 == "item"'> <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 + "?&max-results=16"' 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 != "true"'> <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.
<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'/>
Tks ya mbk :
BalasHapus1. 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..
Sama sama, kotak penelusuran sitelink itu penting buat SEO, ujung ujungnya menguntungkan buat bisnis :)
HapusMbak mau tanya lagi, untuk menampilkan kotak running text (diatas menu navigasi yang berwarna hijau), saya harus baca artikel yang mana di halaman ini ?
Hapusitu namanya kode marquee.
Hapus1. 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
Tks ya mbak infonya..
HapusMbak, mau Tanya :
BalasHapus1. 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
jawaban 1: sebenarnya tidak perlu karena sejak pertama kit daftar blog sudah aktif dengan sendirinya secara default, dan itu lebih aman dari kesalahan.
BalasHapusjawaban 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
Oke..saya akan coba update isi perintah robot.txt tsb pada blog.
HapusTks atas pencerahannya ya
Kebetulan nih saya juga mau pasang breadcrumb tapi masih mikir2 soalnya ada beberapa hal yg membuat saya bertanya2.
BalasHapus1. 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 🙏🙏
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.
HapusDan, 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.
Kalau begitu berarti tetap diterima walau salah sedikit.
HapusBahkan 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 👍
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
BalasHapusTentu saja bisa, kecuali template soho caranya sedikit beda sesuai petunjuk
Hapus