Cara Memasang Breadcrumb Schema.org SEO Friendly di Blog
Breadcrumb schema.org adalah jenis breadcrumb terbaru yang disarankan google saat ini. Secara umum fungsi breadcrumb yaitu mengkategorikan artikel yang ada di situs. Sehingga google bisa tahu jenis kategori artikel tersebut. Selain itu juga berfungsi untuk menunjukkan kepada pengunjung letak artikel yang sedang dibukanya di situs.
Bagimana cara melihat jenis bradcrumb yang digunakan diblog kita?
Caranya sangat mudah, kamu hanya perlu buka html template kemudian cari kode berikut <b:includable id='breadcrumb' var='posts'> atau langsung cari beberapa kode dibawah ini:
http://data-vocabulary.org/Breadcrumb
http://rdf.data-vocabulary.org/#
Jika kode diatas ada di template itu artinya breadcumb yang digunakan masih versi yang lama. Dimana jika kita mengakses url breadcrumb tersebut baik itu http://data-vocabulary.org/Breadcrumb dan http://rdf.data-vocabulary.org/ url tersebut sudah tidak tersedia. Selain itu google juga lebih menyarankan untuk menggunakan versi schema.org.
Kemudian hal lain yang membuat saya pribadi lebih prefer menggunakan breadcrumb schema.org adalah tampilan hasil pencarian breadcrumb lama pada versi mobile. Terkadang hasilnya menjadi seperti berikut:
Sehingga dari situ saya lebih milih menggunakan schema.org untuk breadcrumb blog.
2. Hapus juga css breadcrumb yang lama
3. Tambahkan kode breadcrumb berikut tepat dibawah kode <b:includable id='breadcrumb' var='posts'>.
4. Setelah itu tambahkan css berikut supaya rapi.
5. Terakhir, untuk menampilkan breadcrumb. Tambahkan kode berikut dimana saja kamu ingin menampilkan breadcrumb tersebut.
Contoh jika kamu ingin meletakkan breadcrumb di atas postingan, maka letakkan kode tersebut di bawah kode <b:includable id='main' var='top'>.
Kemudian ganti dengan kode berikut:
Setelah menerapkan langkah di atas jangan lupa untuk cek valid tidaknya breadcrumb tersebut di google struktur data. Kamu dapat membandingkannya dengan breadcrumb yang ada di blog ini.
Sekian, semoga bermanfaat.
Sumber:
https://www.kompiajaib.com/2018/05/membuat-breadcrumb-microdata-schemaorg.html https://www.mankoin.blog/2018/10/schema-breadcrumb-seo-friendly.html
Jenis breadcrumb yang digunakan ditemplate blog
Breadcrumb yang digunakan di blog ada dua yaitu pertama versi lama menggunakan data-vocabulary. Kemudian yang kedua menggunakan schema.org. Sedangkan format penulisannya ada tiga jenis yaitu RDFA, Micordata dan LD-JSON.Bagimana cara melihat jenis bradcrumb yang digunakan diblog kita?
Caranya sangat mudah, kamu hanya perlu buka html template kemudian cari kode berikut <b:includable id='breadcrumb' var='posts'> atau langsung cari beberapa kode dibawah ini:
http://data-vocabulary.org/Breadcrumb
http://rdf.data-vocabulary.org/#
Jika kode diatas ada di template itu artinya breadcumb yang digunakan masih versi yang lama. Dimana jika kita mengakses url breadcrumb tersebut baik itu http://data-vocabulary.org/Breadcrumb dan http://rdf.data-vocabulary.org/ url tersebut sudah tidak tersedia. Selain itu google juga lebih menyarankan untuk menggunakan versi schema.org.
Kemudian hal lain yang membuat saya pribadi lebih prefer menggunakan breadcrumb schema.org adalah tampilan hasil pencarian breadcrumb lama pada versi mobile. Terkadang hasilnya menjadi seperti berikut:
Sehingga dari situ saya lebih milih menggunakan schema.org untuk breadcrumb blog.
Cara membuat breadcrumb valid schema.org
Seperti yang saya jelaskan sebelumnya bahwa untuk format penulisan breadcrumb ada tiga, yaitu RDFa, Microdata dan LD/JSON. Pada artikel ini saya akan menjelaskan cara membuat breadcrum menggunakan format microdata dan LD/JSON saja.Menggunakan format microdata
A. Jika ingin menampilkan breadcrumb di postingan
1. Pertama cari kode <b:includable id='breadcrumb' var='posts'> hapus semua kode breadcrumb yang lama.<b:includable id='breadcrumb' var='posts'>
kode breadcrumb
</b:includable>2. Hapus juga css breadcrumb yang lama
3. Tambahkan kode breadcrumb berikut tepat dibawah kode <b:includable id='breadcrumb' var='posts'>.
<b:if cond='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' 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 + "?&max-results=16"' 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 != "true"'>
<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>4. Setelah itu tambahkan css berikut supaya rapi.
/* 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}5. Terakhir, untuk menampilkan breadcrumb. Tambahkan kode berikut dimana saja kamu ingin menampilkan breadcrumb tersebut.
<b:include data='posts' name='breadcrumb'/>Contoh jika kamu ingin meletakkan breadcrumb di atas postingan, maka letakkan kode tersebut di bawah kode <b:includable id='main' var='top'>.
B. Jika hanya ingin memasang breadcrumb tapi tidak ingin menampilkannya dipostingan.
Caranya lebih simpel, kamu cukup hapus kode breadcrumb lama yang berada di:<b:includable id='breadcrumb' var='posts'>
kode breadcrumb
</b:includable>Kemudian ganti dengan kode berikut:
<b:if cond='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'>
<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>
<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' 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 != "true"'>
</b:if>
</b:loop>
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>Menggunakan format LD/JSON
Silahkan hapus semua kode breadcrumb yang ada di template blog seperti langkah di atas. Kemudian copy kode dibawah ini dan paste kan setelah kode <b:includable id='post' var='post'>. <b:if cond='data:view.isPost'>
<script type='application/ld+json'>{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{ "@type": "ListItem", "position": 1,
"item": { "@id": "<data:blog.homepageUrl/>", "name": "Home" } }
<b:loop index='i' values='data:post.labels' var='label'>,
{ "@type": "ListItem",
"position": <b:eval expr='data:i + 2'/>, "item": { "@id": "<data:label.url/>",
"name": "<data:label.name/>" } }</b:loop>]}</script></b:if>Setelah menerapkan langkah di atas jangan lupa untuk cek valid tidaknya breadcrumb tersebut di google struktur data. Kamu dapat membandingkannya dengan breadcrumb yang ada di blog ini.
Sekian, semoga bermanfaat.
Sumber:
https://www.kompiajaib.com/2018/05/membuat-breadcrumb-microdata-schemaorg.html https://www.mankoin.blog/2018/10/schema-breadcrumb-seo-friendly.html