Cara Memasang Breadcrumbs di Blogger Seo Friendly

Breadcrumb atau breadcrumb trail adalah elemen kontrol grafis yang sering digunakan sebagai bantuan navigasi dalam antarmuka pengguna dan pada halaman web. Ini memungkinkan pengguna untuk melacak dan menjaga kesadaran lokasi mereka dalam program, dokumen, atau situs web.

Umumnya pada blogger dan platform web lain menggunakan elemen breadcrumbs yang terdiri dari link ke halaman utama / depan (home), link ke halaman label (label page) serta Judul Postingan.

Breadcrumbs navigasi yang sering kita jumpai pada web posisinya berada diatas judul postingan dan hal ini tentunya mempermudah pengunjung blog untuk melihat janis tag artikel yang mereka baca dan mudah untuk kembali kehalaman utama. Dibawah ini akan dibeberkan beberapa manfaat dari pemasangan breadcrumbs pada blogspot.

Fungsi Breadcrumbs

Berikut ini beberapa fungsi dari navigasi breadcrumbs yang mungkin bisa membuat Anda sedikit mengerti tentang cara kerjanya pada website:

• Memberikan kemudahan navigasi untuk pengunjung blog atau website.
• Membantu dalam memberikan orientasi, memperlihatkan jalan kepada para visitor blog Anda untuk mengetahui postingan yang sedang mereka baca
• Link atau tatutan yang ada di breadcrumbs membantu dengan cepat para pengunjung blog untuk kembali ke halaman awal (home) atau ke halaman label.
• Menambah kepadatan kata kunci (keywords density) pada halaman posting sehingga postingan / artikel menjadi lebih SEO Friendly.

Cara Memasang Breadcrumbs SEO Friendly Valid HTML5 di Blogger 

Template bawaan Blogger umumnya tidak ada breadcrumbs yang terpasang sehingga diharuskan untuk memasang sendiri. Berbeda halnya dengan template premium atau template free redesign para desainer template blog yang biasanya sudah berisi breadcrumbs.

Untuk Anda yang sudah mengecek template blognya dan belum memiliki breadcrumbs didalamnya. berikut ini cara memasang breadcrumb di template Blogger. pastikan Anda sudah masuk ke akun blogger sekarang.

1. Klik Tema ➨ Edit HTML

2. Copas atau Simpan kode ini di atas kode ]]></b:skin> atau kode </style>

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

3. Cari kode <b:includable id='main' var='top'> kemudian 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'>
<a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'>Home</a>
<b:loop values='data:post.labels' var='label'> &#187;
<a expr:href='data:label.url + &quot;?&amp;max-results=7&quot;' expr:title='data:label.name' itemprop='url'><data:label.name/></a>
</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'/>

4. Simpan! Save!

Cara Lain Memasang Breadcrumbs di Blogger

1. Klik Tema > Edit HTML
2. Copas kode CSS berikut ini sebelum kode]]></b:skin>> atau </style>

/* Breadcrumbs */
.breadcrumbs{padding:20px 30px;background:#fff;margin-bottom:20px}
.breadcrumbs a,.post-info a {color:#19abea;}
.breadcrumbs a:hover,.post-info a:hover {color:#454545;}

3. Cari kode seperti ini di template.
<b:includable id='main' var='top'>...</b:includable>
4. Copas kode breadcrumbs berikut ini tepat di bawah kode di atas:

<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' title='Home'>Home</a></span> / <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Breadcrumb Untuk Halaman Pos -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'>Home</a>
<b:loop values='data:post.labels' var='label'> &#187;
<a expr:href='data:label.url + &quot;?&amp;max-results=7&quot;' expr:title='data:label.name' itemprop='url'><data:label.name/></a>
</b:loop> &#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span>Without Label</span> / <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- Breadcrumb Untuk Label Search dan Search Pages -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>Archived 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' title='Home'>Home</a></span> / <span>All Post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

4. Simpan template!

Cara Mengatasi Error Breadcrumbs

Bagi Anda yang sudah terlanjur memasang breadcrumbs pada template blog Anda atau terlanjut menggunakan breadcrumbs
1. Klik Tema ➥ Edit HTML

2. Cari kode:

<div class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><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 + &quot;?&amp;max-results=7&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop> &#187; <span><data:post.title/></span>
</div>

Setelah ketemu, hapus semuanya dan ganti dengan kode:

<div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'>Home</a>
<b:loop values='data:post.labels' var='label'> &#187;
<a expr:href='data:label.url + &quot;?&amp;max-results=7&quot;' expr:title='data:label.name' itemprop='url'><data:label.name/></a>
</b:loop> &#187; <span><data:post.title/></span>
</div>

3. Save! dan lihat hasilnya

Untuk referensi tambahan tentang pemasangan breadcrumbs dan cara mengatasi error breadcrumbs  dengan metode schema.org breadcrumblist, Anda bisa baca Cara terbaru Membuat Breadcrumbs Microdata Schema.org Dengan Ikon SVG.

Demikian Cara Memasang Breadcrumbs dan Fungsinya di Blogger dan membuat postingan blog semakin SEO Friendly dan valid HTML5.

Sumber: Blog Kang Ismet

Share