Tutorial Cara Membuat Navigasi Breadcrumbs SEO Blogger

Navigasi Breadcrumbs SEO Blogger. Salah satu dari sekian banyak jenis laporan kesalahan penulusuran halaman website oleh Google Searc Consule yang baru pertama menimpa blog milik Admin Berbagi Tutorial Online adalah masalah markup Breadcrumbs. Admin sendiri ketika menerima laporan error ini merasa penasaran apa itu breadcrumbs sementara selama ngeblog dari tahun 2014 baru tadi malam menemui masalah error seperti ini. Berikut ini screenshot laporan masalah markup breadcrumbs via email oleh Google Search Console:

Setelah Admin check pada Dashboard Account Google Search Console, ternyata muncul menu baru breadcrumbs tepatnya dibawah laporan menu AMP atau di atas menu kotak penelusuran sitelink.

Sebelum melakukan pengecekan error atau masalah sebenarnya yang menyebabkan masalah markup breadcrumbs, terlebih dahulu admin mencari tahu pengertian breadcrumbs dan apa fungsi dari navigasi breadcrumbs melalui searching google. Hasilnya admin menemukan beberapa penjelasan mengenai pengertian breadcrumbs, manfaat atau fungsi breadcrumbs dan cara membuat breadcrumbs pada blogger.

Breadcrumbs adalah navigasi pada blog yang membantu pengunjung untuk memahami lokasi mereka saat berada dalam sebuah website. Dengan kata lain, breadcrumbs ini menyempurnakan navigasi seperti homepage, kategori, tag, dan arsip website. Memang menurut pemilik website dewailmu breadcrumbs ini tidak terlalu penting karena sudah ada kategori, tag, dan arsip yang membantu pengunjung. Namun namanya manusia pasti selalu ada yang pemahamannya kurang bagus jadi perlu bantuan ekstra. Breadcrumbs berfungsi sebagai navigasi website yang memudahkan mesin pencari melakukan crawl sehingga dapat menemukan website kita dengan mudah. Dilihat dari SEO, cara ini cuku bagus mendongkrak sedikit skor seo anda. Sumber: Dewailmu.id

Breadcrumb merupakan sistem navigasi menu yang dapat mempermudah pengunjung website atau blog agar mudah dalam melacak kembali lokasi dimana dan dari mana saja pengunjung melakukan perjalanan di website atau blog kalian. Banyak sekali para blogger yang mengatakan bahwa breadcrumb adalah satu satu teknik SEO yang dapat dilakukan pada suatu blog. Namum ada juga yang berpendapat bahwa breadcrumb hanyalah sebuah sistem navigasi biasa yang posisinya berada di bawah header atau diatas judul postingan. Fungsi utama dari breadcrumb ini sebenarnya adalah sebuah fitur pada sebauh website atau blog untuk menunjukkan lokasi dari halaman web yang sedang kita kunjungi. Breadcrumb menyediakan link penghubung yang menghubungkan halaman yang sedang dibuka dengan halaman yang dibuka sebelumnya oleh pengguna. Dengan kata lain, breadcrumb akan memberikan jejak bagi pengunjng website atau blog untuk dapat mengetahui atau mengikuti setiap halaman yang telah dibuka. Pada umumnya, breadcrumb diberi tanda lebih besar dari (>), tanda ini berfungsi sebagai pemisah hirarki. Jadi dengan memasang breadcrumb pada website atau blog, kita dapat membantu pengunjung website atau blog agar dapat lebih memahami topik yang terkait dari artikel dan dapat memberitahukan kepada pengguna lokasi dari kategori mana yang sedang mereka baca. Breadcrumb juga berfungsi untuk menyediakan fitur on-click access ke level halaman website diatasnya, sekaligus menghindari user tersesat karena terlalu dalam menjelajahi website. Dengan menggunakan breadcrumb, kita dapat memudahkan pengunjung dalam menjelajahi website kita. karena struktur website yang kita punya memiliki tingkatan yang baik. Google pun sudah dapat membaca dan memahami data dari breadcrumb ini. Sumber: tipsdantrikwebsite

Sekarang kita sudah mengetahui apa itu breadcrumbs dan fungsi dari Breadcrumbs, pertanyaannya menu tersebut apakah muncul dengan sendirinya atau harus dibuat secara manual oleh pemilik webiste?

Setelah membaca beberapa penjelasan dari hasil searching google khususnya penjelasan dari dewailmu.id bahwasannya navigasi Breadcrumbs bukan fitur otomatis dari blogger ataupun google search consule. Breadcrumbs dibuat secara manual dan ditanam pada kode penyusun template. Untuk template-template versi free mungkin menu navigasi breadcrumbs belum ditanamkan, dan untuk template jenis premium seperti yang admin gunakan untuk blog berbagi tutorial online ternyata sudah ditanam fitur breadcrumbs.

Bagi sobat blogger yang ingin menerapkan fitur navigasi breadcrumbs yang sangat bermanfaat untuk meningkatkan SEO Blog silahkan ikuti tutorial berikut ini:

Buka Dashboard blogger pilih menu tema kemudian pilih Edit HTML. Salin kode berikut ini dan tempelkan tepat di atas kode ]]></b:skin> atau </style>

 
.breadcrumbs{padding:20px 30px;background:#fff;margin-bottom:20px}
.breadcrumbs a,.post-info a {color:#19abea;}
.breadcrumbs a:hover,.post-info a:hover {color:#464646;}

Kemudian cari kode berikut ini:

 
  <b:includable id='main' var='top'>...</b:includable>

Tempelkan kode berikut ini di bawahnya:


 
  <b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Breadcrumb Untuk Halaman Pos -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
Anda di sini : <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
/ <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?max-results=5&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
/ <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span>Without Label</span> / <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- Breadcrumb Untuk Label Search dan Search Pages -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>Archived For <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>All Post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable

Langkah terakhir Klick Simpan Tema untuk menerapkan.

Berdasarkan hasil penelusuran pada beberapa postingan Admin terutama yang mengalami masalah markup breadcrumbs tidak semua postingan yang telah dipublikasikan akan mendapatkan efek dan manfaat dari penerapan penggunaan fitur breadcrumbs. Fitur ini ternyata akan berfungsi dan hanya berfungsi bagi konten postingan blog yang sudah masuk Page One hasil penelusuran pengguna. Jadi untuk konten postingan yang belum masuk kategiri page one pada hasil penelusuran pengguna dengan kata lain visitornya masih sedikit tidak mendapatkan efek manfaat dari breadcrumbs ini.

Berikut ini Admin ambil screenshot contoh dari konten postingan blog berbagi tutorial online yang masuk kategori page one hasil pencarian pengguna menggunakan searching google.

Kesimpulan:

Fitur Navigasi Breadcrumbs ini tergolong sangat sedikit blogger yang mengetahuinya terutama bagi blogger pemula meskipun sebagian ada yang berpendapat tidak begitu penting namun tetap saja perlu diterapkan karena efeknya dapat meningkatkan kwalitas SEO sebuah website.