Cara Memasang Menu Navigasi Breadcrumbs Terindex Google

Sebelumnya saya sudah membuat tutorial tentang cara membuat menu navigasi breadcrumbs di blogspot, hanya saja script tersebut tidak dapat terindex di Google. Karena itulah dalam posting khusus ini kita akan belajar bagaimana cara membuat menu navigasi breadcrumbs yang dapat terindex di mesin pencari Google sebagai pengganti

url posting yang muncul di halaman SERP Google.

Bagaimana cara membuat-nya. Mari teman simak tutorial singkat berikut..

Cara Memasang Menu Navigasi Breadcrumbs Bisa Terindex Google

1. Pertama kita harus mengedit template blogspot, caranya silahkan teman baca di postingan ini : 

Cara Mengedit Template Blogspot

2. Nah saat teman semua dah nyampe di halaman Edit HTML, disini baru kita bisa menambahkan script khusus yang bisa menampilkan navigasi breadcrumbs di template blogspot / blogger kita.

Mari kita lakukan hal berikut ini :

1. Temukan kode html  :  <b:includable id='main' var='top'>

Lalu ganti dengan kode berikut

<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;'> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <!-- breadcrumb for the post page --> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'> <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast == &quot;true&quot;'> &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span> </b:if> </b:loop> &#187; <span><data:post.title/></span> </div> <b:else/> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div> </b:if> </b:loop> <b:else/> <b:if cond='data:blog.pageType == &quot;archive&quot;'> <!-- breadcrumb for the label archive page and search pages.. --> <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.pageType == &quot;index&quot;'> <div class='breadcrumbs'> <b:if cond='data:blog.pageName == &quot;&quot;'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span> <b:else/> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span> </b:if> </div> </b:if> </b:if> </b:if> </b:if> </b:if> </b:includable> <b:includable id='main' var='top'> <b:include data='posts' name='breadcrumb'/>

2. Temukan kode css : ]]></b:skin>

Lalu ganti dengan kode berikut

.breadcrumbs { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKrg7GfX5RnKldqlb6NGDX5jy1wlnpEqwLt_boiG_yd9qFOlR-IWNnIhtNxEgAjAAEJPhx7nZmEG9i2V3eiKeSPxnrD6Oos8UEEYjiCfaG1j4rIF0jg8TLMVvGCi_CBlqNwijmLfdVEfE/s1600/box2-top.gif); float: left; border: 1px solid #E6E6E6; width: 595px; font-size: 11px; margin: 0px 10px 10px 10px; padding: 5px 10px 5px 10px; } ]]></b:skin>

3. Terakhir yang harus dilakukan adalah menyimpan hasil editan ini, klik tombol Simpan Template danTutup.

4. Jangan senang dulu, mari kita cek apakah menu breadcrumbs khusus ini bisa terbaca oleh Google atau tidak. Solahkan sobat kunjungi Rich Snippets Tool untuk mengeceknya dan masukkan salah satu url posting, bila hasilnya seperti berikut,

maka proses membuat menu navigasi breadcrumbs yang bisa terindex Google sudah berhasil.

Tinggal tunggu hasil index maka semua postingan baru atau yang lama akan memunculkan menu navigasi breadcrumbs seperti ini :

Jadinya sangat keren ya

Bagi teman - teman yang belum membuat menu navigasi breadcrumbs yang bisa terindex google lekas membuat, dijamin akan sangat friendly dimata Google dan baik untuk perkembangan blog kita mendatang..

Selamat bekerja dan semoga sukses teman... 

Anda sedang membaca Artikel Cara Memasang Menu Navigasi Breadcrumbs Terindex Google Anda juga bisa menemukan Artikel Ini melaui URL berikut https://7e55.blogspot.com/2012/10/cara-memasang-menu-navigasi-breadcrumbs.html, Silahkan Copy Paste Artikel tersebut, namun jangan lupa untuk mencantumkan Cara Memasang Menu Navigasi Breadcrumbs Terindex Google sumbernya

Artikel Terkait: