SEO Friendly.
Breadcrumbs ialah sebuah hidangan navigastion atau navigasi yang kebiasaannya terletak di atas sebuah judul postingan Blog. Breadcrumbs berupa sebuah link aktif yang menuju home ataupun halaman utama yang di ikuti dengan label sampai judul dari postingan yang di buka.
Menggunakan Breadcrumbs sangat bermamfaat sebab Breadcrumbs ialah peranan penting sebagai faktor pendukung SEO Friendly di blog. Karena dengan menampilkan Breadcrumbs pada situs halaman artikel blog akan membantu para pengunjung dalam mengenai kategori dari artikel yang sedang dibacanya.
Sepertinya semuanya sudah paham dengan apa yang tertulis di atas, jadi alngkah baiknya kalau kita lanjut cara memasang breadcrumbs yang seo friendly di bawah ini, silahkan simak.
Cara Memasang/Membuat Breadcrumbs SEO Friendly
- Pertama-tama pastikan kalian telah login ke blog kalian masing-masing, kalau belum silahkan www.blogger.com.
- Selanjutnya silahkan klik hidangan Tema > Edit Html.
- Kemudian silahkan copy arahan CSS di bawah ini sebelum ]]></b:skin> atau </style>.
/* 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;} - Jika sudah menerapkan arahan CSS diatas, selanjutnya silahkan cari arahan HTML post <b:includable id='main' var='top'>...</b:includable>.
- Kemudian yang terakhir silahkan copy arahan di bawah ini sempurna di bawah arahan di atas.
<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 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 + "?max-results=5"' 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 == "archive"'> <!-- 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 == "index"'> <div class='breadcrumbs'> <b:if cond='data:blog.pageName == ""'> <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> - Sekarang silahkan klik simpan templeat.
- Untuk memastikan apakah Breadcrumbs sudah terpasang di blog kalian boleh memakai toll ini, silahkan klik link Google Testing Tool.
Sampai disini, berakhirlah artikel wacana cara memasang breadcrumbs di blog, biar bermamfaat dan biar sukses.