Membuat Breadcrumbs Microdata Schema.org Dengan Ikon SVG

Membuat Breadcrumbs Microdata Schema.org Dengan Ikon SVG dengan menggunakan schema Breadcrumblist. Pada Aritikel titorial kali ini, saya akan memberikan conoh pemasangan breadcrumbs terbaru dengan penambahan icon SVG yang tentunya akan membuat loading blog semakin ringan.

Jika pada breadcrums yang sudah terpasang pada blog Anda masih menggunakan icon Font Awesome, maka Anda bisa beralih dan mencoba jenis bradcrumbs schema.org terbaru ini. Selain jenisnya pemasangan ini terbilang baru, penambahan icon SVG juga menjadi salah satu faktor utama pemasangan breadcrumbs schema.org ini. Tentulah fungsinya untuk meringankan beban loading blog yang sebelumnya cukup berat karena penggunaan Icon Font Awesome.

Pemasangan default breadcrums pada blogger sebelumnya menggunakana markup data-vocabulary.org. Tapi saat, inovasi terbaru dari jebis breadcrumbs lebih disempurnakan dan lebih SEO Friendly yaitu breadcrumb blogger Microdata Schema.org atau lebih kerennya disebut Breadcrumblist. Dan untuk pemasangan breadcrumbs tanpa menggunakan microdata schema namun tetap valid pada search console, bisa Anda lihat pada postingan sebelumnya tentang Cara Memasang breadcrumbs SEO Friendly

Ada yang beranggapan bahwa penggunaan markup sebenarnya tidak begitu penting pada pemasangan breadcrumbs, yang terpenting adalah list navigasi yang jelas yang ada dalam schema breadcrumbs tersebut.

Namun sebaiknya kita mengimplementasikan sesuatu yang telah direkomendasikan oleh mesin pencari seperti Google, bing, yandex dll. Salah satunya dengan membuat breadcrumb menggunakan markup schema.org.

Untuk proses pemasangannya, silakan ikuti tutorialnya berikut ini. Jika Anda menggunakan template Viomagz terbaru, maka Anda tidak perlu mengikuti tutorial ini, karena pada template tersebut, schema breadcrumbs sudah ada dan sudah valid pada search console google.

Pasang Breadcrumbs Valid Schema.org [Breadcrumblist] & Mengatasi Error Breadcrumb

Kali ini saya akan memberikan tutorial tentang cara memasang breadcrumb untuk Blogger dengan menggunakan markup microdata schema.org dengan menambahkan ikon SVG sebagai pembatas dari tiap labelnya.

Pada tutorial ini, saya akan membagikan 2 jenis breadcrums schema.org yang masing-masing menggunakan Icon SVG. Jadi nantinya silakan dipilih sesuai dengan selera Anda.

Ini juga akan secara langsung mengatasi peringatan pesan error breadcrumb pada GSC (Google Search Console). Pesan / peringatan error ini akan muncul jika breadcrumb yang digunakan pada template blogger tidak valid.

Cara Membuat breadcrumbs valid Schema.org

1. Silakan login ke Akun blogger Anda ➤ Klik Theme ➤ Edit HTML

2. Salin kode dibawah ini dan letakkan sebelum kode <b:includable id='comment-form' var='post'>. atau setelah kode <b:includable id='backlinks' var='post'>↔</b:includable>.

Namun jika kode breadcrumb sudah ada pada tempalte blog Anda, silakan hapus dan ganti semuanya dengan kode dibawah ini.

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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' fill='#000000'/></svg>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' title='Home' itemprop='item'>
<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' fill='#000000'/></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 + &quot;?&amp;max-results=16&quot;' expr:title='data:label.name' itemprop='item'>
<span itemprop='name'><data:label.name/></span>
</a>
<meta expr:content='data:num+2' itemprop='position'/>
</span>
<b:if cond='data:label.isLast != &quot;true&quot;'>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></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' fill='#000000'/></svg>
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>

