Wednesday, May 22, 2013

Breadcrumb Seo untuk Blogspot

Breadcrumb Seo untuk Blogspot. Breadcrumb berguna untuk memudahkan google untuk menelusuri isi dari blog kita, dan juga memudahkan pembaca melihat informasi letak artikel yang sedang dibaca. Breadcrumb letaknya berada di bawah menu header, dan diatas judul artikel yang sedang dibuka. Untuk lebih jelasnya, lihat contoh gambar dibawah ini.

breadcrumb seo untuk blogspot
Cara membuat breadcrumb seo untuk blogspot. Ikuti langkah-langkah dibawah ini.
  1. Login ke blogger, dari halaman dasbor pilih pengaturan template.
  2. Selanjutnya klik edit HTML dan cari kode <b:include data='top' name='status-message'/> dan masukan kode berikut ini diatasnya.
  3. <b:include data='posts' name='breadcrumb'/>
  4. Setelah itu cari kode <b:includable id='main' var='top'> dan masukan kode berikut ini diatasnya.
  5. <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'>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='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>
    <b:loop values='data:post.labels' var='label'>
     » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
    </b:loop>
     » <span><data:post.title/></span>
    </div>
    <b:else/>
    <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' 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='data:blog.homepageUrl'>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='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
    <b:else/>
    <span><a expr:href='data:blog.homepageUrl'>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>
  6. Save template, selesai.
  7. Jika ingin merubah tampilan breadcrumb, tambahkan kode css diatas ]]></b:skin>
  8. .breadcrumbs {
    padding:5px 5px 5px 0px;
    margin: 0px 0px 15px 0px;
    font-size:95%;
    line-height: 1.4em;
    border-bottom:3px double #e6e4e3;}
  9. Silakan ubah sendiri, kode css nya sesuai dengan yang kalian inginkan.
Dari sini, pembuatan breadcrumb sudah selesai. Sekarang mengecek breadcrumb di google. Breadcrumb yang terindeks google, tampilannya akan seperti gambar dibawah ini.

breadcrumb seo untuk blogspot

Cara ceknya:
  1. Kunjungi situs google http://www.google.com/webmasters/tools/richsnippets
  2. Selanjutnya masukan URL dari salah satu artikel di blog kamu.
  3. Klik Pratinjau, Selesai.
Setelah memasang breadcrumb seo di blog, google akan mengindeksnya dalam beberapa hari di hasil pencarian google. Silakan dibaca juga artikel lainnya tentang seo, yaitu tentang Belajar seo untuk blogger pemula Semoga Bermanfaat.

    No comments:

    Post a Comment