Fungsi dan Cara Memasang Breadcrumb di Blogger

Di kesempatan kali ini, saya akan membagikan tutorial cara memasang bredcrumb untuk Blogger. Bagi kamu yang pertama kali terjun kedunia Web Developer, pasti masih asing dengan istilah Breadcrumb ini. Karena itu, saya juga akan menjelaskan tentang apa itu Breadcrumb, fungsi Breadcrumb, pengaruhnya buat SEO dan lain sebagainya.

Daftar isi:

Apa itu Breadcrumb?

Breadcrumb merupakan sebuah elemen penting yang terdapat dalam sebuah situs, yang digunakan untuk menunjukkan lokasi pengguna pada halaman yang sedang meraka kunjungi. Menurut beberapa sumber, istilah ini diambil dari dongeng Hansel dan Gretel yang meninggalkan jejak remah roti sebagai petunjuk untuk jalan pulang mereka.

Berikut ini contoh Breadcrumb dari halaman ini.

Apa Fungsi Breadcrumb?

Tak hanya sebagai alat navigasi kedua, breadcrumb juga berfungsi untuk mengomtimalkan SEO pada situs kita. Dengan adanya Breadcrumb yang terpasang di situs kita, mesin pencari bisa lebih mudah meng-crawl isi dari situs kita. Dengan begitu, halaman yang terdapat pada situs kita bisa cepat ter-index oleh mesin pencari.

Cara Memasang Breadcrumb di Blogger

Pastikan kamu sudah mem-backup template kamu terlebih dahulu, untuk menghindari kesalahan saat pemasangan.

1. Pada Dahsboard Blogger, buka Tema.
2. Klik icon arrow down disebelah tombol SESUAIKAN, lalu klik Edit HTML.
3. Cari kode <b:includable id='postCommentsAndAd' var='post'>.
4. Salin kode dibawah ini, lalu letakkan tepat di bawah kode <article class='hentry'> atau <article class='post-outer-container'>.

xml
<b:if cond='data:view.isPost'>
  <b:loop values='data:posts' var='post'>
    <div class='breadcrumb' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
      <div itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
        <meta content='1' itemprop='position' />
        <a expr:href='data:blog.homepageUrl.canonical' itemprop='item' title='Home'>
          <span itemprop='name'>
            <data:messages.home />
          </span>
        </a>
      </div>
      <b:if cond='data:post.labels'>
        <b:loop index='num' values='data:post.labels' var='label'>
          <div itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
            <meta expr:content='data:num+2' itemprop='position' />
            <a expr:href='data:label.url.canonical' expr:title='data:label.name' itemprop='item'>
              <span itemprop='name'>
                <data:label.name />
              </span>
            </a>
          </div>
        </b:loop>
        <b:else />
        <div data-label='Uncategorized'>Uncategorized</div>
      </b:if>
      <div aria-current='page'>
        <data:post.title />
      </div>
    </div>
  </b:loop>
</b:if>

5. Sehingga menjadi seperti ini:

6. Sampai disini kamu sudah berhasil memasang Breadcrumb di template Blogger kamu.
7. Sekarang tinggal mempercantik tampilannya.
8. Salin kode CSS di bawah ini, dan tempatkan di atas kode </style> atau ]]></b:skin>.

css
.breadcrumb {
  font-size:13px;
  text-transform:capitalize;
  color:#333;
  margin-bottom:12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breadcrumb > *{
  display:inline
}

.breadcrumb > *:not(:last-child):after{
  content:'/';
}

.breadcrumb a {
  color:inherit
}

9. Jika sudah silahan klik Save.

Kesimpulan

Breadcrumb merupakan bagian penting untuk SEO. Dengan adanya breadcrumb, situs kamu akan mudah dipahami mesin pencari seperti Google. Tak hanya itu, situs kamu juga akan lebih mudah ter-index oleh mesin pencari.

Baiklah, mungkin itu saja untuk cara memasang Breadcrumb di Blogger. Jika ada yang belum berhasil, kamu bisa bertanya langsung lewat kolom komentar. Terimakasih

Baca juga:

• Cara membuat Recent Post by Label di Blogger