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

Tidak ada komentar:

Posting Komentar

 
Back To Top