Xceria Blogger Indonesia

Cara Buat Navigasi Breadcrumb SEO Friendly di Blogger

Buat Navigasi Breadcrumb di Blogger
Cara membuat navigasi breadcrumb di blogger. Navigasi breadcrumb merupakan link/tautan yang berfungsi memberikan petunjuk mengenai lokasi atau kategori dari sebuah artikel dan memungkinkan anda untuk menemukan halaman dasar dari artikel yang sedang dibaca.

Link yang ditampilkan di sini adalah link dimana artikel anda berada atau bisa disebut sebagai lokasi dari artikel anda. Navigasi breadcrumb ini biasa diletakkan di atas judul artikel/postingan. Lihat contoh navigasi breadcrumb berikut.

Home » tutorial blog » Cara Membuat Navigasi Breadcrumb di Blogger

Ada 3 manfaat/kegunaan dari navigasi breadcrumb, yaitu:
  • Memperindah tampilan halaman/artikel.
  • Memudahkan pengunjung dalam menelusuri blog.
  • Mengoptimalkan halaman di search engine (mesin pencari).
Yang terpenting dari 3 hal di atas tentu adalah "mengoptimalkan halaman di search engine" atau sering disebut SEO. Bagi yang belum mengetahui mengenai SEO, silahkan baca artikel mengenai apa itu SEO.

Breadcrumb navigation mungkin tidak sepenting keyword dalam SEO. Tapi yang jelas navigasi breadcrumb ini merupakan salah satu dari faktor SEO. Jadi, sedikit banyaknya juga akan mempengaruhi posisi blog anda di search engine, terutama google.

Cara memasang navigasi breadcrumb di blogspot
Navigasi breadcrumb di blogspot akan tampil berdasarkan label/tag dari postingan anda. Berikut tutorialnya.
  1. Masuk ke blogger.
  2. Pilih menu Tata Letak (Layout) » Edit HTML.
  3. Centang tulisan Expand Widget Templates.
  4. Cari kode berikut. Anda akan menemukan lebih dari satu kode seperti ini. Pilih yang kedua, yang berada di dalam / di bawah kode <b:includable id='post' var='post'>.

    <b:if cond='data:post.title'>

  5. Tambahkan kode berikut di bawahnya.

    <b:if cond='data:blog.pageType == "item"'>
    <a expr:href='data:blog.homepageUrl'>Home</a> &#187;
    <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
    <b:if cond='data:label.isLast != "true"'>,</b:if>
    </b:loop>
    &#187;
    </b:if>
    <data:post.title/>
    </b:if>

  6. Simpan template.
Anda bisa menambahkan garis di bawah navigasi dengan menambahkan kode <hr/> di bawah kode <data:post.title/> di atas.

Sekarang lihat hasilnya. Jika sudah berhasil, berarti Anda sudah menjalankan salah satu tips SEO.

Salam sukses!

64 comments

ok sob mateb nih.... blog q juga dah tak pasang

balas

wah.... makasih banyak, sob, breadcrumbsnya udah saya praktikkan di beberapa blog saya yang lain :D

balas

wah, ane pakenya joomla sob :)

balas

yah, saya pake WP. gimana, bs ga mas?

balas

@yroma >> Kalo untuk wordpress, bisa menggunakan plugin NavXT atau plugin breadcrumb lainnya...

balas

Keren mas tutornya... Tengkyu

balas

sip... dah muncul di blog ane ...

makasih...

balas

berhasil mas maksih banyak mas salam kenal

balas

ok bnget deh, pngen lgsg dcoba. makasi bos infonya,,

balas

salam kenal
blog saya udh ada menu navigasinya tapi saya msh bingung untk membuat link agar bisa diklik kemenu lain sesuai setingannya, thx

balas

@Don Leman >> maksudnya link yang gimana? kalo link biasa ini kode html-nya:
<a href="http://contoh.com/link-tujuan.html">nama link</a>

balas

wah keren kk sangat berguna bagi perkembangan blogku http://indo-manga.co.cc

balas

dah tak coba. n hslnya? mkn sip ja tampilannya. thank's...........

balas

matur thanks you,, dah 2 tahun pingin bikin breadcrum bru sa buat sekarang,,,

jangan lupa maen ke blog q............. di jamin g kan nyesel

balas

Thankz informasinya, breadcrumbsnya dah berhasil saya pasang nih...

balas

Siiip gan, aku praktikin nih,..thank ilmunya ya,...
mampir dong ke gubug ane,...www.pojokbisnis82.blogspot.com

balas

waah.. baru tau nih. thank infonya

balas

Thanks mas dah berhasil dipasang di blog saya..

balas

Gue ga tau dimananya kode kode tersebut

