Breadcrumb Microdata valid HTML5

HTML SEO sitemap Trik

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>

1code-line:1-1.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:

1code-line:2-12code-line:2-23code-line:2-34code-line:2-45code-line:2-56code-line:2-67code-line:2-78code-line:2-89code-line:2-910code-line:2-1011code-line:2-1112code-line:2-1213code-line:2-1314code-line:2-1415code-line:2-1516code-line:2-1617code-line:2-1718code-line:2-1819code-line:2-1920code-line:2-2021code-line:2-2122code-line:2-2223code-line:2-2324code-line:2-2425code-line:2-2526code-line:2-2627code-line:2-2728code-line:2-2829code-line:2-2930code-line:2-3031code-line:2-3132code-line:2-3233code-line:2-3334code-line:2-3435code-line:2-3536code-line:2-3637code-line:2-3738code-line:2-3839code-line:2-39<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 :)

Artikel Terkait

  • jQuery Show Hide Checkboxes
    Kali ini saya akan share Show Hide sederhana menggunakan jQuery Checkboxes value, prinsip kerjannya sama saja dengan jQuery show hide hanya saja berbeda di medianya. trik ini juga sebelumnya pernah saya gunakan untuk membuat show hide emoticon, konversi kode dan halaman OOT di komentar blog saya, jika mungkin anda juga berminat menggunakan jQu…
  • Background posting berbeda - beda di homepage
    buat sobat yang sedang mencari trik atau cara untuk membuat tampilan posting tampil dengan warna background yang berbeda beda di setiap lebel dan halaman depan blog saja dan suka dengan tampilan seperti ini bisa menggunakan trik mudah berikut ini. caranya pun juga cukup mudah, silahkan buka editor template blog sobat lalu cari kode </head&…
  • Alternatif posting tanpa judul
    Penasaran dengan judul posting ini silahkan simak saja, sebenarnya trik ini saya gunakan untuk mengganti sebuah judul pada sebuah posting yang tidak memiliki judul. adakah posting tanpa judul? mungkin terjadi karena lupa ketika membuat posting atau sebagainya. untuk menerepkan trik ini cukup mudah 1. Silahkan masuk ke Blogger 2. Pilih Templat…
  • Membatasi jumlah pencarian posting
    Kalau sebelumnya saya membahas tentang cara bagaimana membatasi jumlah posting yang di sajikan dalam pencarian per label, kali ini saya akan membahas cara membatasi jumlah posting yang akan di tampilkan ketika user atau pengunjung menggunakan form pencarian untuk menemukan sebuah artikel atau posting bukan dari kategori label. Bingung? coba l…
  • Membuat current page pada menu navigasi
    Current page atau Current menu adalah sebuah fungsi dimana di posisikan sebagai penanda halaman aktif pada menu navigasi yang sedang di buka atau di kunjungi, misalkan pada link menu navigasi Contact, maka link pada menu navigasi Contact yang akan di beri penanda berbeda dari link menu navigasi lainnya. biar sobat tidak bingung langsung saja l…
  • Memasang total post dan total comment
    Mungkin ini bukan trik baru, tapi saya coba terapakan kembali sedikit trik lama ini untuk menambah keunikan di dalam tampilan blog saya. memasang total post dan total comment bukan hal yang sulit, karena kita hanya perlu menggunakan sedikit script. script yang di gunakan seperti di bawah ini: Script untuk Total Posts <script style="text/j…

2 komentar

Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...