Cara Menambahkan Breadcrumbs SEO Friendly

Breadcrumbs SEO Friendly, Cara Memasang Breadcrumbs SEO Friendly, Cara Menambahkan Breadcrumbs

Cara Menambahkan Breadcrumbs SEO Friendly - Breadcrumbs merupakan menu navigasi yang umumnya dapat kita temukan pada halaman blog dengan ciri-ciri berupa link menuju halaman home atau halaman utama, kemudian diikuti dengan label dan judul postingan yang sedang diakses.

Dalam menerapkan SEO pada blog, kita tidak hanya melakukannya ketika membuat artikel saja, tapi juga pada template blog. Memasang Breadcrumbs ini merupakan optimasi SEO yang kita terapkan pada template blog untuk membantu mesin pencari seperti Google merayapi halaman situs blog kita.

Di sisi lain, Breadcrumbs juga berfungsi untuk memberikan informasi kepada pengunjung mengenai halaman yang sedang di akses, mulai dari label hingga judul halaman yang sedang dikunjungi.

Breadcrumbs ini menjadi faktor pendukung SEO yang penting untuk blog. Untuk itu, pada kali ini Panduan Blog akan membagikan Breadcrumbs yang memiliki kelebihan SEO Friendly. Breadcrumbs ini juga sudah terbukti terindex di berbagai mesin pencari juga sudah Valid HTML5.

Contoh Breadcrumb
Contoh Breadcrumb

Cara Menambahkan Breadcrumbs SEO Friendly


Pertama-tama, buka dashboard Blogger, kemudian pilih menu Tema, lalu klik tombol Edit HTML. Silahkan tambahkan kode dibawah ini kedalam template blog, lebih tepatnya sebelum kode ]]></b:skin>.

/* 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;}

Selanjutnya, silahkan cari kode dibawah ini pada template blog.

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


Langkah terakhir, silahkan tambahkan kode HTML Breadcrumbs dibawah ini tepat sesudah kode yang ditulis 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>

Pada tahap ini, anda sudah berhasil memasang Breadcrumbs SEO Friendly. Selanjutnya silahkan tunggu sampai Google merayapi semua halaman situs blog.

Anda juga bisa menggunakan Alat Pengujian Data Terstruktur untuk mengetahui jika terjadi kesalahan pemasangan kode breadcrumbs pada template blog anda.

Itulah tutorial mengenai Cara Menambahkan Breadcrumbs SEO Friendly semoga bermanfaat untuk anda. Apabila ada hal yang ingin ditanyakan, silahkan bertanya melalui kolom komentar dibawah ini, terima kasih dan selamat mencoba.