Breadcrumb Valid Google Search Console
Breadcrumb merupakan navigasi halaman pada situs untuk menunjukan kategori label postingan yang sedang dituju atau dibaca. Breadcrumb dalam bahasa indonesia artinya adalah remah roti, istilah ini diambil dari kisah remah roti Hansel and Gretel untuk petunjuk jalan menuju pulang ke rumah (home).
Mengapa Breadcrumb Penting?
Ketika pengunjung menjelajahi situs Anda tanpa adanya breadcrumb hanya akan menambah bounce rate (rasio pantulan) dan semakin tinggi rasionya maka akan memperburuk SEO situs terhadap mesin penelusuran.
Bounce Rate adalah rasio pantulan yang dihasilkan dari pengunjung yang membuka halaman situs Anda kemudian meninggalkan (menutup) tanpa melakukan klik apapun.
Indeksi google juga terpengaruh dengan adanya breadcrumb maka situs Anda mudah untuk dijelajahi dari struktur navigasi (bukan dari menu) dan tampil pada penelusuran.
Pada situs, breadcrumb berfungsi sebagai penunjuk halaman secara spesifik dimana sebuah judul postingan berada. Pada CMS Blogger, breadcrumb dikenali oleh mesin pencarian google sebagai label sebuah halaman dan dimunculkan pada hasil penelusuran (SERP) sebagaimana situs dengan navigasi yang benar.
Saat ini Google Search Console akan memonitoring navigasi situs Anda melalui breadcrumb yang valid. Dengan demikian perlu Anda perhatikan apakah pemasangan navigasi (breadcrumb) sudahkah benar pada situs milik Anda?
Memasang Breadcrumbs pada Situs
Berikut adalah struktur breadcrumb standar yang wajib ada pada situs Anda, cara penerapannya hanya menggunakan markup versi RDFa berikut melalui html editor blogger, referensi silahkan baca dari Google developer
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url and data:blog.pageType == "item"'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
<svg viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z'/></svg>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' itemprop='item' itemtype='https://schema.org/Thing' title='Home'><span itemprop='name'>Home </span></a>
<meta content='1' itemprop='position'/>
</span>
<svg viewBox='0 0 24 24'><path d='M5.5,9A1.5,1.5 0 0,0 7,7.5A1.5,1.5 0 0,0 5.5,6A1.5,1.5 0 0,0 4,7.5A1.5,1.5 0 0,0 5.5,9M17.41,11.58C17.77,11.94 18,12.44 18,13C18,13.55 17.78,14.05 17.41,14.41L12.41,19.41C12.05,19.77 11.55,20 11,20C10.45,20 9.95,19.78 9.58,19.41L2.59,12.42C2.22,12.05 2,11.55 2,11V6C2,4.89 2.89,4 4,4H9C9.55,4 10.05,4.22 10.41,4.58L17.41,11.58M13.54,5.71L14.54,4.71L21.41,11.58C21.78,11.94 22,12.45 22,13C22,13.55 21.78,14.05 21.42,14.41L16.04,19.79L15.04,18.79L20.75,13L13.54,5.71Z'/></svg>
<b:loop index='num' values='data:post.labels' var='label'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url + "?&max-results=16"' expr:title='data:label.name' itemprop='item' itemtype='https://schema.org/Thing'>
<span itemprop='name'><data:label.name/></span>
</a>
<meta expr:content='data:num+2' itemprop='position'/>
</span>
<b:if cond='data:label.isLast != "true"'>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/></svg>
</b:if>
</b:loop>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/></svg>
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>
Pada CMS blogger silahkan buka editor html dan biasanya sudah terdapat breadcrumb secara default, silahkan ganti atau sesuaikan menggunakan html yang valid tersebut di bagian kode mirip
<b:includable id='breadcrumb' var='post'></b:includable>/*---- Postmeta Breadcrumb ----*/
.breadcrumbs{padding:0;margin-left:10px;margin-right:10px;font-size: 12px;text-align: center;background: linear-gradient(45deg, #F44336, #a72aa0);color: #fff;}
.breadcrumbs a {color: white;margin:3px}
.breadcrumbs svg{height: 15px;width: 15px;vertical-align: middle;fill:#fff;}
kemudian cari kode berikut
<b:includable id="main" var="top"><b:include data='posts' name='breadcrumb'/>Cek Validitas Data Struktur Breadcrumb
Situs yang memiliki data struktur yang valid akan membantu indeksi google untuk navigasi berdasarkan markup schema.org maka silahkan cek pada Google data testing-tool.
Demikian cara memasang dan menggunakan breadcrumb yang valid pada data struktur dan google search console, semoga membatu & selamat mencoba.