Cara Mudah Membuat Breadcrumb di Blogger Agar Lebih SEO

Pada kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana cara membuat sebuah Breadcrumb di blogger agar blog kamu menjadi lebih SEO dan pastinya Google akan memberikan nilai plus buat blog kamu. Tapi sebelum memasuki tutorialnaya saya akan memberitahukan apa itu Breadcrumb.


Apa Itu Breadcrumb ?

Breadcrumb adalah sebuah menu navigasi yang biasanya berada di atas judul postingan suatu blog ataupun website. Breadcrumb ini cukup penting sebagai faktor pendukung SEO di blog, karena dengan breadcrumb kita bisa menginformasikan kepada pengunjung mengenai kategori dari artikel yang sedang mereka baca.
Cara Mudah Membuat Breadcrumb di Blogger Agar Lebih SEO

1. Silahkan kamu login ke Blogger.com dengan menggunakan Gmail kamu.
2. Masuk ke menu TEMA > klik Edit HTML.
3. Cari kode berikut ]]></b:skin> atau </style> kemudian silahkan tambah kode CSS dibawah ini pastekan tepat DIATAS kode tersebut.

/* Breadcrumbs */
.breadcrumbs{padding:20px 30px;background:#fff;margin-bottom:20px}
.breadcrumbs a,.post-info a {color:#19abea;}
.breadcrumbs a:hover,.post-info a:hover {color:#454545;}

4. Cari kode HTML yang hampir mirip seperti dibawah ini.

<b:includable id='main' var='top'>...</b:includable>

5. Kemudian tambahkan kode HTML breadcrumb tepat di bawah kode di atas.

<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' title='Home'>Home</a></span> / <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Breadcrumb Untuk Halaman Pos -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
Anda di sini : <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
/ <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?max-results=5&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
/ <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span>Without Label</span> / <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- Breadcrumb Untuk Label Search dan Search Pages -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>Archived 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' title='Home'>Home</a></span> / <span>All Post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

6. Selanjutnya silahkan klik SIMPAN dan Selesai.

Untuk mengetahui breadcrumb sudah terpasang atau belum dengan benar di blog, Anda bisa cek di sini Google testing tool.

Bagaimana mudah bukan tutorial Cara Mudah Membuat Breadcrumb di Blogger Agar Lebih SEO untuk kamu yang masih bingung atau error silahkan komen dikolom komentar dibawah artikel ini.
Tampilkan Komentar
Sembunyikan Komentar

2 Responses to "Cara Mudah Membuat Breadcrumb di Blogger Agar Lebih SEO"

  1. Sangat bermanfaat artikepnya, sangat membntu thanks

    ReplyDelete
    Replies
    1. Alhamdulillah terima kasih Saudah berkunjung di blog saya ini.

      Delete

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar semua.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel