Valid Json-LD isPartOf Yoast SEO Untuk Blogger

Custom Json-LD isPartOf Yoast Untuk Blogspot - SEO (Search Engine Optimization) merupakan salah satu unsur penting dalam membangun dan mengembangkan sebuah Blog atau Website. Penerapan SEO yang baik, akan mampu menempatkan blog pada peringkat terbaik di mesin pencari, seperti Google.com, Bing.com dan sebagainya.

Sekarang ini ada berbagai macam metode Optimasi Mesin Pencari yang bisa diterapkan, termasuk salah satunya menggunakan Struktur data Schema.org yang valid. Dalam hal ini ada tiga opsi yang ditawarkan, yaitu menggunakan format microdata, RDFa dan JSON-LD. Format microdata dan RDFa dapat diterapkan dengan memasukkan markup tertentu satu persatu ke dalam HTML.

Tetapi lain halnya dengan Json-LD, dimana untuk memasangnya ke sebuah website, dapat dilakukan dengan mudah, cepat dan tidak ribet. Yaitu cukup menempelkan script json ke dalam template. Selain itu, Google sendiri lebih merekomendasikan penggunaan markup Json ketimbang format lainnya karena lebih mudah dicrawl dan dipahami oleh robot mesin pencari.

Json-LD sendiri terbagi ke dalam beberapa tipe, diantaranya Article, ArticleNews, BlogPosting, Breadcrumb, BreadcrumbList, Website, Webpage dan masih banyak lagi. Tetapi bagaimana jika beberapa tipe tersebut digabungkan dalam satu script? Jawabannya bisa, yaitu dengan menerapkan Json isPartOf.
JSON isPartOf merupakan format turunan dengan menggabungkan beberapa schema markup menjadi satu bagian (tidak terpisah) untuk mengatur dan memetakan konten situs. Contohnya markup Article, turunan (is part of) dari Website - Webpage - BreadcrumbList dan seterusnya. Contoh validnya, bisa dilihat DISINI atau gambar berikut.

Schema.org Json-LD isPartOf Blogger

Belakangan ini, markup struktur data isPartOf sudah mulai banyak digunakan dan telah menjadi populer, terutama di kalangan pengguna CMS Wordpress. Markup ini kian makin populer setelah Yoast SEO dengan menambahkannya ke dalam plugin mereka.

Lalu bagaimana dengan pengguna blogger? Nah khusus pengguna blogger, schema markup isPartOf ini juga bisa diterapkan di blog dengan tetap mendasari schema isPartOf umumnya. Berikut script dan cara memasukkannya ke dalam template.

JSON-LD isPartOf Blogger (untuk Posting Blog)

