Cara Mengatasi Error Breadcrump pada Platform Blogger

Lama sekali saya tidak menulis kembali, ya. Adakah yang kangen? Saya kangen belajar kembali, sih. Belajar SEO itu sangat menarik. Saya mendapatkan beberapa ilmu baru, yang sayangnya tidak boleh dibagi. Ridho pemberi ilmu sangat penting untuk keberkahan ilmu tersebut.

Minggu lalu saya ganti template blog utama. Saya sangat suka hasilnya. Blog enteng. Tapi.... setelah saya nanti selama seminggu, jumlah kunjungan masih 25% dari biasa. Saya resah dan ganti template kembali. Ke template lama yang saya pakai sejak tahun 2018. Template ini buatan tahun 2016.

Dan saya mendapatkan masalah yang sama yaitu Breadcrumps yang tidak valid. Saya harus memberanikan diri mengutak-atik html blog.

Utak-atik html blog jadi suatu trauma bagi beberapa emak blogger. Saya bukan salah satunya, tapi beberapa kali blog rusak karena salah hapus. Hahahaha. Dan saya melakukannya lagi dua hari lalu. Parah! Kotak grid menjadi sangat besar sehingga dari dua grid menjadi satu grid dan itupun terpotong di pinggirnya. Terpotong 0,5 cm. Daripada pusing cari mana yang salah, saya ganti template kembali, template yang sama.

Oleh karena lupa save template sebelum mengeksplor html, maka saya reset kembali html menjadi 0 lalu memasukkan template pilihan kembali. Jadi... dalam seminggu itu saya ganti template 2 kali. Saat ini masih banyak widget yang saya sembunyikan. Utamanya menu link pada menu bar atas dan widget media sosial pada footer. Nanti kalau senggang lagi.

Nah kan, saya melantur. Maaf ya. Namanya juga jurnal belajar. Jadi saya tidak selalu memperhatikan teknik penulisan yang SEO friendly. Kadang ya begini nih, ada curhatan di antara rangkuman belajar.

Hari ini saya mencari cara mengatasi error breadcump pada platform blogger. Saya ketemu blognya Mast Dicky tentang cara mengatasi error breadcump. Makasih Mas. Saya save di sini ya, ilmunya. 

Saya berencana ternak blog dan blog jurnal belajar SEO ini memang untuk mengumpulkan ilmu membuat blog yang terserak.

Begini caranya.

1. Buka html di dashbor blog. Sudah tahu caranya kan? Itu lo, 3 titik di kanan atas, setelah buka theme atau tema. 
2. Pilih back up dulu ya. Beri nama jelas pada file. Biasanya saya pakai nama blog plus tanggal back up
3. Pilih edit html. 
4. Cari di mana kode yang akan ditambahkan

Ok, sudah siap ya. Saya anggap sudah paham sampai sini.

a. Tekan  CTRL+F lalu ketik <b:includable id='comment-form' var='post'>

b. Copy kode dibawah ini lalu paste tepat di atasnya

<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>

c. Tambah CSS Style tepat di atas kode </head>

<style type='text/css'>

/* Breadcrumb */

.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:#888;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:#666;font-weight:400}

.breadcrumbs a:hover{color:#11589D}

.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}

.breadcrumbs svg path{fill:#666}

</style>

d. Tekan Ctrl+F lagi, cari kode berikut <b:includable id='main' var='top'>

Letakkan kode berikut tepat ini dibawahnya

<b:include data='posts' name='breadcrumb'/>

e. Simpan perubahan.

f. Validasi perubahan yang kita buat di Google Search Console. Buka saja di sana dan cari Breadcumps, nanti akan paham.

g. Tunggu sampai mendapatkan email pemberitahuan dari Google. Bisa lama, bisa sebentar. Bisa seminggu, bisa sebulan.