Cara Menambahkan Metadata JSON Post di Blogger

Membahas tentang cara memasang Post MetaData JSON di Blogger sesuai SEO yang disarankan oleh Google.
Artikel kali ini akan membahas tentang cara memasang Post MetaData JSON di Blogger, bisa diterapkan di template blogger layout v3 maupun layout v2.

metadata json post di blogger

TaufiqHdyt.com - Terdapat 2 cara dalam memaksimalkan teknik Search Engine Optimization (SEO) dalam sebuah situs, yaitu dengan Optimasi SEO On-Page dan SEO Off-Page. Optimasi On-Page yaitu optimasi yang dilakukan pada situs itu sendiri, seperti pemasangan Keyword, struktur data yang valid dan penambahan kode metadata khusus; berbeda dengan Optimasi Off-Page yang melakukan optimasi dengan cara submit situs di webmaster, menanam backlink di situs top, dan sejenisnya.

Mengenal Metadata

Metadata, menurut wikipedia, adalah informasi terstruktur yang mendeskripsikan, menjelaskan, menemukan, atau setidaknya menjadikan suatu informasi mudah untuk ditemukan kembali, digunakan, atau dikelola. Lebih khusus tentang tag Meta pada struktur HTML berfungsi sebagai pemberi informasi metadata dari sebuah halaman web. Tag meta ini dapat dipakai juga untuk menyatakan deskripsi/keterangan dari suatu halaman web dan untuk menjelaskan mengenai kata kunci (keyword) yang terkait serta untuk metadata lain tanpa "head".

Metode Pemasangan Metadata pada HTML

Menurut Blog Bung Frangki, ada 2 jenis metode dalam pemasangannya di Blogger; yang pertama menggunakan format Microdata, dimana meta tag khusus tersebut dipasang di tiap tag html; misal pada tag div berikut:
<div itemscope="" itemtype="https://schema.org/WebSite"/>
Yang kedua menggunakan format JSON-LD yang mana meta tag disusun dalam format JavaScript Object Notation (JSON) dan diapit dalam tag html script dengan attribute type khusus yaitu application/ld+json:
<script type='application/ld+json'>
{
 "@context": "http://schema.org",
 "@type": "BlogPosting",
 "mainEntityOfPage": {
  "@type": "WebPage",
  "@id": "<data:post.url.canonical.jsonEscaped/>"
 }
}
</script>

Untuk lebih jelasnya bisa dilihat pada gambar berikut:


Pada artikel kali ini kita akan menggunakan cara kedua, memakai JSON-LD. Sebenarnya Blogger sendiri sudah menyediakan tag khusus yang dipasang di dalam tag article pada template layout v3, tetapi setelah saya mencoba memasangnya di blog ini yang masih menggunakan template layout v2 dan hasilnya ternyata work dengan sedikit perubahan.

Memasang JSON Metadata Post pada Blogger

Pemasangannya cukup mudah apabila template blogger yang sobat pakai menggunakan template layout V3, caranya hanya dengan menambahkan kode dibawah ini di antara tag article.
<b:include data='post' name='postMetadataJSON'/>
Jadi nanti hasilnya akan seperti ini;
<article>
 ...
 <b:include data='post' name='postMetadataJSON'/>
 ...
</article>

Sobat bisa mengedit secara manual kode yang digenerate secara otomatis oleh blogger tersebut menggunakan kode di bawah ini;
<!-- <b:include data='post' name='postMetadataJSON'/> -->
<script type='application/ld+json'>
{
 "@context": "http://schema.org",
 "@type": "BlogPosting",
 "mainEntityOfPage": {
  "@type": "WebPage",
  "@id": "<data:post.url.canonical.jsonEscaped/>"
 },
 "headline": "<data:post.title.jsonEscaped/>",
 "description": "<b:eval expr='(data:post.body snippet { length: 255, links: false, linebreaks: false, ellipsis: true }).jsonEscaped'/>",
 <b:if cond='data:view.isSingleItem'>"articleBody": "<b:eval expr='(data:post.body).jsonEscaped'/>",</b:if>
 "datePublished": "<data:post.date.iso8601.jsonEscaped/>",
 "dateModified": "<data:post.lastUpdated.iso8601.jsonEscaped/>",
 "image": {
  "@type": "ImageObject",
  "url": "<b:eval expr='(data:post.firstImageUrl ? resizeImage(data:post.firstImageUrl, 1200, "1200:630") : "URL-GAMBAR-JIKA-POSTINGAN-NO-IMAGE").jsonEscaped'/>",
  "height": <b:eval expr='data:post.firstImageUrl ? 630 : 348'/>,
  "width": 1200
 },
 "publisher": {
  "@type": "Organization",
  "name": "Blogger",
  "logo": {
   "@type": "ImageObject",
   "url": "URL-LOGO-ATAU-BANNER-BLOG",
   "width": 206,
   "height": 60
  }
 },
 "author": {
  "@type": "Person",
  "name": "<data:post.author.name.jsonEscaped/>",
  "url": "<data:post.author.profileUrl.jsonEscaped/>",
  "image": "<data:post.author.authorPhoto.image.jsonEscaped/>"
 }
}
</script>
Silahkan jika ingin mengubah kode di atas.

Bagi yang mengalami error

<!--Can't find substitution for tag [post.author.name.jsonEscaped]-->
<!--Can't find substitution for tag [post.lastUpdated.iso8601]-->

Bisa mengganti kode sebelumnya dengan kode berikut:
data:post.lastUpdated.iso8601.jsonEscaped menjadi data:post.lastUpdatedISO8601.

Demikian artikel tentang Cara Menambahkan Metadata JSON Post di Blogger. Semoga bermanfaat.

Referensi

https://id.wikipedia.org/wiki/Meta
https://id.wikipedia.org/wiki/Metadata
https://www.bungfrangki.com/2018/04/structured-metadata-json.html

Posting Komentar