-->

2 Cara Memasang Breadcrumb di Blogger

Cara Pasang Breadcrumb pada Blogger Valid Struktur Data Google

Breadcrumb adalah salah satu elemen penting yang harusnya dipasang pada setiap blog atau website, tidak terkecuali untuk platform Blogger (Blogspot). Sebelum membahas cara pemasangannya, kita kenalan dulu deh sama si "jejak roti" ini.

1. Apa Itu Breadcrumb?

Pernah dengar cerita dongeng anak yang tokoh utamanya diculik lalu dia menaburkan remahan roti agar jejaknya bisa ditemukan oleh orang lain? YAK! Itu dia! Seperti arti harfiahnya (jejak roti), breadcrumb berfungsi sebagai petunjuk arah yang membuat pengunjung mengetahui dimana posisi mereka berada saat ini ketika membuka blog, website, atau dokumen.

Isinya berupa link yang terstruktur secara hierarki mulai dari halaman utama, kategori, sampai halaman yang sedang dibuka. Contoh penerapan breadcrumb yang umum adalah seperti ini:

Home › Blogger › Tutorial › Artikel Saat Ini

Masing-masing dari text tersebut berupa link aktif (kecuali yang terakhir) yang berfungsi sebagai jejak bagi pengunjung, yang ketika di-klik akan membawa ke halaman sebelumnya dengan cepat.

2. Pentingkah Breadcrumb?

Ya tentu saja ini penting karena berhubungan dengan SEO dan struktur data. Dia membuat blog memiliki navigasi yang jelas dan lebih mudah dibaca di halaman pencarian (SERP) Google. Pengunjung bisa dengan mudah melihat label atau kategori yang menjadi induk dari artikel tersebut.

Cara Pasang Breadcrumb SEO Friendly di Blogspot

3. Cek Breadcrumb pada Template

Setelah kenalan, sekarang saatnya kita memasang breadcrumb ke dalam template Blogger. Perlu diketahui, saat ini hampir semua template sudah ditambahkan breadcrumb oleh pembuatnya. Saya sendiri selalu menyisipkannya ke dalam semua template Blogger yang saya buat, baik yang gratis maupun premium. Namun tetap saja harus waspada, siapa tahu ternyata belum ada.

Untuk mengecek cukup menggunakan Google Structured Data Testing Tool yang bisa diakses melalui alamat berikut:

https://search.google.com/structured-data/testing-tool
  1. Masukkan alamat postingan ke dalam kolom yang tersedia. Ingat ya, halaman post lho, bukan homepage.
  2. Struktur breadcrumb ditandai dengan nama BreadcrumbList. Jika dipasang dengan benar maka tampilannya akan menunjukkan tulisan 0 ERRORS, 0 WARNING.
  3. Jika BreadcrumbList diklik akan menunjukkan info lebih lanjut mengenai itemListElement yang jumlahnya harus sama dengan jumlah label yang tersemat pada artikel plus 1 URL homepage. Contohnya artikel saya nih, dia memiliki 2 buah label yaitu Template dan Video. Maka harusnya jumlah itemnya ada 3, seperti gambar berikut.
jumlah BreadcrumbList = jumlah label + 1
Struktur Data Breadcrumb
Daftar Link di Breadcrumb

4. Cara Pasang Breadcrumb

Apakah template kamu sudah memiliki breadcrumb dan tidak ada yang error? Maka selamat, kamu tidak perlu cape-cape membaca tutorial ini. Berhenti dan tutuplah artikel ini karena tidak ada yang perlu diatur lagi. Namun jika ternyata tidak ada, atau ada tapi masih menunjukkan pesan kesalahan, silakan baca dan ikuti tutorial cara memasang breadcrum SEO friendly di Blogspot ini sampai habis tak tersisa.

Breadcrumb bisa dipasang melalui 2 metode berbeda, yaitu:

  • Microdata HTML
  • JSON-LD

