Cara Memasang Breadcrumb di Blog Terindeks Google Tanpa Error - Blogger Bandung

Cara Memasang Breadcrumb di Blog Blogger Blogspot - SEO Friendly Terindeks Google Tanpa Error Breadcrumb.

Breadcrumbs adalah fitur navigasi yang biasa tampil atau terletak di atas judul posting blog. Breadcrumb link terdiri dari link ke halaman depan (Home), halaman label, dan judul posting, seperti dalam gambar di atas.

Ada juga yang hanya Home dan Label.

Fungsi breadcrumbs adalah sebagai navigasi sekaligus tautan kedalam (internal link) di blog kita seperti disarankan Google agar konten blog mudah dieksplorasi pengunjung (meningkatkan pageviews).

Pengertian breadcrumbs  adalah navigasi yang berisikan link ke halaman depan, link label atau link ke halaman label, dan judul posting --sebagaimana gambar ilustrasi di atas.

Pada dasarnya Breadcrumb merupakan navigasi SEO sebaris dengan tautan internal yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke halaman depan dengan cepat.

Jadi simple-nya seperti ini : search engine selalu membaca label atau tags setiap postingan blog, karena saat ini google sudah tidah menggunakan meta tag keyword lagi untuk mengindeks suatu website/blog, maka yang jadi perhitungan google saat ini adalah meta description dan label (kategori).

Maka dari itu semakin relevan sebuah label dengan isi postingan (artikel) maka akan semakin mendapatkan kesempatan tampil di halaman depan google.

#1. Cara Memasang Breadcrumb di Blogspot

Berikut ini cara memasang breadcrumb di blog Blogger/Blogspt tanpa schema markup dari Makolis.

1. Tema > Edit HTML.
2. Copas kode berikut ini tepat sebelum kode ]]></b:skin>

.breadcrumbs {padding:5px 5px 5px 0;margin:0;font-size:95%;line-height:1.4em;border-bottom:1px solid #f1f1f1} 

3. Cari kode seperti ini :

<div class='post hentry'>

4. Copas kode berikut ini tepat setelah kode <div class='post hentry'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'> <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div>
</b:if>
</b:if> 

5. Simpan Template!

Breadcrumb di atas tidak terindeks Google karena tanpa schema markup.

#2. Cara Memasang Breadcrumb di Blog Plus Schema Markup

Berikut ini Cara Memasang Breadcrumb di Blogspot yang menggunakan schema markup sehingga terindeks Google.

1. Tema > Edit HTML
2. Copas kode CSS berikut ini di atas kode ]]></b:skin>

.breadcrumbs{font-size:.9rem!important;color:#707070;margin-bottom:15px}
.breadcrumbs a{color:#707070}

3. Copas kode berikut ini dan simpan di atas kode <b:includable id='comment-form' var='post'>

            <b:includable id='breadcrumb' var='posts'>
<b:if cond='data:view.isPost'>
<b:loop values='data:posts' var='post'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
<meta content='1' itemprop='position'/>
<span itemprop='name'><b:switch var='data:blog.locale'><b:case value='id'/>Beranda<b:default/>Home</b:switch></span></a>
</span>
<b:if cond='data:post.labels'>
<b:loop index='nomor' values='data:post.labels' var='label'> &amp;nbsp;&#8250;&amp;nbsp;
  <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<meta expr:content='data:nomor+2' itemprop='position'/>
<a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' expr:title='data:label.name' itemprop='item' rel='nofollow'>
  <span itemprop='name'><data:label.name/></span>
</a>
  </span>
</b:loop>
<b:else/>
&amp;nbsp;&#8250;&amp;nbsp; <span itemprop='name'><data:blog.pageName/></span>
</b:if>
</div>
</b:loop>
<b:elseif cond='data:view.isPage'/>
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
<meta content='1' itemprop='position'/>
<span itemprop='name'><b:switch var='data:blog.locale'><b:case value='id'/>Beranda<b:default/>Home</b:switch></span></a>
</span> &amp;nbsp;&#8250;&amp;nbsp;
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<meta expr:content='data:num+2' itemprop='position'/>
<a expr:href='data:blog.url' expr:title='data:post.url' itemprop='item'>
  <span itemprop='name'><data:blog.pageName/></span>
</a>
</span>
</div>
</b:if>
</b:includable>

4. Simpan kode berikut ini tepat di bawah kode Simpan di bawah kode <b:includable id='main' var='top'>

<b:include data='posts' name='breadcrumb'/>

Demikian Cara Memasang Breadcrumb di bBlog Blogger/Blogspot.*