Mengganti Breadcrumbs Sesuai Saran Google

Mengganti Breadcrumbs Sesuai Saran Google

Awal bulan, sekitar Januari dan Februari, biasanya Google melakukan pembaharuan algoritmanya. Kemarin ada teman saya yang panik, pengunjung blognya yang biasanya hanya berkisar 200 dengan tiba-tiba melenjit hingga 10ribu-an. Dia kaget.  Bertanya kepada temannya, katanya itu adalah pengunjung spaming, bukan pengunjung organik yang sangat berbahaya dengan kelangsungan blognya. Bisa kena banded Google.  Saya pun hanya tersenyum, antara mengiyakan dan tidak. Kalau saya mah tidak kaget, karena saya sudah main blog hampir  sepuluh tahunan.

Dunia blog itu memang tidak hanya menyakut menulis saja. Disana ada disiplin ilmu lainnya yang paling tidak kita dituntut sedikit tahu. Dan memang harus tahu. Karena ilmu dunia internet itu selalu berubah dan berkembang. Kalau hanya sekedar menulis, susah sekali artikel kita bisa menempati hati google. Bisa jadi hanya nyangkut, dan tidak mau terindex itu artikelnya.

Sudah beberapa kali saya ditawari untuk mengajar ilmu tentang blog disebuah sekolah swasta. Atau bahkan ada yang menawari untuk membuka kursus blog secar online. Pastinya dengan iming-iming ada imbalannya. Tawaran itu saya tolak. Ya, karena itu dunia blogging tidak hanya sekedar menulis. Dan saya hafal betul dengan karakter blogger pemula. Pasti mereka ujug-ujug ingin belajar otak-atik kode html tema. Menulis saja belum begitu bersemangat, langsung ingin belajar kode yang begitu jelimet. Ah, pastinya saya akan dibuat pening dengan pertanyaan-pertanyaannya. Lebih baik saya nyerah duluan.

Nah lo, kok meleset jauh dengan judul artikel. Siap kita kembali ke inti persoalan. Mengganti breadcrumbs sesuai dengan saran atau anjuran google. Sebenarnya kita hanya tinggal mengganti kode yang sudah ada dengan kode baru.
  • Pertama kita ganti kode CSS-nya, silakan habus kode CSS breadcrumbs lama dan ganti dengan kode dibawah ini:
