Cara Memasang Breadcrumbs SEO Friendly

Cara membuat Breadcrumbs
Breadcrumbs adalah bentuk bantuan navigasi yang digunakan dalam antarmuka pengguna. Cara ini dibuat untuk memungkinkan pengguna melacak lokasi mereka dalam dokumen atau artikel.

Pada Situs atau Blog yang memiliki banyak halaman, navigasi breadcrumbs dapat meningkatkan cara pengguna menemukan jalan atau jejak mereka. Breadcrumbs juga merupakan bantuan efektif yang menunjukkan lokasi pengguna dalam hirarki blog atau website, membuatnya menjadi sumber besar informasi kontekstual untuk halaman arahan.

Breadcrumbs biasanya muncul secara horizontal di bagian atas halaman blog atau website, sering ditempatkan di atas judul. Breadcrumbs memberikan jejak bagi pengguna untuk mengikuti kembali ke titik awal atau entri dalam hirarki struktur situs-halaman induk (Home/Beranda).

Pada umumnya breadcrumbs terlihat seperti dibawah ini:
Home › Label › Judul Artikel
Home › Label 1 › Label 2 › Judul Artikel
Atau
Home » Label » Judul Artikel
Home » Label 1 » Label 2 » Judul Artikel
Atau
Home : Label : Judul Artikel
Home : Label 1 : Label 2 : Judul Artikel

Cara Membuat Breadcrumbs di Blogspot

1. Template > Edit HTML > Tambahkan kode CSS dibawah ini sebelum ]]></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;}

2. Cari kode HTML seperti berikut :

<b:includable id='main' var='top'>...</b:includable>

3.Tambahkan kode HTML Breadcrumbs berikut tepat dibawah kode diatas (kode no 2)

<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'>
Anda di sini : <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'>
/ <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?max-results=5&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
/ <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. Lalu silahkan kalian cek apakah Breadcrumbs sudah terpasang dengan benar atau tidak.