Cara Memasang Breadcrumbs di Blogger dengan Benar

Breadcrumb adalah salah satu elemen penting yang harusnya dipasang pada setiap blog atau website, tidak terkecuali untuk platform Blogger (Blogspot).
Cara Memasang Breadcrumbs di Blogger dengan Benar

Cara Memasang Breadcrumbs di Blogger dengan Benar, 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.

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.

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.

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.

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.

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

  • Tambahkan dulu kode CSS berikut DI ATAS </style> atau ]]></b:skin>.
  • /* Breadcrumb Blogger by sempetin.com */
    .breadcrumb {
    margin-bottom: 20px;
    }
    .breadcrumb, .breadcrumb a, .breadcrumb a:hover {
    font-size: 12px; /* ukuran text */
    color: #777; /* warna text */
    }
  • Cari kode berikut:
  • <h1 class='entry-title'>
    Jika tidak ada, cari kode ini:
    <h2 class='entry-title'>
    Masih belum juga ada? Pokonya cari element HTML yang memiliki id atau class entry-title.
  • Tambahkan kode ini tepat Diatas kode tadi
  • <!-- Breadcrumb Blogger by sempetin.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>
  • Simpan semua pengaturan dan lihat hasil. Sobat juga dapat mengubah struktur template melalui tata letak bisa cari di halaman google banyak sekali trik dan triknya.

Itulah Cara Memasang Breadcrumbs di Blogger dengan Benar yang dapat Admin bagikan, semoga bermanfaat dan jika ada pertanyaan silahkan koment dikolom komentar saja. Sekian dan terimakasih.

Freelance, Gaming, Content Placement & Blogger.

Post a Comment

© SempetIN. All rights reserved. Developed by Jago Desain