balas

Sudah dicoba dan berhasil. Thks

"The Genuine Idea"

balas

tx gan......dah keliatan di blog gw...
seppp............
jgn lp berkunjung ke blog gw ya gan !!! justngeshare.blogspot.com

balas

waduhhh ini dia satu lagi artikel tutor yg sangat bermanfaat, skali lagi makasih berat ya kang..

balas

Oh itu yg dimaksud breadcrumb!!! hehe...bru tau nch maklum bru belajar ngeblog, ok dch nti aku cba praktekin. Thx ya sobat atas infonya, btw jalan2 jg dunk ke http://this-4-all.blogspot.com

balas

ok bozz, sudah saya praktekin dan berhasil, berkunjung ya ke blog ku dan berikan komentarnya jg! hehe...

balas

sekalian silaturahmi sambil mencari teman, saya mampir lagi nch kang mau ngajak tuker link blh gk? link blog ini sudah saya pasang di blog saya dibagian Link Exchange.
Th4nks

balas

It is so good and informative! Thanks for your good sharing!

balas

I like your post very much! It is so unique and creative!

balas

kk gimana membuat isi dari setiap menu navigasinya kk, contoh TOP8 JIKA di KLIK nanti muncul laman baru/ada isinya gimana buatnya kk
ini email aku kk tian_poinblank@yahoo.com kasih tau ea

balas

Terima kasih boz atas artikelnya, saya juga sudah coba pasang di blog saya dan berhasil dgn baik...(maklum saya blogger pemula) :)

balas

thanks infonya gan, langsung saya praktekin yach...

balas

makasih gan, mantabs...

balas

Terima kasih boz atas artikelnya, saya juga sudah coba pasang di blog saya dan berhasil

balas

makasih ya :)udah ane pasang

balas

terimakasih aku pake lagi di blog aku

balas

makasih banyak atas Infonya... sudah berhasil. Mantap abis.

balas

slm kunjung...thanks y mas ...
buat tips nya,,,
sukses slalu...

balas

wah,,ane balik lagi Gan.. .nih post mantebb bangget.. .jaoh lebih simple dari cara-cara yang lain. .sekarang ane udah succesfull . .. kalo gak percara,liat aja di sini nih www.asoka-site.co.cc

sekalian ane blogwalking Gan. .beruntung dapet nih Tutorial. Nice post

balas

di pasang tambah manis

balas

thank dah banyak membantu mas.. tapi kok di telplate saya gak ada ya kode step 4.. ada pencerahan ..??

balas

makasih banyak infonya, jaya slalu..

balas

Thanks, sobat atas triknya...
sudah saya coba..

balas

Thx...blog sprti ini yg saya cari..
Blogging As Idiots

balas

wow... keren.. navigasi breadcrumb...
gan..
rajin-rajin posting info dan trik menarik kaya gini ya..
Salam kenal... ^_^

balas

wah mantaf sob... thank ya

balas

wah, keren abis gan

balas

alhamdulilah berhasil,makasih infonya brother... :)

balas

Thanks, i,ve try it and work in my blog.
Good job :)

balas

Terimakasih bang. akhirnya Saya bisa

balas

uhui akhirnya blog gw tampil cantik dg breadcrumb, thanks gan ! salam kenal. moga2 Anda sehat selalu n dimudahkan rizkinya ama Allah Swt

balas

makasih kang
berhasil dipasang :D

balas

wew. jadi ini yang namanya breadcrumb, baru tauu ane. wkwwkk

balas

Bisa dicoba nih caranya. Makasih buat infonya mas

balas

Mantaap Gan Artikelnya, Izin nyimak saja agan :)

balas

gan, sudah coba di blog ane yg satunya di http://sudutnusantara.blogspot.com
kalau masih muncul di data struktur itu kenapa yaa gan?
thanks

balas

maksudnya data struktur apa ya? :v

balas

akhirnya ketemu juga nih trik nya untuk navigasi breadcrumb
jgn lupa mampir di mari www.reddokuraudo.com

balas

Jadi keren gan blognya kalau dipasang navigasi thanks tutornya

balas

breadcrumbs blog saya terdeteksi eror di data terstruktur, gimana cara mengatasinya ya?

balas

baru tau itu nama navigasi breadcrumb,,kirain navigasi biasa aja

http://decisionsystem.blogspot.com

balas

Bagus om ilmunya, terima kasih dan ijin mengunaakannya di webs saya ...

balas
:) :( ;) :D =D :w :c :d -) -| :v =( ^: :o :C :-

Silahkan berkomentar sesuai dengan artikel. Dilarang berkomentar spam dan menulis iklan!

« »
 
Back to top