Cara Memasang Breadcrumbs SEO Di Blog

Published By Jefri Rendra May 29, 2018

Cara Memasang Breadcrumbs SEO Di Blog - Memasang breadcrumps di Blog adalah salah satu hal yang perlu diperhatikan karena cukup penting sebagai faktor pendukung SEO . Banyak kode juga yang diperhatikan agar struktur data website kita sudah benar.

Breadcump itu apa sih? Breadcump adalah navigasi menyu yang biasa dipasang  diatas judul posting blog atau website.  Dimana terdapat link atau navigasi yang menuju ke label tertentu seperti beranda,  kategori diikuti dengan judul posting. Sehingga dapat mempermudahkan pengunjung blog untuk loncat ke halaman lain.

Cara Memasang Breadcrumbs SEO Friendly

 

1. Login Blog > Klik Menu Template > Edit HTML > Kemudian sisipkan kode CSS berikut sebelum ]]></b:skin> atau </style>

/* Breadcrumbs */
.breadcrumbs {padding:10px;background:#ffffff;margin-bottom:10px}
.breadcrumbs a,.post-info a {color:#8EDCFF;}
.breadcrumbs a:hover,.post-info a:hover {color:#2EACC9;}

2. Selanjutnya carilah kode HTML seperti dibawah ini

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

3. Sisipkan kode HTML breadcrumbs 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 Post -->
<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' 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;'>
<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. Menyimpan template.

Untuk mengecek breadcump sesuai dengan struktur data google silahkan masukkan salah satu url post anda di  Google Testing Tool . Demikian langkah - langkah Cara Memasang Breadcrumb SEO Di Blog. Semoga dapat bermanfaat.