Pasang Tambah Navigasi Breadcrumbs Valid Google

Pasang Tambah Navigasi Breadcrumbs Valid Google - Membuat atau menambahkan navigasi breadcrumbs yang valid google, saya katakan valid google karena navigasi breadcrumbs terindexs oleh google saja bing dan yahoo tidak membaca mengindeks navigasi breadcrums ini, beberapa tahun silam artikel untuk navigasi breadcrumbs sudah banyak yang posting hanya saja navigasi breadcrumbs tersebut sebatas menampilkan categori postingan berdasarkan label posting saja.

Navigasi breadcrumbs terindeks dari google juga sudah banyak yang posting dan ditulis ulang pada blognya masing-masing begitu juga saya guna melengkapi artikel tutorial blog yang ada disitus ini, navigasi breadcrumbs bukan hanya mempercantik tampilan blog kita saja tapi juga dapat membantu pengunjung untuk kembali kehalaman utama (home) atau bisa juga mengarahkan pengunjung keartikel terkait berdasarkan label posting, saat label pada breadcrumbsnya diklik oleh pengunjung atau visitor.

Bagaimana cara memasang atau menambahkan navigasi breadcrumbs yang valid, sehingga label posting terindek oleh google juga, sebelum kecara pembuatannya bagi sobat yang sudah mampir keblog ini dan yang belum tau dengan navigasi breadcrumbs yang dimaksud bisa lihat print screennya dibawah ini.

Perhatikan kedua artikel diatas, terlihat jelas mana yang menggunakan navigasi breadcrumbs dan mana yang tidak, pada gambar pertama terlihat jelas setelah url ada label category posting (SEO Tips) sedangkan pada artikel kedua dari gambar breadcrumbs diatas tidak terlihat adanya label melainkan judul posting yang panjang.

Cara Pasang Tambah Menu Navigasi Breadcrumbs Terindeks Google

Cara menambahkan menu navigasi breadcrumbs pada blogspot dan ditempatkan diatas judul posting.

Langkah Pertama
Silahkan sobat masuk kedasbor blogger sobat, kemudian masuk keedit html, sekedar saran karena penambahan navigasi breadcrumbs tersebut ditambahnya pada kode htmlnya sebaiknya backup terlebih dahulu template sobat, untuk antisipasi jikalau ada kesalahan saat penyisipan kode breadcumbs tambahan.

Langkah Kedua
Pada bagian edit html centang expand widget, kemudian gunakan tombol pencari cepat untuk mencari letak posisi kode html breadcrumbsnya, tekan ctrl + f.

• Cari kode CSS Ini : ]]></b:skin>
  
  .breadcrumbs{ padding:5px 5px 5px 0; margin:0;font-size:95%; line-height:1.4em; border-bottom:4px double #cadaef; }
  
  Tambahkan kode css yang baru tadi kemudian tempatkan persisi diatas kode ]]></b:skin>
• Cari Kode HTML Ini : <b:includable id='post' var='post'>
  Setelah ketemu kode diatas kemudian tempatkan kode berikut persis dibawah kode html tadi,
  
  <b:include data='posts' name='breadcrumb'/>
• Cari Kode HTML ini :  <b:includable id='main' var='top'>
  Jika kode diatas sudah anda temukan kemudian replace / hapus tambah dengan kode dibawah berikut.
  
   <b:includable id='breadcrumb' var='posts'>
  <b:if cond='data:blog.homepageUrl == data:blog.url'>
  <!-- No breadcrumb on home page -->
  <b:else/>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <!-- breadcrumb for the post page -->
  <p class='breadcrumbs'>
  <span class='post-labels'>
  <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
  <a expr:href='data:blog.homepageUrl' href='' itemprop='url' rel='tag'><span itemprop='title'>Home</span></a></span>
  <b:loop values='data:posts' var='post'>
  <b:if cond='data:post.labels'>
  <b:loop values='data:post.labels' var='label'>
  <b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
  <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
  <a expr:href='data:label.url' href='' itemprop='url' rel='tag'><span itemprop='title'><data:label.name/></span></a></span>
  </b:if>
  </b:loop>
  <b:else/>
  &#187;Unlabelled
  </b:if>
  &#187; <span><data:post.title/></span>
  </b:loop>
  </span>
  </p>
  <b:else/>
  <b:if cond='data:blog.pageType == &quot;archive&quot;'>
  <!-- breadcrumb for the label archive page and search pages.. -->
  <p class='breadcrumbs'>
  <span class='post-labels'>
  <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
  <a expr:href='data:blog.homepageUrl' href='' itemprop='url'><span itemprop='title'>Home</span></a></span> &#187; Archives for <data:blog.pageName/>
  </span>
  </p>
  <b:else/>
  <b:if cond='data:blog.pageType == &quot;index&quot;'>
  <p class='breadcrumbs'>
  <span class='post-labels'>
  <b:if cond='data:blog.pageName == &quot;&quot;'>
  <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
  <a expr:href='data:blog.homepageUrl' href='' itemprop='url'><span itemprop='title'>Home</span></a></span> &#187; All posts
  <b:else/>
  <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
  <a expr:href='data:blog.homepageUrl'><span itemprop='title'>Home</span></a></span> &#187; Posts filed under <data:blog.pageName/>
  </b:if>
  </span>
  </p>
  </b:if>
  </b:if>
  </b:if>
  </b:if>
  </b:includable>
  <b:includable id='main' var='top'>
• Simpan Template Sobat, dan lihat hasilnya pada halaman posting

Cara Pasang Tambah Menu Navigasi Breadcrumbs Valid Google, ini sudah saya terapkan diblog ini, selain mempercantik melengkapi blog ini, juga menurut saya akan lebih baik jika semuanya bisa terindeks oleh mesin pencari besar seperti google, memang untuk mesin pencari besar lainnya selain google seperti Yahoo dan Bing tidak akan membaca kode navigasi breadcrumbs tambahan tadi.