Script JsonLD BlogPosting dan BreadcrumbList Blogger (Blogspot)

AndroLite.com : Cara Pasang Script Json+LD BlogPosting dan BreadcrumbList Untuk Blogspot (Blogger) Terbaru 2024 - SEO (Search Engine Optimization) adalah salah satu hal mutlak yang wajib diterapkan untuk sebuah blog, baik itu menggunakan CMS Wordpress ataupun Blogger. Tujuan utamanya adalah untuk meningkatkan pengunjung ke blog yang kita punya.

Sekarang ini ada banyak teknik untuk menerapkan hal tersebut, salah satu diantaranya adalah menggunakan Schema Markup berbasis JSONLD. Schema ini pada awalnya kebanyakan digunakan oleh CMS Wordpress, tetapi sebenarnya ini juga bisa kita gunakan untuk blogspot.

Mungkin untuk sebagian Blogger masih sangat jarang menerapkan hal ini. Padahal Google sebagai mesin pencari terbesar di dunia lebih merekomendasikan Script JsonLD dibandingkan jenis microdata atau RDFA. Alasannya, karena selain lebih ringan dan mudah diterapkan, juga lebih mudah dicrawl dan dibaca oleh mesin pencari.

Nah, bagi kalian yang sedang mencari Script terbaru tentang JsonLD jenis BlogPosting dan Breadcrumb untuk dipasang di blog, kalian datang ketempat yang tepat. Karena berikut ini akan saya berikan scriptnya beserta tutorial cara pemasangannya.

Schema Markup Json-LD BlogPosting Blogger

<script type='application/ld+json'>{
  "@context": "http://schema.org",
  "@type": "BlogPosting",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "<data:post.url.canonical/>"
  },
  "headline": "<data:post.title/>",
  "description": "<b:eval expr='data:blog.metaDescription.escaped ? data:blog.metaDescription.escaped : data:this.description'/>",
  "datePublished": "<data:post.date.iso8601/>",
  "dateModified": "<data:post.lastUpdated.iso8601/>",
  "image": {
    "@type": "ImageObject","url": "<b:eval expr='(data:post.featuredImage ? resizeImage(data:post.featuredImage, 700, "700:366") : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkt3cHgGMcaT6cOjtyCZuixkFDVUIQpKjvkT2cabUDX6sFCkjW5lf-phSRR3iI2PnCtwDgD2Meh8Bf6eRoOs8jn0wsO4m5q9u1zzxikw4En7idiV5TR6FFhsVHyc1XaZKvXv5kNmmgrpXg/s1600/detro-default-image.png").jsonEscaped'/>",
    "height": 366,
    "width": 700},"publisher": {
    "@type": "Organization",
    "name": "<data:blog.title/>",
    "url": "<data:blog.canonicalHomepageUrl/>",
    "logo": {
      "@type": "ImageObject",
      "url": "https://lh3.googleusercontent.com/ULB6iBuCeTVvSjjjU1A-O8e9ZpVba6uvyhtiWRti_rBAs9yMYOFBujxriJRZ-A=h60",
      "width": 206,
      "height": 60
    }
  },"author": {
    "@type": "Person",
    "name": "<data:post.author.name.jsonEscaped/>",
    "url": "<data:post.author.authorPhoto.image.jsonEscaped/>"
  }
}</script>
Dua URL Gambar yang telah saya beri tanda di atas, silahkan kalian ganti dengan milik kalian.
  1. URL gambar pertama merupakan gambar pengganti apabila postingan tidak memiliki gambar.
  2. URL gambar kedua adalah logo blog.
Keduanya harus diganti secara manual, tetapi yang lainnya tidak perlu diutak atik lagi karena sudah bekerja secara otomatis.

Schema Markup Json-LD BreadcrumbList Blogger

Coming soon

Cara Pasang Script JsonLD ke Blogger

Untuk memasang script kedua di atas ke dalam blogspot, harus melalui editor HTML. Bagaimana caranya? Berikut langkah-langkahnya.
  1. Pertama silahkan login ke akun Blogger.
  2. Setelah itu, klik TEMA > Edit HTML.
  3. Selanjutnya cari potongan code ini <b:includable id='postMeta' var='post'>.
  4. Copy script JsonLD di atas, kemudian pastekan SETELAH kode tersebut di atas.
  5. Coba klik simpan, kemudian test salah satu postingan kalian di Structured Data Testing Tool Google.
  6. Bila tidak muncul, silahkan masukkan kode pemanggilnya. Dalam hal ini ada beberapa tempat yang bisa kalian pilih. Diantaranya:
    • Sesudah tag <b:loop values='data:posts' var='post'>
    • Sesudah <b:includable id='post' var='post'>
    • Sebelum atau sesudah <data:post.body/>
  7. Sekali lagi coba simpat template dan lihat hasilnya.
Bila di dalam template sudah terpasang Script JsonLD lainnya, silahkan tempatkan Script BlogPosting dan BreadcrumList tersebut di atas sesudahnya, tepatnya sesudah tag penutup </script>

Satu-satunya kekurangan yang dimiliki oleh script ini adalah tidak bisa disisipkan diantara tag <head> ... </head> dan harus ditempatkan di dalam tag <body> ... </body>.

Atau lebih tepatnya diantara tag <b:section class='main' id='main' preferred='yes' showaddelement='no'> ... </b:section>.

Hal ini disebabkan oleh mesin blogger yang tidak bisa merender beberapa tag  yang terdapat di dalam script json. Jadi pastikan kalian menempatkannya pada tag yang telah disebutkan di atas.

Selamat mencoba dan semoga berhasil. Bila ada yang kurang dipahami, silahkan meninggalkan komentar di bawah. Terima kasih telah berkunjung, salam satu CMS!