Cara Mudah Membuat Breadcrumb di Blogger Agar Lebih SEO Dan Disukai Google

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.

Bagikan Artikel ini