Tutorial Cara Membuat Breadcrumb Blog Otomatis Terbaru 2020

Membuat Breadcrumb Blog Otomatis. Beberapa hari ini masalah munculnya pesan error Breadcrumb sempat menghebohkan dunia blogger. Hampir semua pemilik blog mendapatkan masalah error breadcrumb di Google Search Console yang mengidentifikasi beberapa masalah pada URL Konten Postingan yang sudah dipublikasikan diantaranya Error Breadcrumb data-vocabulary.org schema deprecated dan Error Breadcrumb itemListement tidak ada.

Sebenarnya apa itu Breadcrumb?

Seperti yang telah saya bahas pada postingan sebelumnya yang berjudul
Cara Mengatasi Masalah data-vocabulary.org schema deprecated bahwa Breadcrumbs adalah informasi halaman (navigasi) sebuah website atau blog yang berfungsi untuk membantu pengguna dalam memahami posisi mereka pada saat berada dalam sebuah halaman postingan.

Agar anda tidak bingung berikut ini contoh Breadcrumb yang muncul di hasil penelusuran google dan yang ditampilkan di dalam postingan sebuah blog.



Perhatikan screenshot di atas setelah URL Domain blog muncul tahun dan tanggal konten postingan kapan dipublikasikan kemudian ikuti oleh susunan link tautan permanent (link postingan) yang merupakan tampilan sumber URL Postingan Blog pada umumnya yang belum mendapatkan Breadcrumb dari Google pada hasil penelusuran Google.




Screenshot di atas menunjukkan bahwa setelah URL Domain blog muncul Kategori atau Label Postingan, seharusnya dan pada umumnya setelah URL domain blog disusul oleh susunan URL Tautan Permanen.

Karena Blog Berbagi Tutorial Online sudah mengaktifkan dan beberapa Postingan di atas sudah mendapatkan Valid Breadcrumb dari Google maka URL Tautan Permanent di wakili oleh Kategori/Label Postingan sehingga Sumber URL Postingan terlihat lebih rapih dan terstruktur. Itulah yang dinamakan Breadcrumb Postingan Blog yang muncul di hasil penelusuran google.

Referensi untuk Anda: Cara Mengatasi Breadcrumb Kolom "itemListElement" tidak ada

Perhatikan juga screenshot salah satu postingan blog Berbagi Tutorial Online berikut ini:



Tampak di atas postingan muncul informasi jendela postingan yang sedang di akses yang merupakan tampilan Breadcrumb dalam sebuah postingan blog. Jadi pengguna atau pembaca dapat dengan mudah mengetahui posisi postingan yang sedang mereka buka berada di Kategori Android dengan judul postingan yang di tampilkan setelah Label atau Kategori Postingan.

Bagaimana apakah anda sudah bisa memahami apa itu Breadcrumb beserta Fungsinya?

Intinya Breadcrumb adalah navigasi yang berfungsi untuk memberikan informasi suatu postingan berdasarkan label atau kategori secara singkat padat dan jelas tanpa harus menampilkan keseluruhan informasi postingan berdasarkan label dan url postingan itu sendiri.

Blog saya belum memiliki fitur di atas, berarti blog saya belum mendapatkan breadcrumb dari Google, bagaimana cara mendapatkan Breadcrumb?

Apabila ternyata setelah anda mencoba melakukan pencarian daftar postingan blog yang sudah di publikasikan di halaman penelusuran google dan ternyata susunan url postingan masih ditampilkan dan pada dasboard Google Search Console (Google Webmaster Tools) belum muncul menu breadcrumb itu berarti Blog Anda belum mendapatkan Breadcrumb dari Googl. Untuk cara mendapatkan breadcrumb akan saya jelaskan pada postingan ini.

Apakah Breadcrumb itu Penting dan Apa Manfaatnya?

Jika anda bertanya breadcrumb itu penting atau tidak? dan apakah ada manfaatnya? jawabannya adalah keberadaan Breadcrumb pada sebuah blog itu sangat penting untuk meningkatkan kualitas SEO sebuah blog. Tentunya anda bisa melihat perbedaan antara blog yang sudah mendapatkan breadcrumb dan yang belum mendapatkan breadcrumb di hasil penelusuran google seperti yang saya contohnya di atas, anda bisa membuat keputusan dan kesimpulan mana yang lebih baik Blog dengan Breadcrumb atau tanpa Breadcrumb.