Untuk memudahkan pemasangan, silahkan cari di dalam template markup <b:includable id='postMeta' var='post'> ... </b:includable> kemudian ganti dengan yang berikut ini.
<b:includable id='postMeta' var='post'>
<b:if cond='data:view.isSingleItem'>
<script type='application/ld+json'>
{"@context":"https://schema.org",
"@graph":[{"@type":"Organization",
"@id":"<data:blog.canonicalHomepageUrl/>#organization",
"name":"<data:blog.title/>",
"url":"<data:blog.canonicalHomepageUrl/>",
"sameAs":[ "https://www.facebook.com/username",
"https://www.youtube.com/username",
"https://twitter.com/username",
"https://github.com/username",
"https://pinterest.com/username/",
"https://www.instagram.com/username"],
"logo":{"@type":"ImageObject",
"@id":"<data:blog.canonicalHomepageUrl/>#logo",
"url":"https://lh3.googleusercontent.com/-QWJ7M9UCRfw/XnY_3IdqnGI/AAAAAAAAAF0/5pfAk9bUiDMwkjcitnS_5YDi22VTcuVeQCLcBGAsYHQ/s1600/detro.png",
"width": 512,
"height": 512,
"caption":"<data:blog.title/>"},
"image":{"@id":"<data:blog.canonicalHomepageUrl/>#logo"},
"legalName":"<data:blog.title/>"},
{"@type":"WebSite",
"@id":"<data:blog.canonicalHomepageUrl/>#website",
"url":"<data:blog.canonicalHomepageUrl/>",
"name":"<data:blog.title/>",
"inLanguage":"id-ID",
"description":"Spesifikasi dan harga terbaru ponsel android, aplikasi gratis, tutorial, tips, dan masih banyak lagi.",
"publisher":{"@id":"<data:blog.canonicalHomepageUrl/>#organization"},
"potentialAction":{"@type":"SearchAction",
"target":"<data:blog.canonicalHomepageUrl/>search?q={search_term_string}",
"query-input":"required name=search_term_string"}},
{"@type":"ImageObject",
"@id":"<data:post.url.canonical/>#primaryimage",
"url":"<b:eval expr='(data:post.featuredImage ? resizeImage(data:post.featuredImage, 700, "700:366") : "https://lh3.googleusercontent.com/-95u03X5y-Bs/WtiAU5eRJHI/AAAAAAAAB8o/Ci6Nt7dgZLc-wyV4XIu2TupKW2TB_gefACLcBGAs/s1600/androlite-default-image.jpg").jsonEscaped'/>",
"width": 600,
"height": 314,
"caption":"<data:post.title/>"},
{"@type":["WebPage"],
"@id":"<data:post.url.canonical/>#webpage",
"url":"<data:post.url.canonical/>",
"name":"<data:post.title/> - <data:blog.title/>",
"isPartOf":{"@id":"<data:blog.canonicalHomepageUrl/>#website"},
"inLanguage":"id-ID",
"primaryImageOfPage":{"@id":"<data:post.url.canonical/>#primaryimage"},
"datePublished":"<data:post.date.iso8601/>",
"dateModified":"<data:post.lastUpdated.iso8601/>",
"description":"<data:blog.metaDescription.escaped/>",
"breadcrumb":{"@id":"<data:post.url.canonical/>#breadcrumb"}},
{"@type":"BreadcrumbList",
"@id":"<data:post.url.canonical/>#breadcrumb",
"itemListElement":[{"@type":"ListItem",
"position": 1,
"item":{"@type":"WebPage",
"@id":"<data:blog.canonicalHomepageUrl/>",
"url":"<data:blog.canonicalHomepageUrl/>",
"name":"Home"}},
{"@type":"ListItem",
"position": 2,
"item":{"@type":"WebPage",
"@id":"<b:if cond='data:post.labels'><b:loop index='num' values='data:post.labels' var='label'><b:if cond='data:num == (data:post.labels.size - 1)'><data:label.url.canonical/></b:if></b:loop></b:if>",
"url":"<b:if cond='data:post.labels'><b:loop index='num' values='data:post.labels' var='label'><b:if cond='data:num == (data:post.labels.size - 1)'><data:label.url.canonical/></b:if></b:loop></b:if>",
"name":"<b:if cond='data:post.labels'><b:loop index='num' values='data:post.labels' var='label'><b:if cond='data:num == (data:post.labels.size - 1)'><data:label.name/></b:if></b:loop></b:if>"}},
{"@type":"ListItem",
"position": 3,
"item":{"@type":"WebPage",
"@id":"<data:post.url.canonical/>",
"url":"<data:post.url.canonical/>",
"name":"<data:post.title/> - <data:blog.title/>"}}]},
{"@type":"Article",
"@id":"<data:post.url.canonical/>#article",
"isPartOf":{"@id":"<data:post.url.canonical/>#webpage"},
"author":{"@id":"<data:post.author.profileUrl/>"},
"headline":"<data:post.title/>",
"datePublished":"<data:post.date.iso8601/>",
"dateModified":"<data:post.lastUpdated.iso8601/>",
"mainEntityOfPage":{"@id":"<data:post.url.canonical/>#webpage"},
"publisher":{"@id":"<data:blog.canonicalHomepageUrl/>#organization"},
"image":{"@id":"<data:post.url.canonical/>#primaryimage"},
"keywords":"<data:post.title/>",
"articleSection":"<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/>, </b:loop></b:if>",
"inLanguage":"id-ID"},
{"@type":["Person"],
"@id":"<data:post.author.profileUrl/>",
"name":"<data:post.author.name.jsonEscaped/>",
"image":{"@type":"ImageObject",
"@id":"<data:blog.canonicalHomepageUrl/>#authorlogo",
"url":"<data:post.author.authorPhoto.image.jsonEscaped/>",
"caption":"<data:post.author.name.jsonEscaped/>"},
"description":"<data:post.author.aboutMe/>",
"sameAs":[ "https://www.facebook.com/username",
"https://www.youtube.com/username",
"https://twitter.com/username",
"https://github.com/username",
"https://pinterest.com/username/",
"https://www.instagram.com/username"]}]}</script>
</b:if>
</b:includable>
Silahakan edit beberapa bagian yang telah diberikan tanda di dalam kode tersebut. Seperti mengganti Username sosial media, memasukkan deskripsi utama blog secara manual, logo utama website dan sebagainya.
Struktur data JsonLD untuk halaman tersebut di atas, berfungsi dengan baik untuk Blogger Layout Versi 3. Sementara untuk versi 1 dan 2 hingga saat ini belum pernah saya coba.
Sekarang, penempatan kode pemanggil agar mesin blogger bisa merendernya. Untuk kode pemanggilnya adalah sebagai berikut.
<b:include data='post' name='postMeta'/>
Nah untuk menempatkan markup pemanggil tersebut, dalam hal ini ada beberapa tempat yang bisa kalian pilih.
  1. Pertama, di antara markup <b:includable id='post' var='post'> ... </b:includable>
  2. Kedua, di antara markup <b:loop values='data:posts' var='post'> ... </b:loop>
  3. Atau bisa juga sebelum atau sesudah markup <data:post.body/>

