Optimalisasi SEO On Page dengan Menu Navigasi Breadcrumbs

Bagi blogger pemula, SEO On Page blog sangat diperhatikan. Kecenderungan memperbanyak konten postingan dengan jumlah banyak dalam tempo singkat sering menjadi senjata andalan blogger pemula untuk mempercepat gemuknya isi blog. Hal ini tidak ada salahnya, justru baik karena dengan konten yang banyak, search engine pun juga menyukainya.

Tetapi, alangkah bijaknya, sejenak memperhatikan struktur on page pada halaman postingan. Sudah benarkah susunan dan tata letaknya. Maksud yang lebih fokus lagi adalah, sudah adakah menu navigasi yang menunjukkan pola home hingga ke artikel dalam postingan blog?

Definisi Breadcrumbs

Menu navigasi ini dikenal dengan breadcrumbs. Navigasi Breadcrumbs adalah salah satu menu yang berada di bagian atas posting dan menunjukkan urutan isi halaman dari HOME >>> Category (labels) >>> Sub category (judul postingan). Pembuatan navigasi breadcrumbs berguna juga buat optimasi SEO yaitu membantu memberi kepadatan keyword dan pemetaan pada search engine terutama Google Search. Lihat contohnya berikut ini :

Cara menambahkan menu navigasi Breadcrumbs

Jika pada page post blog milik sahabat belum ada menu navigasi breadcrumbs tersebut, ada baiknya menyimak uraian berikut untuk menempatkan breadcrumbs pada halaman postingan. Berikut tahapannya.

1. Masuk ke akun blogger. Pilih template, lalu Edit HTML.

2. Cari kode ]]></b:skin> dengan Ctrl+F agar lebih mudah mencarinya.

3. Copy paste kode berikut tepat di atas ]]></b:skin>.

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

4. Kemudian cari kode <b:includable id='main' var='top'>. Hapus dan ganti dengan kode berikut.

<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='http://bloging-gampang.blogspot.com' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div> <b:else/> <b:if cond='data:blog.pageType == "item"'> <!-- 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='http://bloging-gampang.blogspot.com' property='v:title' rel='v:url'>Home</a></span> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast == "true"'> » <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span> </b:if> </b:loop> » <span><data:post.title/></span> </div> <b:else/> <div class='breadcrumbs'> <span><a expr:href='http://bloging-gampang.blogspot.com' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div> </b:if> </b:loop> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <!-- breadcrumb for the label archive page and search pages.. --> <div class='breadcrumbs'> <span><a expr:href='http://bloging-gampang.blogspot.com'>Home</a></span> » <span>Archives 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='http://bloging-gampang.blogspot.com'>Home</a></span> » <span>All posts</span> <b:else/> <span><a expr:href='http://bloging-gampang.blogspot.com'>Home</a></span> » <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'/>

Keterangan:
Silakan ganti http://bloging-gampang.blogspot.com dengan kode data:blog.homepageUrl. Kemudian Akhiri dengan Save template, dan lihat hasilnya.

Dengan penambahan menu navigasi breadcrumbs ini diharapkan blog milik sahabat lebih SEO friendly dengan search engine. Semoga bermanfaat dan selamat mencoba.