Tutorial Cara Membuat dan Memasang Breadcrumb SEO Friendly

Tutorial Cara Membuat dan Memasang Breadcrumb SEO Friendly. Sebagai blogger newbie alias blogger pemula, tentu saja saya mencari segala informasi tentang dunia blog, istilah istilah blog, tentang seo dan lain sebagainya.

Sampailah saya ke satu istilah dalam dunia blog yaitu breadcrumbs yang sebenarnya istilah breadcrumbs sudah cukup populer karena mungkin sudah banyak yang share mengenai hal tersebut. Selain cukup populer ternyata breadcrumb mempunyai fungsi yang penting untuk pengunjung blog dan dalam hal SEO fungsinya juga penting.

Sebelum masuk ke tata cara membuat dan memasang breadcrumb, ada baiknya kita bahas dulu pengertian, fungsi dan juga manfaat dari breadcrumb itu sendiri terhadap blog yang kita kelola.

Pengertian breadcrumb (menurut deskripsi saya sendiri) adalah merupakan suatu bentuk navigasi atau petunjuk yang ada pada blog yang menunjukan kepada pengunjung blog posisi dari kategori artikel atau halaman yang sedang dia buka.

Breadcrumb bentuknya berupa deretan link horizontal sedangkan posisi dari breadcrumb pada halaman artikel yang dibuka biasanya terletak di atas judul artikel blog (contohnya gambar diatas) atau ada juga yang dibawah judul artikel letaknya.

Dalam hal fungsinya breadcrumbs mempunyai fungsi sebagai berikut:

• mempermudah para pengunjung blog dalam menjelajah blog yang kita kelola.
• dengan link yang ada pada breadcrumbs, dapat membantu pengunjung blog dalam hal mencari artikel artikel yang berhubungan dengan artikel yang sedang dibuka.
• sebagai petunjuk bagi pengunjung blog tentang posisi artikel yang sedang dibuka.

Nah, dilihat dari fungsinya dengan adanya breadcrumbs pada blog menurut saya sangat penting untuk kemudahan pengunjung blog dalam mendapatkan artikel artikel yang saling berhubungan yang pengunjung blog inginkan.

Sedangkan manfaat dari breadcrumbs adalah selain telah disebutkan dalam fungsi diatas, breadcrumbs juga akan menambahkan kata kunci atau keyword dan judul yang terstruktur pada link blog sehingga berpengaruh dalam hal posisi index pada search engine dan bisa menjadikan blog kita lebih SEO friendly.

Apabila pada template blog yang anda pasang telah terpasang breadcrumb maka tidak perlu repot repot membuatnya lagi tapi apakah breadcrumbs yang terpasang di template blog anda merupakan breadcrumbs yang bisa terindex oleh search engine?

Contohnya bisa dilihat gambar dibawah apakah breadcrumbs pada template anda bisa terindex atau tidak oleh search engine (kotak merah adalah label breadcrumbs).

contoh breadcrumbs yang terindex oleh google

Apabila breadcrumbs pada template anda tidak bisa terindex oleh search engine, anda bisa pasang kode breadcrumbs yang caranya sebagai berikut:

• log in ke akun blog anda
• pada dashboard klik template dan klik juga edit HTML
• cari kode ]]></b:skin> atau bisa juga kode </style>
• silahkan copy kode dibawah ini dan paste kan diatas kode ]]></b:skin> atau kode </style> tadi

.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}

• selanjutnya cari kode <b:includable id='main' var='top'> dan ganti kode tersebut 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 == &quot;static_page&quot;'><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div><b:else/><b:if cond='data:blog.pageType == &quot;item&quot;'><!-- breadcrumb for the post page --><b:loop values='data:posts' var='post'><b:if cond='data:post.labels'><div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'><span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span><b:loop values='data:post.labels' var='label'>&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span></b:loop>&#187; <span><data:post.title/></span></div><b:else/><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div></b:if></b:loop><b:else/><b:if cond='data:blog.pageType == &quot;archive&quot;'><!-- breadcrumb for the label archive page and search pages.. --><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives 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'>Home</a></span> &#187; <span>All posts</span><b:else/><span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span></b:if></div></b:if></b:if></b:if></b:if></b:if></b:includable><b:includable id='main' var='top'><b:include data='posts' name='breadcrumb'/>

•  simpan (save) template anda.

Untuk melihat hasilnya, kita bisa cek hasilnya di Google Reachsnipet Tools dengan cara klik https://developers.google.com/structured-data/testing-tool/ setelah itu anda klik ambil URL dan masukan url artikel blog anda. Untuk lebih jelasnya silahkan lihat gambar dibawah

langkah pertama

langkah kedua

dan apabila hasilnya seperti gambar dibawah maka anda berhasil memasang breadcrumbsnya

Dan satu hal yang penting dalam membuat breadscrumbs adalah biasakanlah selalu membuat suatu kategori atau label dalam setiap artikel yang anda buat yang letaknya ada pada setelan entri pada sebelah kanan halaman ketika anda membuat suatu artikel apabila tidak maka adanya breadcrumb pun akan menjadi percuma saja.

Selesai sudah mengenai tutorial cara membuat dan memasang breadcrumb yang SEO friendly, kurang lebihnya saya mohon maaf dan semoga bermanfaat.