JsonLD isPartOf CollectionPage (Untuk Home Page, Label, dll)

Lantas bagaimana dengan untuk halaman depan (HomePage), label dan sebagainya? Nah dalam hal ini untuk saya pribadi, menggunakan JsonLD CollectionPage. Kode lengkapnya bisa kalian lihat berikut ini.
<b:if cond='data:view.isMultipleItems'>
<script type='application/ld+json'>
{"@context":"https://schema.org",
"@graph":[
{"@type":"Organization",
"@id":"<data:blog.canonicalHomepageUrl/>#organization",
"name":"<data:blog.title/>",
"url":"<data:blog.canonicalHomepageUrl/>",
"address": {"@type": "PostalAddress",
"addressLocality": "Jakarta, Jakarta Barat, Indonesia",
"streetAddress": "Jalan Yos Sudarso No.5, Jakarta, Jakarta Barat Pos 91511" },
"email": "your@gmail.com",
"telephone": "+6282xxxxxxxx",
"sameAs":["https://www.facebook.com/username",
"https://www.instagram.com/username",
"https://www.youtube.com/username",
"https://pinterest.com/username",
"https://twitter.com/username"],
"logo":{"@type":"ImageObject",
"@id":"<data:blog.canonicalHomepageUrl/>#logo",
"url":"https://lh3.googleusercontent.com/-QWJ7M9UCRfw/XnY_3IdqnGI/AAAAAAAAAF0/5pfAk9bUiDMwkjcitnS_5YDi22VTcuVeQCLcBGAsYHQ/s1600/detro.png",
"width":512,
"height":512,
"caption":"<data:blog.title/>"},
"image":{"@id":"<data:blog.canonicalHomepageUrl/>#logo"}},
{"@type":"WebSite",
"@id":"<data:blog.canonicalHomepageUrl/>#website",
"url":"<data:blog.canonicalHomepageUrl/>",
"name":"<data:blog.title/>",
"description":"<data:blog.metaDescription.escaped/>",
"publisher":{"@id":"<data:blog.canonicalHomepageUrl/>#organization"},
"potentialAction":{"@type":"SearchAction",
"target":"<data:blog.canonicalHomepageUrl/>search?q={search_term_string}",
"query-input":"required name=search_term_string"}},
{"@type":"CollectionPage",
"@id":"<data:blog.canonicalHomepageUrl/>#webpage",
"url":"<data:blog.canonicalHomepageUrl/>",
"inLanguage":"id-ID",
"name":"<data:blog.title/> - Tutorial, Tips, Trik and more",
"isPartOf":{"@id":"<data:blog.canonicalHomepageUrl/>#website"},
"about":{"@id":"<data:blog.canonicalHomepageUrl/>#organization"},
"description":"<data:blog.metaDescription.escaped/>"}]}
</script>
</b:if>
Untuk menempatkannya, bisa langsung sebelum tag penutup </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

Untuk melihat hasilnya apakah valid atau tidak, silahkan cek di Structured Data Testing Tool Google.

Kelebihan dan Kekurangan Json-LD isPartOf Blogger

Seperti yang telah dikemukakan di atas, markup struktur data Json-LD selain direkomendasikan Google, juga memiliki kelebihan lain dibandingkan format lainnya. Diantaranya:
  1. All in one.
  2. Lebih SEO Friendly.
  3. Mudah dan cepat diterapkan.
  4. Mudah dipahami oleh robot mesin pencari.
  5. Valid HTML 5.
  6. Dapat meningkatkan trafik organik dari mesin pencari.
  7. Dan sebagainya.

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 ketika kalian menempatkannya diantara tag yang telah disebutkan di atas.

Bagaimana? Script Json-LD isPartOf Yoast SEO Untuk Blogger ini lebih mudah diterapkan bukan? Selamat mencoba dan semoga pengunjung blog kalian bisa lebih meningkat. Terima kasih telah berkunjung, salam satu CMS!