Navigasi Breadcrumbs dengan Microdata

Anda mungkin pernah membaca posting Menambah Lokasi Link Post (Breadcrumbs Trail) oleh Hoctro. Posting ini juga berhubungan dengan hal tersebut, namun di-aransemen dengan beberapa hack agar muncul di beberapa halaman & ditambahkan format microdata data-vocabulary. Penggunaan data-vocabulary dimaksudkan agar breadcrumbs mampu berdiri sendiri, sehingga akan harmonis dengan format microdata http://schema.org/Blog. Lebih lanjut mengenai breadcrumbs yang didukung beberapa format dapat kita telaah pada Rich snippets — Breadcrumbs.

<b:includable id='breadcrumb' var='posts'>
  <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <b:if cond='data:blog.pageType == "static_page"'>
  <!-- breadcrumb for the static page -->
  <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a> / <span itemprop='title'><data:blog.pageName/></span></div>
    <b:else/>
      <b:if cond='data:blog.pageType == "item"'>
  <!-- breadcrumb for the post page -->
        <b:loop values='data:posts' var='post'>
          <b:if cond='data:post.labels'>
  <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a>
    <b:loop values='data:post.labels' var='label'>
      <b:if cond='data:label.isLast == "true"'>
  / <a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a>
      </b:if>
    </b:loop>
  / <span itemprop='title'><data:post.title/></span></div>
          <b:else/>
  <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a> / <span itemprop='title'>Tanpa Label</span> / <span itemprop='title'><data:post.title/></span></div>
          </b:if>
        </b:loop>
      <b:else/>
        <b:if cond='data:blog.pageType == "archive"'>
  <!-- breadcrumb for the label archive page -->
  <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a> / <span itemprop='title'>Arsip <data:blog.pageName/></span></div>
        <b:else/>
          <b:if cond='data:blog.pageType == "index"'>
  <!-- breadcrumb for non home page (2nd, search, label page) -->
            <b:if cond='data:blog.pageName == ""'>
  <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a> / <span itemprop='title'>Penelusuran Arsip Posting</span></div>
            <b:else/>
  <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a> / <span itemprop='title'><data:blog.pageName/></span></div>
            </b:if>
          </b:if>
        </b:if>
      </b:if>
    </b:if>
  </b:if>
</b:includable>

Untuk pengkodean berwarna merah, dapat diganti sesuai keinginan Anda dengan menyesuaikan pula di halaman apa ia ditampilkan. Sedangkan warna biru (“/”) merupakan pemisah (separator) antar title. Letakkan pengkodean pada “Edit HTML”, jangan lupa centang Expand Widget Templates. Kemudian cari kode berikut & taruh di atasnya.

<b:includable id='main' var='top'>

Kita telah menambahkan widget breadcrumbs (kalau boleh dikatakan demikian), tinggal cara memanggil serta meletakkan kode pemanggilan tersebut. Perlu diperhatikan, kemungkinan pengkodean tiap template dapat berbeda-beda. Cara memanggilnya adalah melalui markah berikut.

<b:include data='posts' name='breadcrumb'/>

Letakkan kode pemanggilan itu di atas <b:include data='top' name='status-message'/>, seperti yang dapat kita amati di bawah ini.

<!-- posts -->
<div class='blog-posts hfeed'>

  <b:include data='posts' name='breadcrumb'/>
  <b:include data='top' name='status-message'/>

Sedangkan untuk melakukan beberapa kustomisasi, tambahkan selector .breadcrumbs pada CSS template atau letakkan saja di atas ]]></b:skin>. Contoh:

.breadcrumbs {
  font: .875em/1.7143em monospace;
  margin: 0 0 1.7143em;
}

Penambahan breadcrumbs di atas, khusus dilakukan pada Blogger™ & pengkodeannya tidak mutlak demikian. Artinya kita masih dapat merubah atau melakukan modifikasi sesuai dengan pengkodean template yang digunakan.

Bahan Bacaan: Breadcrumb for Blogger format RDF (Resource Description Framework) — Blogger Plugins.

9 komentar untuk “Navigasi Breadcrumbs dengan Microdata”

  1. tutorial mantap nih, saya coba ya, thanks tutorialnya..

    BalasHapus
  2. Mau tanya nich mas, Seberapa pentingkah Breadcumb bagi sebuah blog ?
    Apkah blog yang memiliki breadcumb lebih SEO freindly untuk mesin pencari ?

    Terima Kasih..

    BalasHapus
    Balasan
    1. @Informasi Online Indonesia — Jika dikatakan lebih SEO? Tidak juga. Maksudnya seperti ini breadcrumbs lebih diutamakan untuk kemudahan pengguna menelusuri tiap bagian dari suatu halaman situs web atau blog, apalagi yang memiliki halaman kompleks. Sedangkan ketika berbicara tentang sebuah blog yang notabene hanya memiliki halaman posting sebagai aktivitas kinerjanya, saya pikir penting atau tidak penting akan kembali kepada pengelolanya.
      Seperti blog ini, saya berpikir mungkin dengan memasang breadcrumbs akan memudahkan pengguna untuk menavigasi halaman dengan sekali klik. Misalnya pengguna membuka halaman posting tertentu dan ternyata isinya kurang/tidak sesuai dengan apa yang ia cari, mungkin akan lebih baik jika memberikan suatu alternatif yang terkait dengan posting tersebut (taut label). Akhirnya, siapa yang menduga apabila pada tautan tersebut terdapat informasi yang benar-benar pengguna butuhkan.
      Ketika sebuah blog dinilai memberikan data yang baik dan terkait dengan isi konten yang relevan bagi pengguna, sangat dimungkinkan mesin penelusur juga akan berpikir demikian, sehingga tidak jarang breadcrumbs ditampilkan pada hasil pencarian. Jadi “berpikir tentang kebutuhan pengguna — walaupun tidak dikatakan secara harfiah — maka itulah SEO”.

      Hapus
  3. Waaaw,
    sulitnyaaaaaa

    kenapa saya tidak bisa - bisa yaaa..

    tolong komentari blog saya yaaa..
    dan kasih saran agar bisa muncul menu-menu diatas blog

    terima kasih

    BalasHapus
    Balasan
    1. @andieshinigami — breadcrumbs bukan menu navigasi utama :)

      Hapus
  4. sipppp, artikel yang bermanfaat

    BalasHapus
  5. semoga artikelnya juga dapat memeberikan pencerahan bagi yang lainnya

    BalasHapus
  6. artikelnya bagus, berisi tutorial yang sangat membantu, semoga blog nya makin bagus, amin

    BalasHapus
  7. wah, makasi tutorialnya gan.. :3

    BalasHapus