Skip to main content

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.

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:
Hasil di pencarian google

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 == &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>

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 == &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'>
<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 != &quot;true&quot;'>
</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'>{
&quot;@context&quot;: &quot;https://schema.org&quot;,
&quot;@type&quot;: &quot;BreadcrumbList&quot;,
&quot;itemListElement&quot;: [{  &quot;@type&quot;: &quot;ListItem&quot;,  &quot;position&quot;: 1,
&quot;item&quot;: {   &quot;@id&quot;: &quot;<data:blog.homepageUrl/>&quot;,   &quot;name&quot;: &quot;Home&quot;  } }
 <b:loop index='i' values='data:post.labels' var='label'>,
{  &quot;@type&quot;: &quot;ListItem&quot;,
&quot;position&quot;: <b:eval expr='data:i + 2'/>,  &quot;item&quot;: {   &quot;@id&quot;: &quot;<data:label.url/>&quot;,
&quot;name&quot;: &quot;<data:label.name/>&quot;  } }</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
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar

Coba aplikasi TipsdanTrik.web.id

Tambahkan aplikasi TipsdanTrik di smartphone tanpa install, buka TipsdanTrik dengan browser Chrome di smartphone. Kemudian klik ikon 3 titikdi browser dan pilih "Tambahkan ke layar utama". Selanjutnya klik aplikasi TipsdanTrik dari layar utama smartphone Anda.