Hai kawan blogger, pada kesempatan kali ini saya akan menjelaskan tata cara memasang breadcrumbs atau navigasi pada postingan blog kalian dengan mudah. breadcrumbs ini sangat berguna buat blogger yang ingin mengoptimasi seo pada blognya.
Tetapi apa itu breadcrumbs ? mungkin banyak orang yang belum tahu tentang breadcrumbs, jadi bagi yang belum mempunyai breadcrumbs kalian bisa mencobanya disini, kalian akan mendapatkan posisi terbaik pada mesin pencarian seperti google.
Apa itu Breadcrumbs ?
Gambaran breadcrumbs seperti begini :
Breadcrumbs adalah sebuat menu navigasi yang biasanya itu berada di atas judul pada postingan anda atau dibawah pada postingan anda di google seperti gambar diatas ini. Dan anda juga bisa melihatnya pada bagian atas judul artikel saya ini.Struktur ini tentunya sangat berbeda pada WordPress. Struktur pada blogger ini hanya Home/beranda setelah itu label anda. Apabila anda memiliki label pada postingan anda, maka akan breadcrumbs akan muncul seperti:
Home / Tips Blogger / Tutorial Blogger / Cara Memasang Breadcrumbs
Home >> Tips Blogger >> Tutorial Blogger >> Cara Memasang Breadcrumbs
Mungkin diluar dari kesadaran anda, breadcrumbs telah terpasang di blog anda. Mengapa ? karena rata-rata blog yang telah terpasang breadcrumbs yaitu blog yang mempunyai template SEO Friendly atau bisa juga template yang telah tersedia breadcrumbs yaitu template yang dibuat pada tahun 2014 keatas.
Tetapi juga tidak semua template tahun 2014 keatas ini breadcrumbsnya telah terindex di google. Karena ada juga sebagian dari blogger di indonesia ini tidak suka memasang breadcrumbs/navigasi pada blognya. Mungkin para blogger yang tidak menyukainya mempunyai alasan tersendiri.
Cara Memasang Breadcrumbs Atau Navigasi Pada Postingan Blog
Breadcrumbs dapat diindex dengan mudah oleh mesin pencari, misalnya mesin pencarian google. Juga anda dapat melihatnya di webmaster tools pada bagian structured data. Breadcrumbs juga berfungsi untuk mengoptimalkan SEO pada blog anda. dibawah ini tutorial untuk membuat breadcrumbs dengan mudah :
- Pertama yang anda lakukan yaitu mengunjungi dashboard blog anda.
- Pada saat di dashboard blog anda, setelah itu anda menuju ke "Tema" pada menu samping kiri pada dashboard blog anda, terus lanjut pilih "Edit HTML".
- Nah pada bagian "Edit HTML" Maka akan muncul banyak HTML, CSS, dan juga JavaScript.
- Disitu anda tekan "Ctrl+F" pada keyboard anda dan cari kode ]]></b:skin> Setelah ketemu kemudian copy dan paste kode dibawah ini tepat dibawah ]]></b:skin>
.breadcrumbs{padding:20px 30px;background:#ffe4ad;color:#686050;margin-bottom:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;box-shadow:inset 0 0 0 5px #ebd099}
.breadcrumbs a {color:#686050;}
.breadcrumbs a:hover{color:#686050;text-decoration:underline;}
- Setelah itu, Cari kode <b:includable id='main' var='top'> dan ganti dengan kode dibawah ini:
<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>
- Setelah di copy semua, kemudian Simpan Template anda.
Mengapa anda harus memasang breadcrumps pada blog anda, karena dapat membuat pengunjung blog anda jadi nyaman, jadi yang didahulukan yaitu kenyamanan pengunjung anda, dan juga breadcrumps tidak memerlukan link atau url yang panjang seperti gambar dibawah ini :
Mengapa salah ? karena para pengunjung google, setelah melihat artikel anda, para pengunjung itu jadi merasa agak pusing dan aneh ketika mereka melihat URL itu, ini untuk bagi orang awam dalam dunia internet. Bukan cuman orang yang baru di internet, bahkan orang yang udah lama menggunakan internet, juga agak aneh melihat itu. Jadi alangkah bagusnya menggunakan breadcrumbs.
Mungkin itu saja yang dapat saya jelaskan tentang Cara Memasang Breadcrumbs Atau Navigasi Pada Postingan Blog, mudah-mudahan bermanfaat dan berguna bagi orang yang membutuhkan breadcrumbs. karena semua orang mempunyai alasan masing-masing untuk mempunyai breadcrumbs. Sekian Wassalam.
Cara Memasang Breadcrumbs Atau Navigasi Pada Postingan Blog
4/
5
Oleh
naim
