Langsung ke konten utama

Cara Membuat Schema Breadcrumb JSON-LD SEO Friendly Blogger

Breadcrumb merupakan sebuah navigasi yang merujuk ke halaman artikel. Atau lebih mudahnya bisa dikatakan, halaman artikel tersebut bisa ditemukan dalam kategori apa.

Jadi mesin pencari menggunakan markup breadcrumb untuk mengkategorikan informasi dari halaman ke dalam hasil pencarian.

Kategori atau bisa juga disebut "Label" dalam istilah Blogger. Fitur label ini hanya tersedia pada halaman postingan.

Breadcrumb nantinya digunakan mesin pencari google untuk mengganti teks alamat url halaman dengan label pada markup breadcrumb.

Dekstop
Mobile

Lihat pada gambar, di bawah judul seharusnya berisi teks url tapi karena halaman terdapat markup breadcrumb maka berubah menjadi navigasi.

Update Error data-vocabulary.org!

Baru baru ini januari 2020 Google secara resmi tidak lagi mendukung skema data-vocabulary.org. Bagi masih menggunakan skema tersebut, Google menghimbau untuk segera beralih ke Schema.org. Jika tidak nanti Webmaster atau Google Search Console akan menampilkan error "data-vocabulary.org schema deprecated" atau "skema data-vocabulary.org sudah usang".

Cara Membuat Breadcrumb dengan Schema.org JSON-LD

Banyak artikel atau postingan yang memberikan tutorial membuat breadcrumb dan telah disertai dengan Schema.org. Cara penempatan markup ini menggunakan format Microdata, atau ada juga yang RDFa.

Akan tetapi markup dengan format JSON-LD lebih disukai oleh mesin pencari, sehingga ini lebih direkomendasikan untuk digunakan. Itu karena pembacaan script JSON-LD lebih mudah.

Dalam pengalaman saya menggunakan 3 jenis format (Microdata, RDFa, dan JSON-LD) pada breadcrumb, yang berhasil (SEO Friendly) di google dekstop dan mobile hanya format JSON-LD. Berhasilnya yaitu teks alamat url berganti menjadi navigasi, seperti pada gambar di atas.

Ini juga bisa sebagai alternaltif bagi yang ingin tidak menggunakan navigasi breadcrumb di halaman postingan.

Memasang Schema Breadcrumb Script JSON-LD

Pertama Copy code berikut.

<b:if cond='data:view.isPost'><!--mankoin.com--><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;<data:blog.title/>&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>

Kemudian cari kode <b:includable id='post' var='post'> di widget Blog, setelah ketemu pastekan setelah kode tersebut.

Sekarang Schema Breadcrumb dengan script JSON-LD sudah dibuat. Jika di blog sudah terpasang Breadcrumb yang lama, lebih baik dibuang saja (dihapus), jika tidak maka hapus schemanya saja. Caranya cari dan hapus atribut itemscope, itemtype, dan itemprop pada elemen navigasi breadcrumb. Karena kemungkinan nanti bisa terjadi bentrok. Sebagai Contoh:

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">

Jika dihapus skemanya menjadi.

<span>

Dan yang terakhir cek validasi menggunakan struktured data testing tool google.

Label:

Komentar

  1. Dedy Styawan17 Okt 2018, 10.53.00

    ada cara agar work jika script JSON-LD di pasang di bawah tag head mas ?

    BalasHapus
    Balasan
    1. Rohman17 Okt 2018, 17.22.00

      Jika di pasang di tag head tidak bisa mas, kecuali jika memakai trik. Note: Di pasang pada tag body tidak menimbulkan masalah.

      Hapus

Posting Komentar

Postingan populer dari blog ini

Membuat Komentar Blogger Valid AMP dan Anti Backlink Spam

Umumnya komentar pada blog AMP menggunakan Disqus atau Facebook comment. Awalnya versi mobile blog ini juga menggunakan komentar Facebook, tapi sekarang menggunakan Threaded Comment Blogger yang tentunya sudah di custom valid AMP. Untuk versi dekstop juga ditambahkan fitur komentar Disqus (untuk diskusi). Sama seperti di posting sebelumnya komentar blogger ini menggunakan schema.org dan anti backlink untuk SEO. Schema komentar yang saya temukan hanya ada dua jenis yaitu https://schema.org/UserComments dan https://schema.org/comment. Karena usercomment mencantumkan sebagai cara lama untuk berinteraksi, maka diputuskan untuk menggunakan https://schema.org/comment, itu juga diperkuat lagi dengan digunakan oleh mastah blogger (platform wordpress). Blogger sudah menggunakan tag nofollow untuk setiap anchor link yang ada pada komemtar seperti yang sudah dijelaskan di blog resminya puluh tahun lalu. Tapi bagi saya itu tidak cukup, maka dengan Anti Backlink link apapun yang ada pada komentar a...
44 komentar
Baca selengkapnya

Membuat Komentar Blogger Simple SEO Ringan dengan Schema.org

Komentar merupakan salah satu bagian dari blog yang digunakan untuk pertanyaan, pendapat, dan bisa juga berdiskusi. Komentar bawaan blogger tersedia dalam 2 jenis yaitu yang biasa tidak ada fitur balas komentar (Comments) dan yang bertingkat (Threaded Comments) dengan fitur balas komentar. Kedua jenis komentar tersebut tidak menyertakan schema data terstruktur, yang tentunya berfungsi untuk SEO. Dengan adanya schema.org komentar yang positif dapat dengan mudah dibaca / index oleh mesin google dan tentunya dapat berguna untuk reputasi blog di pencarian google. Karena google sendiri juga menggunakan komentar untuk menilai konten, intinya reaksi pengunjung setelah membaca artikel. Mungkin dengan ditambahkannya schema akan lebih baik jika dibandingkan dengan tanpa schema. Blog ManKoin menggunakan komentar dengan schema.org, pada postingan kali ini membahas tentang membuat komentar dengan banyak fitur tapi sederhana. Awalnya ini dari blogger lain yang meminta membuat komentar seperti blog ...
19 komentar
Baca selengkapnya

Cara Mengembalikan Partisi Disk ke dalam Keadaan Semula

Partisi pada hardisk drive terlanjur terformat, tiba tiba hilang atau telah terhapus. Kalau partisi hilang dengan sendirinya itu mungkin karena habis melakukan install ulang windows seperti yang pernah saya alami, atau hal lainnya. Jika seperti itu partisinya sudah tidak muncul lagi. Di dalam keadaan seperti itu sangat dimungkinkan partisi disk bisa dikembalikan/restore seperti semula. Cara kerjanya hampir sama dengan mengembalikan/recovery data yang hilang atau terhapus. Bagian hardisk yang tidak terformat akan menunjukkan "Unallocated". Bagian itulah yang di recovery, dengan menganalisa terlebih dulu lalu mengembalikan partisi dapat dilacak seperti semula. Serta bisa juga untuk dilakukan pada bagian harddisk yang sudah terformat. Tidak hanya untuk hardisk saja, recovery juga bisa digunakan pada memori SD card, dan juga drive external. Kenapa Tidak Menggunakan Data Recovery saja Mungkin ada yang berpikir untuk melakukan recovery, tapi itu butuh waktu yang sangat lama. Jadi a...
22 komentar
Baca selengkapnya