Bagaimana cara membuat dan memasangnya fitur Breadcrumb blog agar lebih SEO?

Bagi Anda yang ingin mendapatkan breadcrumb secara cepat dari google anda harus mengaktifkan fitur breadcrumb pada blog anda dengan cara memasang kode breadcrumb pada area kode HTML penyusun template blog yang anda gunakan.

Tutorial Cara Membuat dan Memasang Breadcrumb Blog Otomatis Terbaru 2020

Berikut ini pandungan langkah cara membuat dan memasang Script Breadcrumb Blog baik pengguna Template AMP dan Non-AMP:

1. Buka dasboard Blogger, pilih menu Tema kemudian pilih menu EDIT HTML

2. Salin dan tempelkan Script Breadcrumb berikut ini 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>





Apabila anda menemukan kode yang sama atau mirip dengan script breadcrumb di atas silahkan dihapus dan diganti dengan script di atas.

Contohnya disini template yang saya gunakan sebelumnya sudah saya pasang breadcrumb versi lama dan harus diganti dengan yang baru dengan cara replace kode tersebut dengan script breadcrumb baru. Kode Breadcrumb diawali dengan kode<b:includable id='breadcrumb' var='posts'> dan ditutup dengan kode</b:includable>.


3. Salin dan tempelkan Script CSS Breadcrumb berikut ini di bawah kode amp-custom

 

/* 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}





Seperti yang saya sebutkan di atas apabila template blog sebelumnya sudah pernah dipasang breadcrumb hapus kode breadcrumb versi lama. Seperti berikut ini contohnya ada beberapa kode CSS Breadcrumb yang perlu dihapus.


Hapus semua kode CSS Breadcrumb lama agar nantinya tidak terjadi error karena tabrakan antar kode lama dengan kode baru. Agar mudah dalam mencarinya gunakan kata kunci .breadcrumbs dalam pencarian.



4. Salin kode berikut ini yang berfungsi untuk menampilkan Breadcrumb pada halaman konten postingan, tempelkan di bawah kode<b:includable id='main' var='top'>

 

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





Apabila ada kode yang mirip, hapus kode tersebut dan ganti dengan kode di atas.

5. Klick Simpan Tema untuk menerapkan perubahan dan lakukan submite ulang blog anda di Google Search Console dengan cara salin url blog anda, tempelkan di kolom Inspensi URL dan tekan Enter kemudian klick Minta Pengindeksan.

6. Lihat Hasilnya dengan cara membuka salah satu halaman konten postingan blog Anda. Jika prosedurnya benar maka tampilannya kurang lebih seperti pada screesnshot di bawah ini:



Anda juga bisa menambah dan memasak Banner Iklan AdSense seperti yang saya lakukan dan tampa pada screesnhot di atas di atas breadcrumb muncul Iklan AdSense. Caranya tempelkan kode Iklan di di atas<b:includable id='main' var='top'> atau bawah kode <b:include data='posts' name='breadcrumb'/>

Demikianlah Tutorial Cara Mudah Membuat dan Memasang Breadcrumb Blog Otomatis terbaru di tahun 2020 ini. Semoga tutorial di atas mudah dipahami dan apabila kurang jelas dan ada yang ingin anda tanyakan silahkan tinggalkan pesan di kolom komentar atau dapat langsung menghubungi saya melalui menu Contact Us. Jangan lupa untuk Like FansPage, Subscribe, dan Share Tutorial ini kepada teman-teman anda yang membutuhkan.

Ingin berlangganan Notifikasi Update Postingan Terbaru? Silahkan Gabung Berbagi Tutorial Online WhatsApp Grup atau Follow Berbagi Tutorial On Google News. Yuk...Subscribe Channel Youtube Berbagi Tutorial Online bagi Kalian yang suka dengan Tutorial dalam bentuk Rekaman Video.