Inteknologi.com

Blog - Jika kamu sering memperhatikan hasil pencarian di Google, mungkin pernah melihat deretan tautan kecil di bawah judul artikel seperti Home > Tutorial > SEO Blogger. Itulah yang disebut breadcrumb.

Breadcrumb berfungsi sebagai navigasi tambahan yang membantu pengunjung mengetahui posisi halaman yang sedang mereka buka di dalam struktur situs. Dengan adanya breadcrumb, pembaca bisa dengan mudah kembali ke kategori utama tanpa perlu menekan tombol “Back” berkali-kali.

Jika kalian mencari Template Blog Responsive dan Fast-Loading Silahkan Lihat Disini

Bagi pemilik blog, terutama pengguna Blogger, breadcrumb bukan hanya soal tampilan. Elemen kecil ini punya peran penting dalam optimasi SEO on-page. Google menggunakan breadcrumb untuk memahami struktur dan hierarki halaman pada sebuah website. Ketika struktur ini jelas, mesin pencari dapat mengindeks halaman dengan lebih akurat, sehingga peluang muncul di hasil pencarian juga meningkat.

Selain itu, Breadcrumb Schema atau lebih tepatnya BreadcrumbList markup membantu Google menampilkan hasil pencarian blog kamu dengan tampilan yang lebih rapi dan profesional. Ini dikenal dengan istilah Rich Results, di mana URL biasa diganti dengan jalur navigasi yang terlihat seperti tautan berlapis.

Contohnya, dibanding hanya menampilkan:

• https://www.inteknologi.com/cara-memasang-breadcrumb-schema-di-blogger

Google bisa menampilkan:

• Inteknologi > Tutorial Blogger > Cara Memasang Breadcrumb Schema di Blogger

Apa Itu Breadcrumb Schema?

Menambahkan Breadcrumbs pada Blog

Perbedaan Breadcrumb Biasa dan Breadcrumb Schema

<b:if cond="data:view.isPost">
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://www.inteknologi.com/"
    },
    <b:if cond='data:post.labels'>
      {
        "@type": "ListItem",
        "position": 2,
        "name": "<data:post.labels.first.name/>",
        "item": "<data:blog.homepageUrl/>search/label/<data:post.labels.first.name/>"
      },
    </b:if>
    {
      "@type": "ListItem",
      "position": 3,
      "name": "<data:post.title/>"
    }
  ]
}
</script><span style="font-family: Times New Roman;"><span style="white-space: normal;">
</span></span></b:if>

<b:if cond='data:view.isPost'>
<div class='breadcrumb' itemscope itemtype='https://schema.org/BreadcrumbList'>
  <span itemprop='itemListElement' itemscope itemtype='https://schema.org/ListItem'>
    <a itemprop='item' href='https://www.inteknologi.com/'><span itemprop='name'>Home</span></a>
    <meta itemprop='position' content='1'/>
  </span>
  <b:if cond='data:post.labels'>
    ›
    <span itemprop='itemListElement' itemscope itemtype='https://schema.org/ListItem'>
      <a itemprop='item' expr:href='data:blog.homepageUrl + "search/label/" + data:post.labels.first.name'><span itemprop='name'><data:post.labels.first.name/></span></a>
      <meta itemprop='position' content='2'/>
    </span>
  </b:if>
  ›
  <span itemprop='itemListElement' itemscope itemtype='https://schema.org/ListItem'>
    <span itemprop='name'><data:post.title/></span>
    <meta itemprop='position' content='3'/>
  </span>
</div>
</b:if>