Blog igniel.com akan mengupasnya satu-persatu untuk kalian semua.

4.1. Microdata HTML

Ini metode terpopuler yang umum digunakan oleh pemilik blog. Biasanya ditempatkan di atas judul postingan.

  1. Tambahkan dulu kode CSS berikut 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. Cari kode berikut:
    <h1 class='entry-title'>
    Jika tidak ada, cari kode ini:
    <h2 class='entry-title'>
    Masih belum ada juga? Pokoknya cari elemen HTML yang memiliki id atau class entry-title.
  3. Tambahkan kode 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'>
            <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 pengaturan lalu lihat hasilnya. Kamu pun bisa mengubah letaknya asal masih dalam lingkup artikel. Struktur dan kode setiap template berbeda, tergantung si pembuatnya, jadi memang susah kalau dicontohkan dengan id atau class HTML tertentu.

Pada kode di atas, saya tidak menampilkan judul postingan yang sedang dibuka karena sebenarnya tidak dibutuhkan. Yang dibaca oleh Google hanyalah daftar link dari homepage dan label saja.

PRO

  • Berfungsi sebagai variasi tambahan yang dapat mempercantik halaman.
  • Pengunjung bisa langsung kembali ke halaman sebelumnya dengan cepat dengan meng-klik link yang ada.

KONTRA

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

4.2. JSON-LD

Cara kedua tidak banyak dilakukan oleh pemilik blog. Entah kenapa, mungkin karena metode ini kurang terkenal. Berbeda dengan metode pertama, JSON-LD ini tidak akan tampil secara kasat mata karena scriptnya hanya bekerja di belakang layar tanpa menampilkan visual apapun. Kamu mau coba metode yang tidak pasaran? Yuk silakan ikuti cara pasang Breadcrumb valid HTML5 berikut ini.

  1. Cari dulu kode ini:
    <data:post.body/>
  2. Tambahkan script berikut DI BAWAH kode yang tadi disebutkan.
  3. <!-- 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>

PRO

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

KONTRA

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

Keduanya memiliki kelebihan masing-masing. Sama bagusnya kok, kamu bisa memilih mana yang lebih disuka karena hasilnya sama saja di mata Google. Selama cara pasangnya benar dan struktur datanya valid, maka dia sudah SEO friendly.

5. Validasi

Setelah selesai dipasang, cek kembali agar kamu semakin yakin bahwa breadcrumb ini sudah benar dan valid. Kembali gunakan Google Structured Data seperti yang disebutkan pada langkah nomor 3 di atas.

Setelah itu, tunggu beberapa hari dan cek di Google Search Console. Kalau breadcrumb valid, maka laporannya akan muncul di sana, tepatnya di bawah menu Enhacements. Pastikan tidak ada yang error ya.

Breadcrumb JSON-LD Valid HTML5 dan W3C

Bagaimana, apa kamu sudah paham tentang semua langkah menambahkan Breadcrumb untuk Blogger di atas? Silakan berikan komentar jika ada yang belum jelas. Langsung praktekan di blog masing-masing ya.

