Cara Memasang Breadcrumb di Blogger

Apa yang dimaksud Breadcrumb?

Breadcrumb adalah elemen kontrol grafis yang sering digunakan sebagai bantuan navigasi dalam antarmuka pengguna dan pada halaman web.

Hal ini memungkin bagi pengunjung untuk mengetahui atau melacak lokasi mereka dalam sebuah program ataupun pada sebuah website. Contoh penerapan Breadcrumb seperti contoh dibawah ini:

Home › Blogger › Artikel Saat Ini

Masing-masing dari text diatas merupakan link aktif (kecuali text terakhir yang merupakan posisi atau lokasi saat ini berada) yang mana link tersebut akan membawa kita dengan lebih cepat menuju halaman sebelumnya.

---

Manfaat Breadcrumb

Setelah kamu sudah mengenal apa itu breadcrumb, maka saat nya kita mengetahui manfaat apa saja ketika kita memasang Breadcrumb pada blog kita.

• Memberikan navigasi yang lebih baik bagi pengguna. Breadcrumb menyediakan rute jelas bagi pengguna untuk menemukan halaman yang mereka cari dan kembali ke halaman sebelumnya.
• Meningkatkan estetika situs. Breadcrumb yang terstruktur dan teratur dapat meningkatkan estetika situs dan memberikan kesan profesional.
• Membantu mesin pencari untuk mengindeks situs dengan lebih baik.
• Membuat situs lebih mudah digunakan karena memungkinkan pengguna untuk dengan mudah menemukan halaman yang mereka inginkan dan mengetahui di mana mereka berada di dalam situs.

---

Cara cek Breadcrumb pada template

Setelah kamu sudah mengenal apa itu breadcrumb, maka saat nya kamu perlu memasang pada template website. Kebanyakan template yang ada saat ini sudah terdapat breadcrum di dalamnya, namun tidak ada salahnya kita berjaga-jaga untuk meyakinkan benarkah sudah terpasang breadcrumb pada template kita.

Untuk mengeceknya cukup menggunakan Google Structured Data Testing Tool yang bisa diakses melalui link dibawah ini:

https://search.google.com/structured-data/testing-tool

1. Masukkan alamat post atau artikel yang ingin kamu cek (bukan link homepage) pada kolom yang disediakan.
2. Struktur Breadrumb ditandai dengan kata BreadcrumbList. Jika itu terpasang dengan benar maka akan ditampilkan dengan 0 ERRORS, 0 WARNING.
3. Jika BreadcrumbList kamu klik maka akan menampilkan rincian lebih lanjut mengenai itemListElement yang mana jumlahnya harus sama dengan jumlah label yang tersemat plus dengan url Homepage. Contoh pada artikel saya ini terdapat label Blogger, Maka jumlah itemnya haruslah 2.

Jumlah BreadcrumbList = jumlah label + 1

Link gambar

Link Gambar

---

2 Cara Memasang Breadcrumb

Breadcrumb dapat dipasang dengan 2 Metode berbeda. Berikut adalah penjelasannya.

1. Microdata HTML

Cara ini merupakan yang paling populer digunakan oleh pemilik blog. Breadcrumb biasa ditempatkan diatas judul dari artikel atau postingan. 

1. Tambahkan code CSS berikut diatas code <style> atau ]]></b:skin>

   .breadcrumb {
   margin-bottom: 20px;
   }
   .breadcrumb, .breadcrumb a, .breadcrumb a:hover {
   font-size: 12px; /* ukuran text */
   color: #777; /* warna text */
   }

2. Cari code berikut ini:

<h1 class='entry-title'>

atau code ini:

<h2 class='entry-title'>

3. Tambahkan code berikut tepat diatas code yang disebutkan tadi:

<b:if cond='data:view.isPost'>
  <b:loop values='data:posts' var='post'>
    <div class='breadcrumb' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
      <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
        <a expr:href='data:blog.homepageUrl.canonical' title='Home' itemprop='item'>
        <meta content='1' itemprop='position'/>
        <span itemprop='name'>Home</span></a>
      </span>
      <b:if cond='data:post.labels'>
        <b:loop index='num' values='data:post.labels' var='label'> &amp;nbsp;&#8250;&amp;nbsp;
          <span 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>
          </span>
        </b:loop>
        <b:else/>
        &amp;nbsp;&#8250;&amp;nbsp; Tidak Ada Kategori
      </b:if>
    </div>
  </b:loop>
</b:if>

4. Simpan semua lalu kamu lihat hasilnya
   

Pro

• Memberikan navigasi yang lebih baik bagi pengguna, sehingga mereka dapat dengan mudah kembali ke halaman sebelumnya atau melihat struktur situs secara keseluruhan.
• Membuat situs lebih mudah diindeks oleh mesin pencari, sehingga dapat meningkatkan SEO.

Kontra

• Memerlukan penambahan kode dan pengaturan tambahan pada halaman web, yang dapat menyebabkan kesulitan saat pengembangan atau pemeliharaan.
• Dapat mengambil ruang visual yang cukup besar pada halaman web, yang dapat mengurangi estetika situs.

2. JSON-LD

Metode kedua, yaitu menggunakan JSON-LD, jarang digunakan oleh pemilik blog karena kurang populer dibandingkan dengan metode pertama. Namun, perbedaannya terletak pada bagaimana script JSON-LD hanya bekerja di belakang layar tanpa menampilkan visual apapun, berbeda dengan metode pertama yang tampil di halaman web. Berikut cara pemasangannya :

1. Cari code berikut:

<data:post.body/>

2. Tambahkan script berikut di Bawah code yang disebutkan tadi:

<script type='application/ld+json'>{
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": 1,
          "name": "Home",
          "item": "<data:blog.homepageUrl.canonical/>"
        <b:if cond='!data:post.labels'>}<b:else/>},<b:loop index='i' values='data:post.labels' var='label'>
        {
          "@type": "ListItem",
          "position": <b:with value='data:i + 2' var='num'><b:eval expr='data:num'/></b:with>,
          "name": "<data:label.name/>",
          "item": "<data:label.url.canonical/>"
          <b:if cond='data:post.labels.size != data:i + 1'>},<b:else/>}</b:if></b:loop></b:if>
      ]
    }</script>

Pro

• Memberikan informasi tentang struktur situs yang lebih detail dan tepat kepada mesin pencari, sehingga dapat meningkatkan SEO.
• Dapat diterapkan secara programatis, sehingga dapat mempermudah pengembangan dan pemeliharaan situs.

Kontra

• Pengguna tidak dapat melihat informasi tentang navigasi yang disediakan secara visual, sehingga dapat menyulitkan navigasi.
• Memerlukan pemahaman yang lebih baik tentang teknologi JSON-LD dan markup struktural, yang dapat menyebabkan kesulitan saat pengembangan atau pemeliharaan.

---

Validasi

Setelah pemasangan selesai, pastikan bahwa breadcrumb sudah benar dan valid dengan mengecek kembali menggunakan Google Structured Data.

Selanjutnya, pastikan untuk selalu memantau laporan di Google Search Console dan melakukan perbaikan jika ada error. Breadcrumb yang benar dan valid dapat membantu dalam meningkatkan SEO dan navigasi situs Anda. Selain itu, selalu pastikan untuk memperbarui breadcrumb jika ada perubahan struktur atau konten pada situs Anda.

---

Baca juga :

Go to Link