Cara Memasang Breadcrumbs di Blogger (100% Berhasil)
Memasang Breadcrumbs berfungsi sebagai alat bantu navigasi untuk memudahkan pengujung mengetahui letak lokasi sebuah konten yang ada disitus Anda, seperti gambar dibawah ini :
"Memasang breadcrumb sangatlah penting bagi situs Anda dalam faktor pendukung SEO."
Nah, untuk pemasangannya terkadang sulit bagi pemula yang baru belajar ngeblog dan begitu juga saya yang hampir mencoba sekitar 9 kali namun belum sesuai dengan harapan karena tidak terdetek oleh Structured Data Testing Tool dan tidak munculnya Navigasi Breadcrumbs di atas postingan artikel.
Tetapi akhirnya saya menemukan teknik memasang Breadcrumb SEO yang benar diblognya KangIsmet dan 100% berhasil.
STEP 1 - Memasang Breadcrumbs
- Login ke Blogger
- Lalu pilih menu Template > Edit HTML
- Cari kode ]]></b:skin> letakan kode dibawah ini tepat diatasnya
.breadcrumbs{display:block;position:relative;background:#fff;padding:19px 9px 16px 22px;color:#666666;margin:0 0 18px 0;white-space:nowrap;overflow:hidden;font-size:110%;text-overflow:ellipsis;width:100%;border:1px solid #e3e3e3;border-radius:6px}
- Sekarang kode <b:includable id='main' var='top'> ganti dengan :
<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"">
<!-- Halaman Breadcrumb -->
<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" property="v:title" rel="v:url">Home</a></span>
<b:loop values="data:post.labels" var="label">
» <span typeof="v:Breadcrumb"><a expr:href="data:label.url" property="v:title" rel="v:url"><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"">
<!-- Halaman label search breadcrumb -->
<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 post</span>
<b:else/>
<span><a expr:href="data:blog.homepageUrl">Home</a></span> » <span>Post 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"/>STEP 2- Mengecek Breadcrumbs
- Silahkan kunjungi Structured Data Testing Tool
- Copy-Paste Url Artikel Anda
- Klik RUN TEST
Setelah itu akan tampil halaman stuktur data diblog Anda dan perhatikan apakah contoh menu breadcrumb Anda sudah terdektek, seperti gambar dibawah ini:
Jika kalian suka dengan artikel saya silahkan berbagi dengan teman Anda. Terima Kasih telah membaca sampai selesai.
