Cara Memasang/Membuat Breadcrumbs SEO Friendly

Share Pengalaman - Cara Memasang/Membuat Breadcrumbs SEO Friendly - Alhamdulillah di pagi yang cerah ini kita berjumpa kembali pada postingan cara memasang Breadcrumbs yang SEO Friendly.

Breadcrumbs adalah sebuah menu navigastion atau navigasi yang kebiasaannya terletak di atas sebuah judul postingan Blog. Breadcrumbs berupa sebuah link aktif yang menuju home ataupun halaman utama yang di ikuti dengan label hingga judul dari postingan yang di buka.

Menggunakan Breadcrumbs sangat bermamfaat karena Breadcrumbs adalah peranan penting sebagai faktor pendukung SEO Friendly di blog. Karena dengan menampilkan Breadcrumbs pada situs halaman artikel blog akan membantu para pengunjung dalam mengenai kategori dari artikel yang sedang dibacanya.

Sepertinya semuanya sudah paham dengan apa yang tertulis di atas, jadi alngkah baiknya jika kita lanjut cara memasang breadcrumbs yang seo friendly di bawah ini, silahkan simak.

Cara Memasang/Membuat Breadcrumbs SEO Friendly 

• Pertama-tama pastikan kalian telah login ke blog kalian masing-masing, jika belum silahkan www.blogger.com.
• Selanjutnya silahkan klik menu Tema > Edit Html.
• Kemudian silahkan copy kode CSS di bawah 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;}

• Jika sudah menerapkan kode CSS diatas, selanjutnya silahkan cari kode HTML post  <b:includable id='main' var='top'>...</b:includable>.
• Kemudian yang terakhir silahkan copy kode di bawah 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'>
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>

• Sekarang silahkan klik simpan templeat.
• Untuk memastikan apakah Breadcrumbs sudah terpasang di blog kalian boleh menggunakan toll ini, silahkan klik link Google Testing Tool.

Sampai disini, berakhirlah artikel tentang cara memasang breadcrumbs di blog, semoga bermamfaat dan semoga sukses.