3. Tambahkan CSS style berikut agar tampilan breadcrumbs Anda menjadi rapih.

/* Breadcrumb */
.breadcrumbs {
    background: #fff;
    line-height: 1.2em;
    width: auto;
    overflow: hidden;
    margin: 0;
    padding: 10px 0;
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    font-size: 80%;
    color: #888;
    font-weight: 400;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    white-space: nowrap
}

.breadcrumbs a {
    display: inline-block;
    text-decoration: none;
    transition: all .3s ease-in-out;
    color: #666;
    font-weight: 400
}

.breadcrumbs a:hover {
    color: #11589D
}

.breadcrumbs svg {
    width: 16px;
    height: 16px;
    vertical-align: -4px
}

.breadcrumbs svg path {
    fill: #666
}

4. Terakhir, simpan kode berikut di mana Anda ingin menampilkan breadcrumb.

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

Sebagai contoh, Anda bisa simpan di bawah kode <b:includable id='main' var='top'> dan breadcrumb akan tampil di bagian atas postingan.

Breadcrumb Schema.org ini otomatis valid pada Google structure data Testing Tool dan juga sudah valid pada Google Search Console (GSC) pada saat melakukan URl Inspection. Seperti pada gambar dibawah ini yang sudah saya uji pada salah satu postingan saya.

Cara Pasang Breadcrumbs SEO Friendly Hanya Satu Label

Untuk cara yang kedua, ada sedikit perbedaan pada tampilannya sekali sama-sama menggunakan Icon SVG dengan schema.org Breadcrumblist. Selain pada tampilannya, breadcrumbs ini juga hanya menampilkan 1 label saja, jadi sangat SEO Frindly.Ini sangat berguna jika pada postingan yang kita buat terdapat banyak label atau tags. Jika berminat mencobanya, silakan ikuti tutorialnya berikut ini tentang cara memasang breadcrumbs pada blogspot ini.

1. Silakan gantikan breadcrumbs Anda yang sebelumnya dengan kode ini

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
<svg class='homesvg' viewBox='0 0 24 24'><path d='M12,3L20,9V21H15V14H9V21H4V9L12,3Z'/></svg>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
<span itemprop='name'>Home</span></a>
<meta content='1' itemprop='position'/>
</span>
<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:loop index='num' values='data:post.labels' var='label'>
<b:if cond='data:num == (data:post.labels.size - 1)'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url + &quot;?&amp;max-results=10&quot;' expr:title='data:label.name' itemprop='item'>
<span itemprop='name'><data:label.name/></span>
</a>
<meta content='2' itemprop='position'/>
</span>
<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>
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>

2. Selanjutnya, agar tampilan icon SVG menjadi keren, silakan ganti CSS breadcrumbs Anda dengan kode CSS berikut

.breadcrumbs{line-height:1.2em;width:auto;overflow:hidden;padding:0;margin:0 auto 20px;font-size:90%;color:#888;font-weight:400;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}
.breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:inherit;font-weight:400}
.breadcrumbs a:hover{color:inherit}
.breadcrumbs svg{width:20px;height:20px;vertical-align:-5px;margin:0 -4px}
.breadcrumbs svg.homesvg{width:22px;height:22px;margin-right:0}
.breadcrumbs svg path{fill:#c8c8c8}
.breadcrumbs svg.homesvg path{fill:#999}

Demikian tutorial blogging kali ini tentang Cara Membuat Breadcrumbs Microdata Schema.org Dengan Icon SVG yang pastinya keren dan SEO Friendly serta valid pada search console dan structure data testing tool google. Semoga bisa diterapkan dengan baik pada blog Anda. Terima kasih.

Sumber :

• https://www.kompiajaib.com/2018/05/membuat-breadcrumb-microdata-schemaorg.html
• https://www.bungfrangki.com/2019/12/cara-memasang-breadcrumbs-menampilkan-satu-label.html

Share