Breadcrumbs SEO Friendly dan Valid HTML5 - Salah satu hal yang penting untuk SEO bagi blog kita adalah breadcrumbs. Bagaimana tidak, breadcrumbs ini juga berpengaruh dalam hasil di SERP. Selain muncul di SERP, ini juga terdapat di atas postingan.
Dan semuanya di sini, saya yakin sudah tau tentang breadcrumbs. Penulisan breadcrumbs sendiri adalah Home (URL Homepage) kemudian dilanjutkan dengan Label. Itu jika berada di hasil pencarian. Apabila yang berada di atas postingan, penulisannya adalah Home kemudian dilanjutkan Label lalu judul postingannya.
Contohnya seperti gambar berikut ini.
Gambar di atas adalah screenshots hasil pencarian di SERP Google pada blog saya yang satunya. Di mana, yang saya beri tanda panah dan tanda kotak itulah yang namanya breadcrumbs.
Sekarang, saya akan menjelaskan tentang breadcrumbs yang SEO Friendly. Tapi, tidak hanya SEO Firiendly, tapi juga valid HTML5 tentunya. Bagaimana cara memasangnya?
Langkah Pertama
Ganti kode <b:includable id='main' var='top'> dengan kode di bawah ini.
<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' title='Home'>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'>
<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 + "?max-results=6"' itemprop='url' expr:title='data:label.name'><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>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' title='Home'>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' title='Home'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Home'>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>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>
Langkah Kedua
Nah, pada langkah ini, kita hanya memberikan sentuhan CSS saja. Tapi, jika saya lihat, banyak blogger di luar sana yang suka menggunakan font awesome agar lebih cantik. Dan tutorial font awesome ini memang berasal dari Kang Ismet. Tapi nggak tau kenapa, link CSS nya tidak valid HTML5. Memang, ada sebagian blogger yang memilih menyimpan CSS-nya sendiri di Google Drive, agar bisa valid HTML5. Tapi, saya lebih suka praktis dan memilih tanpa ada font awesome-nya. Ketimbang menggunakannya, tapi link CSS-nya tidak valid HTML5. Toh, tanpa ada font awesome, breadcrumbs tetap kelihatan keren dan elegant. Dan font awesome pada breadcrumbs juga bukan merupakan faktor kan bahwa blog kita bisa bagus dalam SEO-nya.
Maka dari itu, saya akan tawarkan kepada Anda CSS sederhana tanpa font awesome tapi sudah valid HTML5. Dan untuk tampilannya, anda juga bisa memodifikasinya sendiri nanti. Berikut CSS-nya. Simpan di atas ]]></b:skin> atau </style>
.breadcrumbs{background:#555;padding:13px 20px 13px 15px;margin:0;font-size:13px;color:#fff;position:relative;}
.breadcrumbs a{color:#fff;text-decoration:none;transition:all 400ms ease-in-out}
.breadcrumbs a:hover{color:#ef7f67;text-decoration:none;}
Tapi, saya ingatkan. Jika anda tidak suka dengan breadcrumbs yang tanpa font awesome seperti di atas, Anda juga boleh menggunakan font awesome-nya dengan menyimpan CSS yang terdapat pada link font awesome-nya di Google Drive terlebih dahulu. Tapi, anda harus mem-validasikan dulu kodenya sebelum disimpan. Itu jika Anda ingin membuatnya valid HTML5. Tapi, jika tidak ingin, ya langsung saja gunakan link CSS yang ada di Blog Kang Ismet. Saya juga tidak memaksa. Ini hanya sebagai alternatif saja.
Semoga bermanfaat....
3 Komentar untuk "Breadcrumbs SEO Friendly dan Valid HTML5"
Bosan main poker sama ROBOT? Kapan untungnya?
Kini Hadir Game Terbaru ===>> GAME SAKONG
Mari.. bergabung bersama kami di ROYALQQ, main poker tanpa Robot 100% player vs player.
Deposit Minimum Rp. 15.000
www,royalqq,poker
Support Bank BCA, MANDIRI, BNI, BRI
add 2B68D666
Ayo segera bergabung dengan Agen Judi Poker Online Terbaik dan Terpercaya di Indonesia KacangMasPoker | www.kacangmaspoker.net | . Dapatkan Jackpot hingga Jutaan rupiah setiap harinya !!
• Bonus New Member & Next Deposit s/d Rp. 1.000.000,-
• Bonus Jackpot s/d Rp. 200.000,-
• Bonus TurnOver 0,5%
• Bonus Referral 20%
# LINE : pokerkcm
# BBM : pokerkcm
# WHATSAPP : +6287819742741
# Twitter : kcm__poker
# IG : kcm_p0ker
• 7 Games dalam 1 ID
| Texas Poker | Capsa Susun | Ceme | Domino QQ | Bandar Ceme | Super 10 | Omaha |
• BCA - BNI - BRI - CIMB - Danamon - Mandiri.
• Menerima Deposit via Go-Pay, Ovo & Pulsa Telkomsel / XL
Link Alternatif:
• www.kacangmaspoker.xyz
• www.kacangmaspoker.club
• www.kacangmaspoker.live
Silahkan berkomentar yang relevan. Jangan menyertakan link aktif di sini. Jika melanggar, komentar akan terhapus.
Emoticon :