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

Perbedaan Windows 10 N, KN, Home, Pro, Enterprise dan VL

Perbedaan Windows 10 Pro dan Windows 10 Pro N? — banyak yang bertanya dengan pertanyaan itu, mungkin salah satunya ada kamu. Mana yang lebih bagus untuk dipilih dan apa maksudnya antara yang tidak ada N-nya dan yang ada N-nya. Memang Microsoft merilis beberapa edisi Sistem Operasi seperti pada Windows 10, ini tentunya memiliki alasan. Terkadang perbedaan ini akan membingungkan saat ingin mendownload, mau pilih yang mana windows 10 pro atau yang pro n. Ini juga sama di windows versi sebelumnya. Nah di artikel kali ini akan membahas tentang berbagai macam edisi Windows 10 dan mengetahui apa itu edisi Home, Pro, Enterprise, Education VL, N dan KN. Perbandingan setiap edisi Windows 10. Pilih mana Windows 10 atau Windows 10 N/KN Biar gak penasaran kita bahas dulu Apa itu Windows 10 N?. Windows 10 N adalah windows yang dirancang khusus bagi pengguna Eropa dan Swiss agar sesuai dengan hukum Uni Eropa. N berarti Not, merupakan Windows 10 yang "tidak disertakannya fitur atau aplikasi...
Posting Komentar
Baca selengkapnya

Mengatasi Item Data Terstruktur Hilang atau Tidak Valid pada Blog AMP

Sekarang Google memfokuskan konten dengan blog AMP pada pencarian mobile. Salah satunya dengan adanya validasi data terstruktur pada pengujian AMP milik google. Yang tidak valid akan ada " Missing or invalid structured data item " di bagian bawah, bagi yang akun google-nya di setting bahasa indonesia maka akan menggunakan peringatan "Item data terstruktur hilang atau tidak valid". Tapi ketika di cek di pengujian data terstruktur tidak ada error sama sekali. Setelah saya amati ternyata ada yang salah dalam penempatan schema, yang tentunya tidak sesuai pedoman. Tapi bagi yang sering berkunjung di blog kompi ajaib milik kang adhy akan mendapatkan penyelesaian masalah seputar blog. Salah satu contohnya yang dibahas di posting ini. Di blog kompi ajaib dalam Memperbaiki Item Data Terstruktur yang tidak valid menggunakan cara yang agak rumit, lalu bagaimana bagi yang belum terlalu paham dengan kode HTML. Tidak harus mengubah semua struktur data, seperti pada tutorial komp...
9 komentar
Baca selengkapnya