Cara Memasang Breadcrumb Blog Agar SEO Friendly
Nyampling ~ Cara Memasang Breadcrumb Blog Agar SEO Friendly. Halo sobat nyampling, kali ini saya akan mengulas sedikit tentang Breadcrumb dan Cara Memasangnya pada blog agar lebih SEO Friendly. Cara ini digunakan hampir seluruh blogger karena akan membuat blog mereka lebih SEO di page rank dan juga dapat memberi tauh si pengunjung karena terdapat keterangan jelas dari label yang mengacu pada isi dari artikel blog tersebut.
Breadcrumb adalah sebuah menu navigasi blog yang berisi tentang label dari judul artikel, biasanya terletak diatas judul postingan blog. Sehingga dapat memberitahu visitor bahwa artikel tersebut berasal dari label apa. Breadcrumb ini dimulai dengan link home / beranda blog kemudian mengarah ke jenis label artikel sehingga para visitor tauh terletak dimana artikel tersebut. Atau lebih tepatnya memberitahu kategori dari artikel yang dibaca visitor.
Bagi kalian yang memakai template premium tentu tidak akan memikirkan hal ini, tapi bagi kalian yang memakai template gratisan bawaan blogger maka kalian harus memasang breadcrumb ini karena template gratisan ini belum menampilkan breadcrumb ini dipostingan artikel.
A. MEMASANG BREADCRUMB DI BLOG
Simak langkah - langkah memasang breadcrumb pada blog agar lebih SEO.
Langkah #1. Login ke Blogger >> Template >> Edit Html >> Cari kode ]]></b:skin> atau </style>
Langkah #2. Tambahkan kode CSS berikut diatasnya
/* 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 #3. Cari kode di bagian Post seperti berikut
<b:includable id='main' var='top'>...</b:includable>Langkah #4. Tambahkan kode berikut dibawahnya
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<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 == "item"'>
<!-- 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 + "?max-results=5"' 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 == "archive"'>
<!-- 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 == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<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>Langkah #5. Simpan Template.
B. CARA CEK BREADCRUMB APAKAH TERPASANG
Untuk mengecek apakah breadcrumb sudah terpasang pada blog, simak langkah - langkah berikut ini:
Langkah #1. Langsung menuju ke Google Testing Tool.
Langkah #2. Kemudian masukkan url blog kalian untuk menguji apakah ada kode blog yang bermasalah atau tidak.
Langkah #3. Untuk mengecek Breadcrumb maka kalian tinggal masukkan "Cuplikan Kode" kemudian "Jalankan Pengujian".
Cuplikan kode bisa kalian masukkan dari kode yang dibuat di html blog tadi. Jika ada peringatan terdeteksi maka breadcrumb yang kalian buat berjalan dengan baik tak ada kesalahan. Setelah itu lihat dipostingan blog kalian jika sudah terdapat label contohnya seperti ini: Home >> Blogger >> Tutorial maka breadcrumb yang kalian buat berhasil.
Penutup
Demikian sedikit postingan tentang "Cara Memasang Breadcrumb Blog Agar SEO Friendly" Jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI. Semoga postingan ini dapat bermanfaat.