Cara Membuat Breadcrumbs SEO di Blogger

Cara Membuat Breadcrumbs SEO di Post Blogger - Cara membuat beradcrumbs di postingan yang terindex di google sebenarnya cukup mudah anda hanya perlu merubah dan menambahkan beberapa script di dalam template anda. Breadcrumbs adalah navigasi di blog yang membantu pengunjung menemukan posisi tingkatan label postingan . Breadcrumbs dapat membantu googlebot untuk  lebih mudah mengenali struktur dari blog kita. 

Ini adalah contoh breadcrumbs link yang telah terindex oleh google. Breadcrumbs yang kita buat kali ini juga akan dilengkapi dengan Microdata sehingga menjadi lebih SEO friendly dan valid HTML5. Untuk lebih jelasnya langsung saja kita praktekan di blog, agar lebih aman jangan lupa backup dahulu template anda.

Baca juga : Cara Pasang Syntax Highlighter Keren di Blog

Untuk membuat breadcrumbs seo di blogger langkah - langkahnya adalah sebagai berikut :

1. Klik Template > Klik Edit HTML

2. Cari kode ]]></b:skin> ( untuk lebih cepat anda dapat menekan CTRL + F )

3. Letakan kode ini di atas ]]></b:skin> tadi 

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

4. Cari kode <b:includable id='main' var='top'> ganti dengan 

<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'/>

5. Sekarang klik simpan template anda.

Efek di search engine mungkin memang tidak langsung terlihat karena butuh waktu untuk google melakukan perayapan tapi anda dapat mengeceknya di postingan blog anda.

Breadcrumbs SEO di Post Blogger anda sekarang sudah selesai, baca juga tutorial blogger lainnya.