https://developers.google.com/search/docs/data-types/breadcrumb
https://schema.org/BreadcrumbList
SHARE Pin Share
Artikel Terkait
38 komentar
  1. Where is footer in your template sister?

    BalasHapus
    Balasan
    1. turn left boi, cek version dekstop

      Hapus
    2. What are you looking for in footer? It's on your left.

      Hapus
    3. Sister can you make a tutorial on how to make header like Your Template...

      Hapus
  2. Terima kasih mbak. Tutorialnya sukses saya terapkan di blog saya

    BalasHapus
  3. Balasan
    1. Di template saya maksudnya? Ada. Di kiri. Bawah menu.

      Hapus
  4. dear igniel how can i learn designing like you.
    you're best developer I've ever seen.
    from - india

    BalasHapus
  5. Balasan
    1. Iya memang diambil dari label kalo Blogger.

      Hapus
  6. Kok homenya ikut terindex ya?

    BalasHapus
    Balasan
    1. Tunggu 1 bulanan sampe struktur yang baru dikenali Google.

      Hapus
    2. Oke makasih kak.

      Hapus
  7. Jelas dan mudah dimengerti artikelnya mbak, kalau pakai breadchumb type JSON-LD tetap dikenali search engines kan mbak?

    BalasHapus
    Balasan
    1. Dibanding microdata HTML, yang direkomendasikan Google justru JSON-LD.
      https://developers.google.com/search/docs/guides/intro-structured-data#markup-formats-and-placement

      Hapus
  8. json ld kok gak muncul ya mbak? udah di ganti warna juga

    BalasHapus
    Balasan
    1. JSON-LD nggak akan menampilkan visual apapun. Di dalam artikel udah dijelaskan.

      Hapus
  9. saya menggunakan cara kedua, udh saya cek di web mastertools tetap saja. apakah harus menunggu 24 jam ?

    BalasHapus
    Balasan
    1. oh, ya klau untuk wordpress gmana ?

      Hapus
    2. Cara di atas khusus Blogspot karena pakai tag kondisional Blogspot.
      Kalau WP pakai plugin Yoast SEO aja biar praktis.

      Hapus
  10. ada dua breadcrumb stelah pakai cara kedua sm test struktur data yaitu breadcrumblist dan breadcrumb. ada solusi ga ka ?

    BalasHapus
    Balasan
    1. Hapus dulu breadcrumb yang lama. Lalu ganti pake yang ini.

      Hapus
  11. kan ada yang make http:// sedangkan tutor diatas make https:// di schema.org/breadcrumblist apakah sama?

    BalasHapus
    Balasan
    1. Langsung pakai https aja ya gapapa.

      Hapus
  12. makasih bang,,,, pagi-pagi dpat email breadcrumbs,langsung ada tutor

    BalasHapus
  13. Mbak, saya sudah pasang breadcrumbs pake cara kedua, pas cek di structured data tadi g muncul seperti yang di screenshoot mbaknya. Apakah ada yang salah?

    BalasHapus
    Balasan
    1. Pastikan menyimpan TIDAK di dalam tag kondisional apapun.

      Hapus
  14. makasih mbak...dah seminggu error masalah breadcrumbs...semoga setelah ikut tutorial bisa kembali pulih..

    BalasHapus
  15. di saya malah error hasilnya, panahnya malah ngumpul diakhir semua, seharusnya kan panahnya sebagai pembatas tiap label

    BalasHapus
    Balasan
    1. Berarti ada yang salah sama CSS template kamu.
      Hapus CSS dari breadcrumb sebelumnya.

      Hapus
  16. berapa lama mbak pulih breadcrumbnya di google console?

    BalasHapus
    Balasan
    1. Harusnya semingguan udah mulai pulih.

      Hapus
  17. kalau punya saya dicek di google search console muncul tulisan "Skema data-vocabulary.org" cara memperbaiki nya gimana ya gan?

    BalasHapus
    Balasan
    1. Hapus dulu breadcrumb lama tsb. Lalu ganti pake versi di tutorial ini.

      Hapus
  18. Saya memakai script bawaan template,tetapi labelnya otomatis diurutkan berdasarkan huruf awal (misal Home > a contoh > b contoh).Gimana yah biar bisa Home > b contoh > a contoh

    BalasHapus
  19. Setelah mengedit HTML dan menekan SIMPAN, blog saya selalu muncul peringatan : com.google.ads.syn.auth.caller.AuthenticationException: USER_MISSING (soft error): Unable to load users: no AdSense user is associated with the Gaia ID. Itu apa masalahnya Mbak Igniel?

    BalasHapus
  20. wah mantap mbak masalah breadcrumb saya solved, makasih

    BalasHapus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!