Script JSON-LD NewsArticle Blogger (Blogspot) dan Cara Pasang

AndroLite
AndroLite.com : Bagaimana Cara Pasang Script Json-LD NewsArticle Untuk Blogger (Blogspot) Terbaru 2024 - Pernah dengar istilah "Boost your SEO with schema markup Json-LD"? Saya rasa sebagian dari sobat sudah pernah mendengarnya. Dan memang benar, Schema markup JSONLD merupakan salah satu teknik terbaik untuk menerapkan "SEO on page".

Mengapa demikian? Ada beberapa alasan kenapa Schema Markup JsonLD menjadi salah satu yang terbaik dibandingkan jenis microdata dan RDFa. Diantaranya karena selain lebih terstruktur dan ringan juga lebih mudah dipahami, dicrawl dan dibaca oleh robot mesin pencari.

Bukan hanya itu saja, Google sendiri sebagai salah satu mesin pencari terbesar di dunia ternyata lebih merekomendasikan penggunaan markup JsonLD dibandingkan jenis microdata dan RDFA. Baca lebih lanjut Disini.

Schema Markup JSONLD sendiri terbagi kedalam beberapa jenis, diantaranya Article, BlogPosting, Review, Person, WebPage, Website, BreadcrumbList, dan masih banyak lagi, termasuk yang akan kita bahas pada kesempatan kali ini, yaitu NewsArticle.

Schema Markup JSONLD NewsArticle ini sangat cocok digunakan untuk blog / website yang memuat konten tentang 'berita' dengan frekuensi update 2 sampai 5 artikel perhari. Dan ini berlaku untuk semua CMS, termasuk Blogger (blogspot).

Nah, sehubungan dengan hal tersebut di atas, pada kesempatan kali ini saya akan memberikan sebuah Script custom JsonLD NewsArticle beserta panduan lengkap bagaimana cara memasukkannya ke dalam template.

Baca juga: Script Json-LD isPartOf Yoast SEO Untuk Blogger

Script Json-LD NewsArticle Blogger

Script Schema Markup JsonLD NewsArticle di bawah, berfungsi dengan baik untuk Blogger Layout versi 3 (b:layoutsVersion='3') Widget versi 2 (b:defaultwidgetversion='2').

Sementara untuk Blogger Layout versi 1 dan 2, hingga saat ini belum pernah saya coba.
Pertama, silahkan copy script di bawah lalu pastekan ke dalam Notepad, Notepad++ atau aplikasi editor lainnya untuk mengedit 2 baris di dalamnya.

<script type="application/ld+json">
{"@context":"https://schema.org",
"@type":"NewsArticle",
"mainEntityOfPage":{"@type":"WebPage",
"@id":"<data:blog.canonicalUrl/>"},
"headline":"<data:post.title/>",
"image":{"@type":"ImageObject",
"url":"<b:eval expr='(data:post.featuredImage ?: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZHABBQq4lv_u3o6urciqZH8V87HLCq0k-qxL8B063P5w1w2w_uUMz0amS3fuiXPz5gf1emFU1Ia6Ku-4vTtTlVXhjB2ThvJs9Ut2KezO0FE_tph2AiuivgmnFKAkzh74iIxlQThZx8R8/s1600/androlite-default-image.jpg").jsonEscaped'/>",
"height":366,
"width":700},
"datePublished":"<data:post.date.iso8601/>",
"dateModified":"<data:post.lastUpdated.iso8601/>",
"author":{"@type":"Person",
"name":"<data:post.author.name.jsonEscaped/>"},
"publisher":{"@type":"Organization",
"name":"<data:blog.title/>",
"logo":{"@type":"ImageObject",
"url":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4yUL7ndcdd38R7nqluPlsoYDwkXkyKqOxWekBBZOolcxrnhaGMWPstAE5YOkHheEsyGhcGZPsNXyp4iOf1HZBMh23KBEfGJElHZ5OXtYJcHa-ifV1Wr_ssjBtqBvmBHFKelKgml6ZB9mV/s1600/androlite-logo.png",
"width":160,
"height":50}},
"description":"<b:eval expr='data:blog.metaDescription.escaped ? data:blog.metaDescription.escaped : data:this.description'/>"}
</script>
  1. URL gambar pertama adalah gambar pengganti apabila postingan tidak memiliki gambar.
  2. Nilai 700 adalah lebar gambar postingan.
  3. Nilai 366 adalah tinggi gambar postingan.
  4. URL gambar kedua merupakan logo blog.
  5. Nilai 160 adalah tinggi gambar logo blog.
  6. Nilai 50 adalah tinggi gambar logo blog.
Bagian-bagian yang telah saya beri tanda tersebut, silahkan sobat sesuaikan. Sisanya tidak perlu diutak atik lagi karena sudah bekerja secara otomatis.

Cara Pasang Script JsonLD NewsArticle ke dalam Template Blogger

Untuk memasukkan script tersebut di atas ke dalam template blogspot, harus melalui editor HTML. Untuk melakukannya, silahkan simak langkah-langkahnya berikut ini.
  1. Pertama login ke akun Blogger.
  2. Setelah itu, klik TEMA > Edit HTML.
  3. Setelah itu cari potongan code ini <b:includable id='postMeta' var='post'> (gunakan CTRL + F untuk memudahkan pencarian).
  4. Copy script JsonLD yang telah sobat edit tersebut, kemudian tempelkan SETELAHnya.
  5. Selanjutnya, untuk mencegah terjadinya proses pemanggilan ganda script tersebut, coba cari di dalam template <b:include id='postMeta' var='post'/>.

    Jika sudah ada, maka silahkan langsung klik SIMPAN. Tetapi bila tidak ada, maka silahkan lanjutkan ke langkah selanjutnya.
  6. Copy code ini: <b:include id='postMeta' var='post'/> kemudian tempelkan (paste) di salah satu pilihan berikut.
    • Sesudah tag <b:loop values='data:posts' var='post'>
    • Sesudah tag <b:includable id='post' var='post'>
    • Sebelum atau sesudah <data:post.body/>
  7. Terakhir, silahkan klik SIMPAN dan lihat hasilnya.

Untuk mengetahui apakah mesin blogger sudah merender / membacanya, silahkan cek salah satu URL postingan di Structured Data Testing Tool Google.

Baca juga: Script JsonLD BlogPosting dan BreadcrumbList Blogger

Kekurangan Markup JsonLD NewsArticle Blogger

Sejauh ini, menurut saya satu-satunya kekurangan yang dimiliki oleh script JsonLD NewsArticle untuk blogger ini adalah tidak bisa disisipkan diantara tag <head> ... </head>, melainkan harus ditempatkan di dalam tag <body> ... </body>.

Lebih tepatnya harus diantara tag <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='2' visible='true'> ... </b:section> atau yang mirip. Itupun harus berada di tempat yang tepat (seperti yang telah disebutkan di atas).

Mengapa demikian? Karena hal ini disebabkan oleh mesin blogger yang tidak bisa merender beberapa kode XML otomatis yang telah disisipkan kedalam dalam script JSON+LD di atas.

Jadi pastikan kode tersebut ditempatkan pada tag yang telah diarahkan.

Selamat mencoba dan semoga berhasil. Bila ada kendala dalam proses pemasangan, silahkan tinggalkan komentar di bawah. Terima kasih telah berkunjung, salam satu CMS!

Related Post

Open Comment