Cara Memasang Breadcrumb Schema.Org Seo Friendly Di Blog
Breadcrumb schema.org yaitu jenis breadcrumb terbaru yang disarankan google ketika ini. Secara umum fungsi breadcrumb yaitu mengkategorikan artikel yang ada di situs. Sehingga google sanggup tahu jenis kategori artikel tersebut. Selain itu juga berfungsi untuk menawarkan kepada pengunjung letak artikel yang sedang dibukanya di situs.
Bagimana cara melihat jenis bradcrumb yang dipakai diblog kita?
Caranya sangat mudah, kau hanya perlu buka html template lalu cari isyarat berikut <b:includable id='breadcrumb' var='posts'> atau eksklusif cari beberapa isyarat dibawah ini:
http://data-vocabulary.org/Breadcrumb
http://rdf.data-vocabulary.org/#
Jika isyarat diatas ada di template itu artinya breadcumb yang dipakai masih versi yang lama. Dimana jikalau 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 memakai versi schema.org.
Kemudian hal lain yang menciptakan aku pribadi lebih prefer memakai breadcrumb schema.org yaitu tampilan hasil pencarian breadcrumb usang pada versi mobile. Terkadang akhirnya menjadi menyerupai berikut:
Sehingga dari situ aku lebih milih memakai schema.org untuk breadcrumb blog.
2. Hapus juga css breadcrumb yang lama
3. Tambahkan isyarat breadcrumb berikut sempurna dibawah isyarat <b:includable id='breadcrumb' var='posts'>.
4. Setelah itu tambahkan css berikut supaya rapi.
5. Terakhir, untuk menampilkan breadcrumb. Tambahkan isyarat berikut dimana saja kau ingin menampilkan breadcrumb tersebut.
Contoh jikalau kau ingin meletakkan breadcrumb di atas postingan, maka letakkan isyarat tersebut di bawah isyarat <b:includable id='main' var='top'>.
Kemudian ganti dengan isyarat berikut:
Setelah menerapkan langkah di atas jangan lupa untuk cek valid tidaknya breadcrumb tersebut di google struktur data. Kamu sanggup membandingkannya dengan breadcrumb yang ada di blog ini.
Sekian, agar bermanfaat.
Sumber:
https://ayomaintrading.blogspot.com/search?q=membuat-breadcrumb-microdata-schemaorg https://ayomaintrading.blogspot.com/search?q=membuat-breadcrumb-microdata-schemaorg Sumber https://www.tipsdantrik.web.id/
Jenis breadcrumb yang dipakai ditemplate blog
Breadcrumb yang dipakai di blog ada dua yaitu pertama versi usang memakai data-vocabulary. Kemudian yang kedua memakai schema.org. Sedangkan format penulisannya ada tiga jenis yaitu RDFA, Micordata dan LD-JSON.Bagimana cara melihat jenis bradcrumb yang dipakai diblog kita?
Caranya sangat mudah, kau hanya perlu buka html template lalu cari isyarat berikut <b:includable id='breadcrumb' var='posts'> atau eksklusif cari beberapa isyarat dibawah ini:
http://data-vocabulary.org/Breadcrumb
http://rdf.data-vocabulary.org/#
Jika isyarat diatas ada di template itu artinya breadcumb yang dipakai masih versi yang lama. Dimana jikalau 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 memakai versi schema.org.
Kemudian hal lain yang menciptakan aku pribadi lebih prefer memakai breadcrumb schema.org yaitu tampilan hasil pencarian breadcrumb usang pada versi mobile. Terkadang akhirnya menjadi menyerupai berikut:
Sehingga dari situ aku lebih milih memakai schema.org untuk breadcrumb blog.
Cara menciptakan breadcrumb valid schema.org
Seperti yang aku jelaskan sebelumnya bahwa untuk format penulisan breadcrumb ada tiga, yaitu RDFa, Microdata dan LD/JSON. Pada artikel ini aku akan menjelaskan cara menciptakan breadcrum memakai format microdata dan LD/JSON saja.Menggunakan format microdata
A. Jika ingin menampilkan breadcrumb di postingan
1. Pertama cari isyarat <b:includable id='breadcrumb' var='posts'> hapus semua isyarat breadcrumb yang lama.<b:includable id='breadcrumb' var='posts'> isyarat breadcrumb </b:includable>2. Hapus juga css breadcrumb yang lama
3. Tambahkan isyarat breadcrumb berikut sempurna dibawah isyarat <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 isyarat berikut dimana saja kau ingin menampilkan breadcrumb tersebut.
<b:include data='posts' name='breadcrumb'/>Contoh jikalau kau ingin meletakkan breadcrumb di atas postingan, maka letakkan isyarat tersebut di bawah isyarat <b:includable id='main' var='top'>.
B. Jika hanya ingin memasang breadcrumb tapi tidak ingin menampilkannya dipostingan.
Caranya lebih simpel, kau cukup hapus isyarat breadcrumb usang yang berada di:<b:includable id='breadcrumb' var='posts'> isyarat breadcrumb </b:includable>Kemudian ganti dengan isyarat 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 isyarat breadcrumb yang ada di template blog menyerupai langkah di atas. Kemudian copy isyarat dibawah ini dan paste kan sesudah isyarat <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 sanggup membandingkannya dengan breadcrumb yang ada di blog ini.
Sekian, agar bermanfaat.
Sumber:
https://ayomaintrading.blogspot.com/search?q=membuat-breadcrumb-microdata-schemaorg https://ayomaintrading.blogspot.com/search?q=membuat-breadcrumb-microdata-schemaorg Sumber https://www.tipsdantrik.web.id/