Menambahkan Navigasi Breadcrumb

Pengertian Breadcrumb

Breadcrumb sebenarnya nama kue / roti. Tapi dihalaman web atau blog Breadcrumb merupakan urutan jalur halaman yang dibuka saat itu. Selain itu Breadcrumb juga berperan sebagai navigasi halaman tersebut.

Navigasi Breadcrumb pada umumnya menampilkan urutan link seperti yang ada di atas postingan ini, urutan halaman tersebut biasanya mulai dari :

Sehingga membentuk sebuah jalur yang bisa mengarahkan pengunjung, kemana akan melanjutkan kunjungannya setelah ini. Meskipun peluang bagi pengunjung untuk mengikuti jalur navigasi Breadcrumb ini kecil tetapi berperan melengkapi navigasi halaman selain navigasi menu.

Peran Breadcrumb di mesin Pencarian

Tak hanya sebagai navigasi dihalaman, Breadcrumb yang disematkan sesuai ketentuan juga akan berperan sebagai Cuplikan tambahan di halaman hasil penelusuran.

Dengan menambahkan Breadcrumb di halaman blog, setidaknya menambah 1 poin untuk SEO halaman.

Menambahkan Breadcrumb di Blogger

Menurut jenisnya, Breadcrumb yang populer ada 2 macam yaitu :
1. Breadcrumb script LDjson
2. Breadcrumb HTML
Sebenarnya total terdapat 4 jenis data Breadcumb yang ditentukan Google, 2 lainnya yaitu Microdata dan RDFa. Agar tidak membingungkan, disini akan mengambil Breadcrumb jenis HTML.

Sebagai contoh praktek pemasangan Breadcrumb, template yang akan digunakan disini adalah template Soho - Blogger v3

Tampilan sebelum dipasang Breadcrumb

Info tambahan tentang Breadcrumb beserta kodenya bisa dilihat di
Template Breadcrumb Schema Org
Dihalaman tersebut juga menjelaskan cara pemasangan dan juga hasil pengujian dari Breadcrumb setelah pemasangan.

Breadcrumb HTML

Kode Breadcrumb HTML ada 2 macam : Breadcrumb snippet dan Non-snippet.

Kode Bredcrumb snippet HTML dibawah ini hanya akan menampilkan 1 label utama / pertama (first label name) saja meskipun postingan dipasang lebih dari 1 label.

<div class='breadcrumb'>
  <ol itemscope='' itemtype='http://schema.org/BreadcrumbList'>
    <li class='hidden' itemprop='itemListElement' itemscope='' itemtype='http://schema.org/ListItem'>
      <a expr:href='data:blog.homepageUrl' itemprop='item'>
         <span itemprop='name'><data:view.title.escaped/></span></a>
      <meta expr:content='data:view.title.escaped' itemprop='name'/>
      <meta content='1' itemprop='position'/>
    </li>
    <li itemprop='itemListElement' itemscope='' itemtype='http://schema.org/ListItem'>
      <a expr:href='data:blog.homepageUrl' itemprop='item'>
        <span itemprop='name'>Beranda</span></a> >
        <meta content='Beranda' itemprop='name'/>
        <meta content='2' itemprop='position'/></li>
    <li itemprop='itemListElement' itemscope='' itemtype='http://schema.org/ListItem'>
      <span itemprop='name'>
      <b:if cond='data:post.labels'>
        <a class='label' expr:href='data:post.labels.first.url'>
        <data:post.labels.first.name/></a> >
      </b:if>
      </span>
      <meta content='3' itemprop='position'/>
    </li>
    <li itemprop='itemListElement' itemscope='' itemtype='http://schema.org/ListItem'>
      <span itemprop='name'><data:post.title/></span>
      <meta expr:content='data:post.url' itemprop='item'/>
      <meta content='4' itemprop='position'/>
    </li>
  </ol>
</div>

Untuk kode HTML Breadcrumb yang menampilkan semua label yang diterapkan pada postingan, bisa dicopy di halaman ini : Breadcrumb Schema Org

Breadcrumb Non-snippet

Breadcrumb Non-snippet ini hanya menampilkan navigasi link biasa meskipun secara visual tampilannya hampir sama dengan yang Breadcrumb snippet.

Breadcrumb jenis ini biasanya digunakan untuk melengkapi Breadcrumb jenis LDjson.

<nav id='breadcrumb'>
  <a expr:href='data:blog.homepageUrl'>
    <data:messages.home/>
  </a>
<b:if cond='data:post.labels'>
<em class='delimiter'/>
  <a class='b-label' expr:href='data:post.labels.last.url'> 
   <data:post.labels.last.name/>
  </a>
</b:if>
<em class='delimiter'/>
<span class='current'>
  <data:post.title/>
</span>
</nav>

Breadcrumb snippet - Ldjson

<script type='application/ld+json'>
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"@id": "#Breadcrumb",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"item": {
"name": "<data:messages.home/>",
"@id": "<data:blog.homepageUrl.jsonEscaped/>"
    }
  },{
"@type": "ListItem",
"position": 2,
"item": {
"name": "<b:if cond='data:post.labels'>
  <data:post.labels.last.name/>
  </b:if>",
"@id": "<data:post.labels.last.url.jsonEscaped/>"
    }
  },{
"@type": "ListItem",
"position": 3,
"item": {
"name": "<data:post.title/>",
"@id": "<data:post.url.jsonEscaped/>"
    }
  }]
}
</script>

Didalam template HTML Blogger ada 2 cara pemasangan / penempatan kode baik itu HTML maupun javascript, yaitu :
1. Pemasangan langsung : Membuat atau mem-paste kode / javascript langsung ditempatnya.
2. Dengan defaultmarkup, lihat di halaman b:includable
Membuat atau mem-paste kode / javascript kedalam tag <b:includable>

⇐ Sebelumnya

Selanjutnya ⇒

Coding Blogger