Cara Memasang Breadcrumb di Blogger

Arsipbiru.com - Selamat datang kembali di Arsipbiru. Pada pertemuan kali ini, saya akan membagikan tutorial terkait bagaimana memasang breadcrumb di Blogger. Tentu saja breadcrumb yang akan saya bagikan ini sudah SEO Friendly. Namun, sebelum itu, tahukah Anda apa itu breadcrumb? Ya, secara bahasa breadcrumb memang disebut sebagai 'remah roti'. Namun, secara istilah, breadcrumb merupakan salah satu elemen penting yang seharusnya dipasang pada setiap blog atau website, tidak terkecuali untuk platform Blogger. Untuk lebih jelasnya, simak penjelasan berikut ini.

Apa itu Breadcrumb?

Breadcrumb adalah salah satu elemen penting yang berfungsi sebagai penunjuk arah yang membuat pengunjung mengetahui dimana posisi mereka berada saat ini ketika membuka blog, website, atau dokumen.

Breadcrumb sendiri berupa link yang terstruktur secara hierarki mulai dari halaman utama, kategori, sampai halaman yang sedang dibuka. Berikut contoh penerapan breadcrumb yang umum.

Home > Blogger > Tutorial > Artikel saat ini

Masing-masing dari teks tersebut di atas berupa link aktif, kecuali yang terakhir, yang mana berfungsi sebagai jejak bagi pengunjung dan ketika diklik akan membawa ke halaman sebelumnya dengan cepat.

Pentingnya Breadcrumb

Breadcrumb memang sangat penting dalam dunia Blogger karena berhubungan dengan SEO dan struktur data. Breadcrumb membuat blog memiliki navigasi yang jelas dan lebih mudah dibaca di halaman pencarian (SERP) Google. Pengunjung bisa lebih mudah melihat label atau kategori yang menjadi induk dari artikel tersebut.

Cara Memasang Breadcrumb di Blogger

Sebenarnya untuk memasang breadcrumb di blogger bisa menggunakan dua metode yang berbeda, yaitu Microdata HTML dan JSON-LD. Kedua metode tersebut memiliki kelebihan dan kekurangannya masing-masing.

Microdata HTML

Ini merupakan metode terpopuler yang umum digunakan oleh pemilik blog. Biasanya ditempatkan di atas judul postingan. Berikut langkah-langkah dalam memasang breadcrumb di blogger dengan metode ini.

1. Tambahkan dulu kode CSS berikut ini di atas </style> atau ]]></b:skin>.

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

2. Kemudian cari kode <h1 class='entry-title'>. Jika tidak ada, cari kode <h2 class='entry-title'>. Masih belum ada juga. Coba cari elemen HTML yang memiliki id atau class entry-title.

3. Tambahkan kode berikut ini tepat di atas kode yang disebutkan tadi.

<!-- Breadcrumb Blogger by igniel.com -->
<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'>
        <meta content='1' itemprop='position'/>
        <a expr:href='data:blog.homepageUrl.canonical' title='Home' itemprop='item'>
          <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 Tema dan lihat hasilnya.

Kelebihan Breadcrumb Metode Metadata HTML

Berikut kelebihan memasang breadcrumb dengan metode Metadata HTML.

1. Berfungsi sebagai variasi tambahan yang dapat mempercantik halaman.
2. Pengunjung bisa langsung kembali dengan cepat ke halaman sebelumnya hanya dengan mengklik link yang ada.

Kekurangan Breadcrumb Metode Metadata HTML

Berikut kekurangan memasang breadcrumb dengan metode Metadata HTML.

1. Bagi yang menyukai desain sederhana dan minimalis, keberadaan link tambahan di atas judul ini kadang bisa mengganggu.
2. Tahapan yang lebih panjang ketika memasang script.

JSON-LD

Metode ini jarang dilakukan oleh pemilik blog. Bisa jadi karena metode ini kurang populer di kalangan blogger. Beda halnya dengan metode sebelumnya, metode JSON-LD ini tidak akan tampil secara kasat mata sebab script-nya hanya bekerja di belakang layar tanpa menampilkan visual apapun. Berikut langkah-langkah memasang breadcrumb dengan metode ini yang valid HTML 5.

1. Masuk ke Blogger > pilih Tema > Edit HTML.

2. Cari kode <data:post.body/> dan tambahkan kode berikut ini tepat di bawah kode tadi.

<!-- Breadcrumb Blogger by igniel.com -->
<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>

Kelebihan Breadcrumb Metode JSON-LD

Berikut kelebihan memasang breadcrumb dengan metode JSON-LD.

1. Lebih efisien karena tidak perlu menampilkan HTML apapun ke dalam halaman blog.
2. Script yang lebih pendek dan mudah dipasang.

Kekurangan Breadcrumb Metode JSON-LD

Berikut kekurangan memasang breadcrumb dengan metode JSON-LD.

1. Tidak terdapat link aktif yang bisa digunakan pengunjung untuk kembali ke halaman sebelumnya dengan cepat.

Validasi

Setelah selesai dipasang, cek kembali agar Anda semakin yakin bahwa breadcrumb ini sudah benar dan valid. Kembali gunakan Google Structured Data seperti yang telah disebutkan tadi.

Setelah itu, tunggu beberapa hari dan cek di Google Search Console. Jika breadcrumb valid, maka laporannya akan muncul di sana, tepatnya di bawah menu Enhancements. Pastikan tidak terdapat error, ya.

Demikian tutorial bagaimana cara memasang breadcrumb di blogger. Semoga bermanfaat.

Sumber:

Igniel

Google Developers

Schema.org