/* Breadcrumbs DjB */
.breadcrumbs{background:#fff;line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:10px 0;border-top:1px solid #dedede;border-bottom:1px solid #dedede;font-size:80%;color:#222;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:#1e0fbe}
.breadcrumbs a:hover{color:#80bd01}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#222}
.homebread{margin:0 2px 0 0}
Kode warna breadcrumbs a maupun a:hover silakan ganti sesuai dengan yang dikehendaki. Atau jika tidak menghendaki border-top maupun border-bottom, silakan dihapus.

Mengganti Breadcrumbs Sesuai Saran Google
  • Langkah selanjutnya, perlu ketelitian ekstra adalah mengganti kode <b:includable id='breadcrumb' var='posts'>...</b:includable> dengan kode dibawah ini:
<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'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a class='homebread' expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
<span itemprop='name'>Home</span></a>
<meta content='1' itemprop='position'/>
</span>
<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: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>
Kata yang berwarna merah, bisa diganti dengan kata Beranda atau yang lainnya. Atau mungkin kode warna  #000000 mau diganti juga boleh.
Oh iya untuk mencari kode <b:includable id='breadcrumb' var='posts'>...</b:includable> letaknya diatas kode <b:includable id='comment-form' var='post'>...</b:includable>. Jika kode tersebut belum ada ya tinggal tambahkan saja.
  • Tahapan selanjutnya adalah klik Simpan Tema. Tapi sebelum mengklik Simpan Tema adalah perhatikan kode <b:include data='posts' name='breadcrumb'/> yang letaknya dibawah kode <b:includable id='main' var='top'> tetap masih ada.
Bagaimana mudah bukan? Dan tahu kan cara cepat mencari kode yang diincar? Ya, betul sekali tekan tombol Control + F dan tulis kode yang dicari. Wah, sudah pintar juga ternyata. Top betul, berarti bukan blogger pemula itu namanya.

Sebenarnya ini adalah pergantian breadcrumbs versi http://data-vocabulary.org ke versi https://schema.org/. Karena google menyarankan untuk menggunakan versi schema.org, mau tidak mau ya kita harus melaksanakan perintah tersebut. Yang jelas, versi yang disarankan google lebih unggul. Lihat dan perhatikan saja perubahannya. Cukup sekian, semoga artikel ini bisa bermanfaat.

Related Posts

19 komentar:

  1. 10 tahun. Brarti dari tahun 2010 ya mas. Saat itu saya masih mandi2 di sungai mas. Sama bocah2 lainya. Pulang2 direperin ortu..

    BalasHapus
  2. 10 tahun sudah blogger kawakan ini suhu! Saya lupa, udah saya benerin belum ya breadcumb ini?? Ada efeknya kalo kita abaikan masalah ini? Problem solving nya memang cuma satu cara di atas...

    Ngopi dulu lah, biar gak oleng...

    BalasHapus
  3. Thanks for your informative article 😊

    BalasHapus
  4. Suhu nih sudah 10 tahun ya.
    Saya perbaiknnya minta sama yg buat tmplate ny biar g pusing.
    Minta update saja :)

    BalasHapus
  5. Coba ah.
    Kalau nanti malah jadi tambah kacau, ajarin lagi ya cara betulinnya.

    BalasHapus
  6. waaaaaaaaaaaa jadi bingung saya Dulu waktu saya make JOOMLA ada breadcrumbs dalam template yang saya pake saat itu

    BalasHapus
  7. Wah, sudah kawakan nih jadi blogger, sudah 10 tahun kang. Pantas jadi guru blogger.

    Beberapa waktu lalu aku juga terima email dari search console, ada eror di breadcrum, ternyata begitu ya cara atasinya. Makasih banyak kang, pantesan blog saya pengunjung nya turun.😂

    BalasHapus
    Balasan
    1. Pengunjungnya turun dari fortuner apa terra Mas Agus? :D

      Hapus
    2. Dari rumah rongdo 😳😳🤣🏃‍♂️🏃‍♂️

      Hapus
  8. Saya mau pasang breadcrumb tapi takut dobel, soalnya saya pake template contempo, template contempo ini rada beda, tidak semua kodenya kliatan alias sebagian tersembunyi alias otomatis, tapi dipasang aja kali ya biar pasti, klo dobel siapa tau makin bagus hihi

    BalasHapus
    Balasan
    1. Yang lama dihapus. Baru ganti yang baru.

      Hapus
  9. Wahhh kalo udah gini gak takut error error lagi ya, karena sudah dibenerin lewat cara ini.. Terima kasih mas

    BalasHapus
  10. mantap om, saya sudah bahas ini juga nih di blog. kalau mau saling tanam link om hihi

    BalasHapus
  11. gw termasuk orang yang ngeblog ngertinya cuma bikin tulisan habis itu di posting, dan nulisnya juga gak bagus2 amat, gw gak ngerti seo dan segala macemnya, karna menurut gw itu ribet banget.. sampe sekarang gw masih berusaha supaya blog gw tetap hidup meski cuma sebulan satu posting :D

    BalasHapus
  12. Seperti usia ngeblog kita seumuran deh Mas, 10 tahunan juga.
    Cuma ilmu saya tidak berkembang ke arah hal teknis seperti yang Mas jelaskan dalam posting ini. Saya nguprek saja di WP gratisan...hehehe

    Salam dari saya di Sukabumi,

    BalasHapus
  13. Blog saya malah belum saya ganti nih, masih mau plan ganti template, tp belum nemu yang cocok

    BalasHapus
  14. Habis baca, saya tetep gak mudeng mas, hahahaha

    BalasHapus
  15. Saya masih belum ganti tema bawaan dari blogger, apakah harus utak-atik kode itu juga? Lieur kalau urusan koding tahunya puding, hi hi.
    Tolong bikin artikel tambahan tentang arti breadcrumbs. Setidaknya saya bisa tahu itu bukan jenis royi.
    Efek masih lesu sehabis banyak begadang demi menmulis artikel lomba blog beberapa hari kemarin ditambah blogging sampai lewat tengah malam.

    BalasHapus
  16. aku kalo ngerubah ngerubah kode gini jadi takut sendiri, takut salah naruh trus bikin tatanan blog kacau, pengennya diserahin ke yang ahli atau ga didampingi biar ga salah paham

    BalasHapus

 
Back To Top