Cara Memperbaiki Breadcrumb Blog Valid AMP

Semenjak munculnya error Breadcrumb sempat dialami oleh banyak blogger. Masalah Breadcrumb hampir semua blogger mengalami masalah pada Google Searh Console yang terdampak pada masalah URL halaman postingan salah satnya masalah Breadcrumb data-vocabulary.org schema deprecated, dan Error Breadcrum tidak adanya itemListement.

Apa yang dimaksud Breadcrumb?
Breadcrumb merupakan informasi pada halaman atau navigasi sebuah blog ata website yang memiliki fungsi untuk pengguna dalam mengidentifikasi posisi mereka ketika berada dalam sebuah halaman postingan. Breadcrumb sendiri muncul pada hasil pencarian Google yang ditampilkan bersama postingan sebuah blog atau website.

Biasanya Breadcrumb muncul dengan URL domain blog terlihat tahun dan tanggal konten postingan mengenai kapan halaman dipublikasikan dan diikuti dengan susunan link tautan yang merupakan tampilan pada sumber URL postingan blog secara umum yang belum mendapatkan Breadcrumb dari hasil penelusuran Google.

Breadcrumbs sendiri terliha setelah URL Domain blog dengan kategori atau label postingan yang secara umum URL domain blog diikuti oleh URL tautan permanen. Blog yang sudah mengaktifkan Breadcrumb yang valid dari Google maka URL tautan permanen yang diikuti label atau kategori pada postingan URL postingan akan terlihat terstruktur dan rapih.

Hal tersebut merupakan Breadcrumb postingan blog yang muncul pada hasil penelusuran Google. Breadcrumb dalam sebuah postngan akan memberikan kemudahan informasi untuk mengetahui posisi postingan yang sedang mereka akses judul postingan disertai kategori yang ditampilkan.

Pada intinya Breadcrum merupakan navigasi yang berfungsi untuk memberikan informasi postingan berdasarkan kategori atau label yang ditampilkan secara jelas tanpa harus menampilkan keseluruhan informasi label dan URL postingan.


Apa Manfaatnya Breadcrumb untuk blog?
Peran breadcrumb pada blog merupakan hal yang sangat penting untuk meningkatkan kualitas SEO pada blog. Blog akan terlihat perbedaanya antara blog yang sudah mendapatkan breadcrumb dan yang belum mendapatkan breadcrumb pada hasil penelusuran.

Untuk mendapatkan breadcrumb secara cepat dari Google harus mengaktifkan Breadcrumb pada blog dengan memasang kode breadcrumb pada mode HTML terhadap template yang digunakan. Cara Memasang Breadcrum Valid AMP Berikut adalah cara untuk membuat dan memasang kode Breadcrum baik untuk blogger yang menggunakan template non-AMP maupun AMP:

1. Silakan buka pada dasboard Blogger, kemudian pilih Tema, dan pilih menu edit HTML. 
2. Salin dan letakkan kode Breadcrumb di bawah ini berada di atas kode <b:includable id='comment-form var='post'>
 <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 expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
<span itemprop='name'>Home</span></a>
<meta content='1' itemprop='position'/>
</span>
<i class='fa fa-angle-right'/>
<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;'>
<i class='fa fa-angle-right'/>
</b:if>
</b:loop>
<i class='fa fa-angle-right'/>
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable> 
Jika pada sebelumnya anda menemukan kode script breadcrumb yang sama, maka silakan ganti dengan kode breadcrumb sia atas. Biasanya kode breadcrum diawali dengan kode <b:includable id='breadcrumb' var='posts'> dan ditutup dengan kode </b:includable>

3. Langkah selanjutnya adalah menempelkan script CSS Breadcrumb di bawah ini, letakkan di bawah kode amp-custom, Anda bisa mencarinya dengan menekan CTRL+F dan masukan kode di bawah ini.
/* 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}
Jika sebelumnya Anda sudah menerapkan kode breadcrum dengan versi lama, silakan harus kode tersebut, dan hapus kode breadcrumb CSS agar tidak bertabrakan dengan breadcrumb CSS yang baru.

4. Salin kode berikut yang berfungsi menampilkan breadcrumb pada halaman postingan dan letakkan di bawah kode <b:inculdable id='main' var='top'>
 
5. Langkah terakhir adalah klik simpan temaa untuk menerapkan perubahan pada Google Search Console dengan melakukan inspeksi URL.