Jumat, 21 September 2018

Cara Memasang Breadcrumb Navigation pada Blog (SEO Friendly)

Bagi sobat yang belum tau apa itu breadcrumb, breadcrumb itu adalah history tempat artikel kita dan biasa dipakai di forum2, misalkan sobat post artikel di parent kategori “SEO” terus ada subkategorinya “tutorial blog”, dst. Intinya, breadcrumb digunakan untuk memudahkan pembaca supaya mengetahui kategori dan sub kategori dari bacaan yang sedang dibaca.
Nah terus apa dong hubungannya dengan seo terutama seo on page? hubungan intim kah? hehehe... hubungannya dengan seo, terutama seo google adalah sesuai instruksi dari simbah google sendiri. Neh kutipannya
navigasi breadcrumb
makanya, memasang breadcrumb navigation adalah salah satu bagian dari optimasi web atau blog sobat karena memang dia disukai oleh mesin pencari (seo friendly). Selain mempercantik blog kita juga bisa menambahkan poin seo juga pada blog kita. Oke kita langsung aja ke cara memasang breadcrumb navigation pada blog.
  1. Log in ke blogger.com
  2. Pilih design atau rancangan
  3. Pilih edit html,centang expand temlate widget supaya semua kode muncul semua dan jangan lupa back up template untuk jaga jaga dengan cara mendownload full template
  4. Lalu Cari kode tag ]]></b:skin>> dan letakkan kode berikut ini diatasnya .
    breadcrumbs{border-bottom:1px dotted #999;margin:2em 0 0.5em;padding:0 0 0.5em;font-size:10px}
     
  5. Cari kode <b:includable id='main' var='top'> 
  6. Jika sudah ketemu , letakkan kode berikut ini diatas kode no.6
    <b:includable id='breadcrumbs' var='post'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>

    <p class='breadcrumbs'>

    <span class='post-labels'>

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

    Anda Berada di&#160; :

    <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &gt;

    <b:loop values='data:post.labels' var='label'>

    <b:if cond='data:label.isLast == &quot;true&quot;'>

    <a expr:href='data:label.url' rel='tag'> <data:label.name/></a>

    </b:if>

    </b:loop>

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

    &gt; <b><data:post.title/></b>

    </b:if>

    </b:if>

    </span>

    </p>

    </b:if>

    </b:includable>
     
  7. Cari kode <b:loop values='data:posts' var='post'> biasanya ada lebih dari 1, tergantung templatenya, template saya saja ada 4 kode yang sama, pilih kode yang tepat dibawah letak kode kita di poin 6 tadi dan ketikkan kode berikut dibawahnya
    <b:include data='post' name='breadcrumbs'/> 
  8. Save template .
Selesai, sekarang blog sobat sudah mempunyai navigation breadcrumb yang sifatnya seo friendly. Semoga artikel tentang cara memasang breadcrumb navigation pada blog ini bermanfaat untuk sobat.