Cara Memasang Breadcrumbs SEO Friendly

Masih berjumpa lagi dengan saya, pada kesempatan kali ini saya mau bagi tips dan tutorial tentang ini, sebelumnya saya mau jelasin apa itu breadcrumbs ?

Breadcrubms adalah sebuah menu navigasi yang biasa nya berada di atas judul postingan suatu blog atau website. dan isinya berupa link yang menuju home atau halaman utama yang diikuti dengan label kemudian judul dari si postingan yang yang dibuka.
Breadcrumbs ini sangat penting sebagai faktor pendukung SEO di website, karena dengan breadcrumbs kita bisa menginfirmasikan kepada pengunjung mengenai kategori dalam artikel pada blog tersebut.

Gambar 1.0

berikut tutorial nya:

Cara memasang Breadcrumbs SEO Friendly

1. Masuk ke Menu Edit HTML > Masukkan kode CSS Dibawah 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;}

 2. Cari kode dibawah ini.

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

 3. Masukkan kode HTML breadcrumbs tepat dibawah kode diatas.

<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. kemudian simpan template.

dan untuk pengujian nya anda bisa mengunjungi Google Testing Tool oke mungkin ini saja yang dapat saya sampaikan dan terima kasih

Share this post