Memasang Breadcrumbs pada Template blogger

Breadcrumbs biasanya muncul secara horizontal di bagian atas halaman blog atau Web, sering di bawah judul bar atau header. Pada blogger Breadcrumbs hanya Home kemudian Label. Apabila memiliki beberapa label, maka akan terbaca seperti ini :

Home >> Tutorial >> SEO >> Cara Memasang Breadcrumbs

Breadcrumbs dapat diindex dengan mudah oleh mesin pencarian google. Anda dapat melihatnya di Google Search Console pada bagian structured data. Breadcrumbs juga berfungsi untuk mengoptimalkan SEO pada blog anda.

Sebenarnya banyak tutorial yang menjelaskan cara membuat breadcrumbs di Blogger. Tapi khusus disini saya akan menjelaskan cara membuat breadcrumbs valid AMP dan juga valid HTML 5. Perbedaannya terletak pada markup yang digunakan serta struktur yang dibuat

Cara Memasang Breadcrumbs pada template blogger

Untuk memasang Breadcrumbs pada template blog anda, Log in ke akun Blogger anda kemudian pada Dashboard Klik Tema > Edit HTML selanjutnya ikuti langkah-langkah dibawah ini

Langkah 1 : Simpan kode ini di atas ]]></b:skin>, untuk blog berbasis amp simpan pada tag style css halaman postingan.

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

Langkah 2 : Cari kode <b:includable id='main' var='top'> kemudian ganti dengan :

<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'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- 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'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
  &#187; <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives 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'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <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 3: Simpan Template Anda.

Untuk mengecek apakah sudah terpasang dengan baik silahkan kunjungi :

https://search.google.com/structured-data/testing-tool

Mungkin itu saja yang dapat saya jelaskan tentang cara memasang breadcrumbs pada template blogger valid AMP dan HTML5, mudah-mudahan bermanfaat dan berguna bagi orang yang membutuhkan breadcrumbs.

Share this post