Aug 1, 2017

Cara Memasang Breadcrumbs SEO Friendly

Memasang Breadcrumbs SEO Friendly

Penerapan SEO pada blog memang terbilang gampang susah ada banyak metode yang dipakai dan ada banyak juga kode script yang harus di perhatikan dalam penerapannya di template blog. Salah satunya adalah pemasangan Breadcrumbs yang akan kita bahas kali ini. Ini adalah postingan lanjutan yang sebelumnya pernah saya bahas juga Cara Membatasi Jumlah Post Pada Breadcrumb dan Label.

Seperti yang kita ketahui juga penerapan Breadcrumbs ini erat kaitannya dengan SEO pada blog yang akan mempermudah perayapan pada Blog khususnya pada Google agar semua label yang ada di blog dapat dengan mudah dirayapi dan hal ini juga sudah saya buktikan saat di google search mencari kata dibalikseo akan tampil semua label yang sudah terindex dan sukses dirayapi oleh Google search.

Bagi sobat yang belum mengetahui apa itu Breadcrumbs, adalah menu navigasi yang terpasang biasanya berada diatas judul postingan website atau blog. Dimana terdapat link yang menuju ke label tertentu seperti Home, halaman utama dan seterusnya di ikuti dengan Judul lainnya.

Bagi yang mau mencobanya silahkan ikuti penerapannya berikut dibawah ini Cara Memasang Breadcrumbs SEO Friendly.

Langkah Pertama
Silahkan salin kode CSS dibawah ini lalu letakkan di atas kode ]]></b:skin> atau kode </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;}



Langkah Ke Dua
Silahkan sobat cari kode HTML seperti dibawah ini.

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

Setelah ketemu silahkan tambahkan kode HTML untuk Breadcrumbs tepat diatas kode tadi.

<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>

Selalu perhatikan penerapan langkah kodenya, ada baiknya di backup terlebih dahulu templatenya untuk antisipasi jika terjadi error. Setelah selesai silahkan SAVE, selamat mencoba.

Artikel Terkait

Halo Sobat, sedikit cerita mengenai diri saya, saya adalah hanya seorang penulis amatiran yang mencoba berbagi pengetahuan dari apa yang saya dapat sehari-hari. Pengalaman ini saya tuangkan di tulisan dengan tujuan baik agar pengetahuan dan pengalaman saya ini dapat bisa di pergunakan dan bermanfaat khususnya untuk diri saya pribadi dan umumnya untuk orang lain, sehingga saya beri nama Web saya ini dibalikseo.com yang filosofinya adalah dibalik pengetahuan yang saya dapat.