糖心vlog官方入口

Schema Markup BlogPosting

Baru-baru ini saya mengubah Schema Markup dan Structured Data blog ini dari Article (https://developers.google.com/search/docs/advanced/structured-data/article) menjadi type  BlogPosting (https://schema.org/BlogPosting), dalam format Json-LD, dengan menghapus Microdata bawaan Blogger.

Mengapa menggunakan format JSON-LD? Karena (saat ini) itu yang direkomendasikan oleh Google Developer (https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data?hl=id). Lagipula format ini yang (menurut saya) paling mudah digunakan, tidak ribet bila ingin mengganti type atau menambahkan atau menghilangkan item lainnya sewaktu-waktu. Dibanding dengan penerapan Microdata yang menempel pada konten 糖心vlog官方入口.

Mengapa memutuskan mengganti (lagi) Schema dan Stuctured Data menjadi schema BlogPosting markup? Secara garis beasr BlogPosting markup kurang lebih sama dengan Article markup. Namun bagi saya schema BlogPosting markup lebih cocok dipasang di platform Blogger / blogspot dengan jenis konten seperti di bungfrangki.com ini.

Schema BlogPosting Markup

Berikut format JSON-LD untuk schema BlogPosting markup:

<script type='application/ld+json'>{
  &quot;@context&quot;: &quot;http://schema.org&quot;,
  &quot;@type&quot;: &quot;BlogPosting&quot;,
  &quot;inLanguage&quot;: &quot;id-ID&quot;,
  &quot;headline&quot;: &quot;<data:post.title.escaped/>&quot;,&quot;description&quot;: &quot;<b:eval expr='snippet(data:post.snippets.long, { length: 250 })'/>&quot;,&quot;articleBody&quot;: &quot;<b:eval expr='snippet(data:post.body,{ length: 1500, ellipsis: false, links: false, linebreaks: false }).escaped'/>&quot;,&quot;keywords&quot;: &quot; <b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='not data:label.isLast'>, </b:if></b:loop>&quot;,&quot;datePublished&quot;: &quot;<data:post.date.iso8601/>&quot;,
  &quot;dateModified&quot;: &quot;<data:post.lastUpdated.iso8601/>&quot;,&quot;image&quot;: {
    &quot;@type&quot;: &quot;ImageObject&quot;,&quot;url&quot;: &quot;<b:if cond='data:blog.postImageUrl'><b:eval expr='resizeImage(data:blog.postImageUrl, 1200, &quot;1200:675&quot;)'/><b:else/>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil3tD567IoedA3NwEVbZcM19L2F-KcKyEPxVCDTerIzTsaNitzL-BeNE-4u8NMKoL_3vblOAAjXjU5WQPLdYhHR0YJ3u2aB3CsyYaKz3fVDGHOzoZXMffVbaZBCcEU-82ViR3IgMfoz0U/w810-c-h456/no-thumbnail_810.png</b:if>&quot;,
    &quot;height&quot;: 675,
    &quot;mainEntityOfPage&quot;: {
    &quot;@type&quot;: &quot;WebPage&quot;,
    &quot;@id&quot;: &quot;<data:post.url.escaped/>&quot;,
    &quot;name&quot;: &quot;<data:post.title.escaped/>&quot;
  },
    &quot;width&quot;: 1200},&quot;publisher&quot;: {
    &quot;@type&quot;: &quot;Organization&quot;,
    &quot;name&quot;: &quot;<data:blog.title.escaped/>&quot;,
    &quot;logo&quot;: {
      &quot;@type&quot;: &quot;ImageObject&quot;,
      &quot;url&quot;: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDD9EBEvSMbaRLfRXQZEvmAfPIyHHceV-LiE8BgTTlyCOemMNOY3Zw78RF7a4oKTNVIvyVcf3g6K3_NgGfxFf82IHIGGh-q1HNXKBS-uoGh7_AMSgJBvToNsZMmF8CZRuZRMG_LisahJY/s1600/logo.png&quot;,
      &quot;width&quot;: 600,
      &quot;height&quot;: 133
    }
  },<b:if cond='data:post.author.aboutMe or data:post.author.authorPhoto.image'>&quot;author&quot;: {
    &quot;@type&quot;: &quot;Person&quot;,
    &quot;name&quot;: &quot;<data:post.author.name/>&quot;,
    &quot;url&quot;: &quot;<b:if cond='data:post.author.profileUrl'><data:post.author.profileUrl/></b:if>&quot;</b:if>
  }
}</script>


Masalah articleBody

Pada articleBody menggunakan <b:eval expr='snippet(data:post.body,{ length: 1500, ellipsis: false, links: false, linebreaks: false }).escaped'/> (yang sebetulnya outputnya juga sama persis dengan <data:post.longSnippet/>) alih alih menggunakan <data:post.body/>, karena ternyata outputnya dalam 糖心vlog官方入口, bukan cuma text di post body.

Sehingga, bila dalam postingan mengandung unsur kode tertentu, seperti tanda petik (") atu (') maka dianggap sebagai penutup dari elemen articleBody dalan JSON-LD itu. Hal ini akan memicu munculnya error pada Google Search Console atau Google Webmaster.

Sebetulnya articleBody ini outputnya mesti berisi seluruh aktualisasi paragraf di post body (dalam teks tanpa line break). Hanya saja hal tersebut tidak dapat diterapkan secara maksimal, karena hanya memicu terjadinya error di GSC. Solusi terbaiknya adalah, tetap menggunakan dengan format long snippet atau tidak menggunakannya sama sekali. 

Maka saya memilih menggunakan long snippet saja.

Pengujian di Rich Results Test

Dari format Schema BlogPosting Markup di atas, maka hasil Rich Results Test atau Pengujian Hasil Kaya akan nampak seperti gambar berikut:


Penutup

Demikian ulasan tentang Schema BlogPosting Markup kali ini, bila ada masukkan atau saran tentang ini. Mari berdiskusi lewat kolom komentar. Terima kasih sudah menyimak.

3 komentar

  1. Profil:https://www.blogger.com/profile/09885705910468850416
    ini pasang jsonnya dmn mas? di template atau dipostingan?
    • Profil:https://www.blogger.com/profile/13162875744493565460
      karna dia pakai label, jadi mesti diletakkan di dalam kode ini gan:
      id='Blog1'
  2. Profil:https://www.blogger.com/profile/08061917196568678079
    Kalo buat arsip gan?pernah test?jadi macam homepage Dan arsip label ...contoh /search/label/coding ....ane mau pasang microdata collection page
  • Gunakan fitur Format Kode untuk menulis atau menyisipkan kode dan gambar dengan format tertentu.
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi via Email ketika ada balasan.
  • Apabila ada pertanyaan di luar artikel silahkan telusuri atau bertanya lewat .
  • Untuk menyisipkan gambar, silahkan terlebih dahulu. Lalu salin URL Gambar tersebut, paste ke kolom di bawah ini, lalu klik tombol Image.
  • Untuk menyisipkan Potongan Kode, atau Quote, paste kode tersebut ke kolom di bawah ini, lalu klik tombol pre, code, atau quote.
  • Untuk menulis kode dalam Syntax Highlighter gunakan format kode panjang.
  • Setelah itu, salin atau copy hasil parse dengan klik tombol icon Salin Kode! lalu paste ke kolom komentar.

image quote pre code