Cara Memasang Breadcrumb di blogger yang valid data terstruktur
Kebanyakan template blogger sekarang ini telah dipasangkan dengan yang namanya breadcrumb, Namun agar kita mengetahuinya juga apakah benar telah terpasang dalam template dan apakah pemasangan breadcrumb valid untuk blog yang SEO Friendly.
Maka penting bagi kita untuk memastikan, demi perkembangan situs web atau blog kita di mata search engine Google atau yang lainnya. untuk itu berikut Cara Memasang Breadcrumb di blogger yang valid data terstruktur
Pengertian Breadcrumb
Breadcrumb bila diartikan ialah "remah roti" artian itu biasanya merupakan slogan sebagai jejak penujuk jalan, bila diterapkan dalam situs web atau blog adalah navigasi petunjuk halaman postingan, yang berfungsi untuk memetakan struktur blog itu sendiri tujuannya ya seperti artian diatas, agar pengguna "tidak tersesat", mulai dari home(halaman utama) hingga menuju halaman postingan tersebut, biasanya berada dibawah judul postingan atau bisa juga diatasnya.
strukturnya tampak seperti ini :
Home (Halaman Utama) › (kategori blog) › Postingan blog (Artikel)Fungsi Breadcrumb bukan hanya memudahkan arah bagi pembaca, namun penting untuk menentukan peringkat SEO dalam mesin pencarian Google atau lainnya (Mis: Bing, duck duck go,..). dengan adanya Breadcrumb struktur blog kita menjadi jelas dan mudah dibaca. Jadi langsung aja ya.
Cara Memasang Breadcrumb
Cara memasang breadcrumb agar valid data terstruktur, terdapat 2 cara, yaitu menggunakan format microdata dan format json
Cara format microdata
1. Memasang tampilan di kode CSS, pasang kode berikut didalam </style>]]> atau </b:skin>
.breadcrumb {display: flex;align-items: center;margin: 0 0 8px;font-size: 11px;font-weight: 700;color: #767676;}
.breadcrumb > :not(:last-child):after {content: '\203A';margin: 0 7px 0 4px;font-size: 13px;line-height: 16px;}
.breadcrumb > .title-link {flex-shrink: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #767676;}2. Cari Kode <h1 class=' post-title'> untuk setiap template blog bisa berbeda-beda bisa post-title, entry-title, atau yang mengandung kata title. Patokannya adalah <h1>
Setelah ketemu, Kemudian letakan kode berikut tepat diatasnya
<b:include cond='data:view.isPost' data='post' name='breadcrumb'/>3. Cari kode
<b:includable id='comments' var='post'/>Kemudian, letakan kode berikut tepat diatasnya
<b:includable id='breadcrumb' var='post'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
<div class='home-link' itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl.canonical' itemprop='item' title='Home'>
<span itemprop='name'>Home</span>
</a><meta content='1' itemprop='position'/>
</div>
<b:if cond='data:post.labels'>
<b:loop index='num' values='data:post.labels' var='label'>
<b:if cond='data:num == 0'>
<div itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url.canonical' expr:title='data:label.name' itemprop='item'><span itemprop='name'><data:label.name/></span></a><meta expr:content='data:num+2' itemprop='position'/>
</div>
</b:if>
<b:if cond='data:num == 1'>
<div itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url.canonical' expr:title='data:label.name' itemprop='item'><span itemprop='name'><data:label.name/></span></a><meta expr:content='data:num+2' itemprop='position'/>
</div>
</b:if>
</b:loop>
<div class='title-link'><span><data:post.title/></span></div>
<b:else/>
Uncategorized
</b:if>
</div>
</b:includable>
4. Simpan Pengaturan, lalu lihat hasilya
Cara JSON
Cara ini dengan menambahkan script json untuk valid data terstruktur
1. Untuk cara ini, sama langkahnya dari no.1 hingga no.3
2. Cari kode
<b:includable id='comments' var='post'/>Kemudian, letakan kode berikut tepat diatasnya
<b:includable id='breadcrumb' var='post'>
<div class='breadcrumbs'><div class='home-link'><a expr:href='data:blog.homepageUrl.canonical' title='Home'><span>Home</span></a></div><b:if cond='data:post.labels'><b:loop index='num' values='data:post.labels' var='label'><b:if cond='data:num == 0'><a expr:href='data:label.url.canonical' expr:title='data:label.name'><span><data:label.name/></span></a></b:if><b:if cond='data:num == 1'><a expr:href='data:label.url.canonical' expr:title='data:label.name'><span><data:label.name/></span></a></b:if></b:loop><div class='title-link'><span><data:post.title/></span></div><b:else/>Uncategorized</b:if></div>
<script type='application/ld+json'>{"@context":"http://schema.org","@type":"BreadcrumbList","@id":"#Breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"item":{"name":"<data:messages.home/>","@id":"<data:blog.homepageUrl.jsonEscaped/>"}},{"@type":"ListItem","position":2,"item":{"name":"<b:if cond='data:post.labels'><data:post.labels.last.name/></b:if>","@id":"<data:post.labels.last.url.jsonEscaped/>"}},{"@type":"ListItem","position":3,"item":{"name":"<data:post.title/>","@id":"<data:post.url.jsonEscaped/>"}}]}</script>
</b:includable>
3. Simpan Pengaturan, lalu lihat hasilya
Untuk memeriksa bahwa breadcrumb yang telah terpasang valid data terstrutur, bisa dicek disini :
Periksa Di Sini: - https://search.google.com/test/rich-results