ZBTOP INFO

TUTORIAL MEMASANG BREADCRUMBS VALID HTML5 BLOGSPOT

Artikel ini bisa dibilang sebagai kelanjutan dari artikel-artikel yang saya buat sebelumnya, menjadi bagian cukup penting dari rangkaian tutorial untuk Mengoptimalkan Blog dari dalam (Seo Onpage), sebelum melanjutkan membaca artikel ini, bisa jadi sampeyan juga perlu untuk membaca artikel "MEMASANG RICH SNIPPETS RATING BINTANG 5" dan "OPTIMASI META TAG DAN DATA TERSTRUKTUR BLOGGER"

Breadcrumbs Seo Friendly Blogger atau Breadcrumbs yang dibangun dengan markup Microdata (Valid HTML 5) disamping mempercantik tampilan link blog kita di halaman Mesin Pencari juga sangat disukai Google, yang mana blog tanpa Breadcrumbs Valid HTML 5, oleh Google Search Engine hanya di tampilkan bentuk link asli, sedangkan dengan mengoptimalkan blog kita dengan Breadcrumbs Markup Microdata, memberitahukan kepada Google adanya Data Terstuktur Blog.

Breadcrumbs Seo Friendly Blogspot menjadikan Index Google akan menampilkan lebih detail keberadaan suatu halaman dari Blog kita, seperti yang bisa dilihat dari gambar dibawah ini, bahwa Google tidak lagi menampilkan link asli dari artikel "DOWNLOAD 4 EBOOK CLICKBANK GRATIS" namun menggantinya dengan detail label, dimana artikel menjadi bagian dari label/kategori tersebut.


Saya berharap semoga penjelasan diatas mampu menjawab kegunaan dari Breadcrumbs Seo Friendly Valid HTML 5, Bagaimana cara untuk memasang Breadcrumbs tersebut? silahkan sobat ikuti panduan sederhana dibawah ini

• Pastikan Sobat telah Login dan berada pada dassboard blog sobat
• Klik pengaturan template di sebelah kiri
• Pada halaman selanjutnya klik Edit HTML
• Ketika Kotak HTML telah terbuka, silahkan tekan Ctrl+F untuk mulai mencari kode ]]></b:skin>
• Selanjutnya tempatkan kode-kode dibawah ini di atas kode ]]></b:skin>

 .breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

• atau bisa menggunakan kode .breadcrumbs {display:none;}apabila sobat tidak menghendaki breadcrumbs terlihat di setiap halaman artikel
• Sampeyan telah selesai menyematkan kode-kode diatas? silahkan lanjutkan dengan mencari kode <b:includable id='main' var='top'> dan ganti dengan kode-kode Microdata Bradcrumbs 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;'>
<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'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
  &#187; <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</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'/>

• Simpan Template Sobat, karena Tutorial BreadCrumbs Valid HTML 5 Seo Friendly Blogger telah selesai

Untuk melihat hasil sementara dari Tutorial Pemasangan Breadcrumbs SEO Blogspot tersebut silahkan cek di  ( http://www.google.com/webmasters/tools/richsnippets ) dan masukkan salah satu url artikel dari blog sobat, demikian Tutorial Seo Onpage Blogger untuk kali ini, semoga bermanfaat

Perhatian : Kode-kode Markup Breadcrumbs Valid HTML 5 diatas bukanlah buatan saya sendiri, namun di buat dan di publikasikan oleh Kang Ismet, sampeyan mungkin perlu untuk mengunjungi sumber kode dari artikel ini Disini

MEMASANG BREADCRUMBS SEO FRIENDLY (VALID HTML 5)

TUTORIAL SEO BLOGSPOT