Breadcrumb Microdata valid HTML5

Fungsi dari breadcrumb pada blog adalah untuk mengetahui sedang dihalaman mana sekarang pengunjung berada. Dengan breadcrumb, maka urusan navigasi link bisa lebih mudah. Selain itu, breadcrumb juga sangat baik untuk SEO blog karena memperkaya kata kunci dalam postingan. Hal ini terbukti dari beberapa postingan blog sesepuh seperti, kang ismet, kang asep sule, taufik dan masih banyak lagi yang muncul di halaman awal google, ternyata di pengaruhi juga oleh keberadaan breadcrumb ini.

lalu apa fungsi microdata?

Contoh mudahnya, jika Anda membuat suatu CSS dan ingin menjelaskan kode (syntax) pada bagian tertentu maka yang Anda lakukan adalah menambahkan <!-- komentar --> Prinsip dari Microdata ini pun, sekilas hampir sama dengan penambahan komentar pada suatu CSS, namun bedanya komentar ini ditulis pada format HTML5.

Fungsi Microdata Untuk Blog

Perlu ditegaskan, Microdata bukan untuk Optimasi atau Menaikkan Posisi Artikel atau Blog Anda di SERP, melainkan Microdata ini mempunyai Fungsi untuk Merubah Tampilan Pada Hasil Pencarian, Yang Tentunya Akan Mengundang Orang Untuk Mengklik Situs Anda.

Fungsi Microdata Untuk Search Engine

Penggunaan Microdata pada Blog Anda pun juga memberikan dampak pada Search Engine, yaitu memudahkan penempatan suatu artikel pada direktori mereka (google) tentunya pesan ini disampaikan oleh Google sendiri yang menganjurka kita untuk menggunakan Microdata (ketimbang Microformat atau RDFa).

sekarang langsung kita ke trik dan cara memasang Breadcrumb dengan Microdata valid HTML5

Langkah 1 : Simpan kode ini di atas </style> atau ]]></b:skin>

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:12px;color:#333;border-bottom:1px dotted #555;}

Langkah 2 : Cari kode <b:includable id='main' var='top'> kemudian ganti dengan kode di bawah ini:

<b:includable id='breadcrumb' var='posts'>
  <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <!-- breadcrumb halaman static -->
  <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> &#187; <span itemprop='title'><data:blog.pageName/></span></div>
    <b:else/>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <!-- breadcrumb halaman posting -->
        <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 == &quot;true&quot;'>
  &#187; <a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a>
      </b:if>
    </b:loop>
  &#187; <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> &#187; <span itemprop='title'>Tanpa Label</span> &#187; <span itemprop='title'><data:post.title/></span></div>
          </b:if>
        </b:loop>
      <b:else/>
        <b:if cond='data:blog.pageType == &quot;archive&quot;'>
  <!-- breadcrumb halaman arsip -->
  <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> &#187; <span itemprop='title'>Arsip <data:blog.pageName/></span></div>
        <b:else/>
          <b:if cond='data:blog.pageType == &quot;index&quot;'>
  <!-- breadcrumb pencarian label -->
            <b:if cond='data:blog.pageName == &quot;&quot;'>
  <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> &#187; <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> &#187; <span itemprop='title'><data:blog.pageName/></span></div>
            </b:if>
          </b:if>
        </b:if>
      </b:if>
    </b:if>
  </b:if>
</b:includable>

Langkah terakhir simpan template dan lihat hasilnya...

Jika tampilan breadcrumb di atas kurang menarik silahkan ubah css sesuka anda, anda juga bisa mengubah &#187; dengan simbol lain agar lebih menarik.

sekian saja semoga berguna untuk anda yang membutuhkan Breadcrumb dengan Microdata valid HTML5, terimakasih :)