Cara Menggunakan Metadata Blogger dengan JSON LD Schema.org
·
2 min read
·
Label
BlogSite
organization,metadata,blogger,WebSite,WebPage,Article,BlogPosting,ImageObject,Person,Author
Template anda boleh saja menggunakan atribut Microdata atau RDFa, tetapi Google telah sangat merekomendasikan penggunaan stuktur data JSON LD. Hal ini dapat anda baca di pernyataan resmi Google "Google merekomendasikan agar Anda memulai dengan Pengujian Hasil Kaya untuk melihat hasil kaya Google yang dapat dibuat untuk halaman Anda. Untuk validasi skema umum, gunakan Validator Markup Skema untuk menguji semua jenis markup schema.org, tanpa validasi khusus Google."
kode HTML template blogger mendukung banyak sekali struktur data, diantaranya yang terkenal adalah Opengraph dan JSON LD yang banyak digunakan. Coba anda perhatikan penulisan kode HTML dibawah ini yang menggunaakn struktur data.
1. Struktur Meta Data JSON LD
Google telah menerbitkan banyak informasi di Pusat Penelusurannya tentang cara menempatkan metadata pada kode html template anda agar lebih mudah ditemukan dan di indeks. Anda juga dapat melihat bahwa metadata tersebut dikelola berdasarkan tanggal pembaruan setiap halaman, misalnya “Terakhir diperbarui 2024-01-26 UTC“. Akhir minggu lalu. Itu sudah terkini.
Tentu saja, mereka juga menunjukkan cara menggunakan Mikrodata, tetapi yang direkomendasikan adalah penggunaan JSON-LD, penyertaan informasi yang diperlukan secara terstruktur dan terpusat melalui tag SCRIPT di tajuk halaman. Dengan demikian, informasi tentang situs web secara umum, seperti nama penulis, nama penerbit (organisasi) dan informasi halaman artikel dapat digabungkan secara terpisah dalam satu bagian kode JSON-LD.
Secara manual penulisan JSON LD sangat sulit dan membingungkan, namun bagi anda yang baru mencoba JSON LD ada banyak generator schema.org online yang bisa digunakan untuk mempermudah penulisan kode JSON LD, seperti "https://technicalseo.com/tools/schema-markup-generator/". Namun, generator ini sayangnya tidak memetakan semua kemungkinan dan entri yang berguna, sehingga mereka hanya dapat menghasilkan templat umum untuk dielaborasi.
Schema.org yang ditulis dengan bahasa JSON LD memiliki banyak sekali object dan property, namun pada artikel ini kami akan menjelaskan beberapa object yang biasa dan umum digunakan di Blogger.
Nama penulis atau pemilik blog salah satu property yang sangat penting di Blogger. Properti ini memberikan kejelasan siapa yang menulis blog, dimana alamat penulis, berapa nomor teleponnya dan nama email penulis.
Di bawah ini adalah contoh penulisan JSON LD untuk Person.
<script type="application/ld+json">
{
"@context": "http://www.schema.org",
"@type": "Person",
"@id": "<data:view.url.canonical.jsonEscaped/>#person",
"name": "<data:post.author.jsonEscaped/>",
<b:if cond='data:post.authorAboutMe'>
"url": "<data:post.author.profileUrl/>",
<b:else/>
"url": "https://www.blogger.com/profile/08958087252392329520",
</b:if>
"gender": "male",
"givenName": "Bata",
"familyName": "Om Iwan",
"birthDate": "1977",
"birthPlace": "Jawa Barat, Indonesia",
"alternateName": "Iwan Setiawan",
"additionalName": "setiawan",
"alumniOf": {
"@type": "CollegeOrUniversity",
"name": "University of HIMPALA HMP 311",
"url": "https://www.unas.ac.id/",
"sameAs": "https://www.instagram.com/himpalaunas/"
}
}
</script>Kebanyakan blog dikelola oleh perorangan dan belum tentu oleh organisasi, jadi Anda mungkin berpikir area ini tidak menarik, tetapi ada alasannya: hanya di sini Anda dapat menyimpan tautan ke logo blog Anda, yang kemudian dapat ditampilkan dalam pencarian.
Nama organisasi sanat penting, karena Google akan mencari siapa yang menerbitkan (publisher) blog. Biasanya penerbit bisa perorangan atau organisasi. Jika anda menggunakan penerbit blog (publisher) perorangan gunakan struktur JSON LD Person (author) seperti di atas.
Di bawah ini adalah contoh cara menulis struktur data JSON LD Organization.
<script type="application/ld+json">
"publisher":
{
"@context": "http://schema.org",
"@type": "Organization",
"@id": "<data:view.url.canonical.jsonEscaped/>#organization",
"url": "<data:view.url.canonical.jsonEscaped/>",
"name": "Inchimediatama Nusantara",
"foundingDate": "2009",
"legalName" : "Inchimediatama Nusantara",
"logo": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz6JYLaq1_DkQMs0yJBpGZZve00P5m-7HPxrRIYhDdVng6kHfmZc4x9EW_vI0DyspmFsWtcMenBJzfaummNCefFmTdZr5c8M1IL9l2sufVKbaSVEQs-0feAUpmCkDu4Eo-1rCR60XZ66Ym5BFLYe2dnPHWRHqRp4-OpmJE56J9Z-zhvg/s1600/logo%20unixwinbsd.png",
"image": "<b:eval expr='data:post.firstImageUrl.jsonEscaped'/>",
"sameAs": [
"https://www.youtube.com/@unixbsdshell",
"https://www.facebook.com/unixlesson",
"https://x.com/iwanset96143401",
"httpss://www.github.com/unixbsdshell"
],
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+62 812 8906 5249",
"email": "datainchi@gmail.com",
"contactType": "Administrator"
}
}
</script>Struktur data image termasuk logo blog, foto penulis atau juga gambar halaman depan blog anda. Perhatikan contoh di bawah ini cara menulis image dengan JSON LD.
<script type="application/ld+json">
"image": [
{
"@type": "ImageObject",
"@id": "<data:view.url.canonical.jsonEscaped/>#image",
<b:if cond='data:post.firstImageUrl'>
"url": "<data:post.firstImageUrl/>",
"height": 630,
"width": 1200
<b:else/>
"url": "<b:eval expr='resizeImage(data:post.featuredImage, 1200, "1200:630")'/>",
"height": 200,
"width": 510
</b:if>
},
{
"@type": "ImageObject",
"@id": "<data:view.url.canonical.jsonEscaped/>#image",
<b:if cond='data:post.author.authorPhoto'>
"url": "<data:post.author.authorPhoto.image.jsonEscaped/>",
"height": 630,
"width": 1200
<b:else/>
"url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqh8vZc2N7xq6HwBNgFgZynTrc43VgxNpj8vNY0cQoLg_WHTc5x8iUCDDC-lwLsRvqMbo6pid86kb-ZbDZYxaUoAOdxonZmo3kLGbzL4g-UvxmvUv2IkjMacwGi2M2OZjgJk4RS8-NUTmjNldxRxfnBVEf2fOxGtiL8eoI0DwjEjDtwQ/s220/jaka.jpg",
"height": 348,
"width": 1200
</b:if>
},
{
"@type": "ImageObject",
<b:if cond='data:post.authorPhoto.url'>
"url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqh8vZc2N7xq6HwBNgFgZynTrc43VgxNpj8vNY0cQoLg_WHTc5x8iUCDDC-lwLsRvqMbo6pid86kb-ZbDZYxaUoAOdxonZmo3kLGbzL4g-UvxmvUv2IkjMacwGi2M2OZjgJk4RS8-NUTmjNldxRxfnBVEf2fOxGtiL8eoI0DwjEjDtwQ/s220/jaka.jpg",
"height": 348,
"width": 1200
<b:else/>
"url": "<data:post.firstImageUrl/>",
"height": 630,
"width": 1200
</b:if>
}
],
</script>Object JSON-LD yang terkait dengan situs web bernama WebSite. Pada penggunaannya jangan sampai tertukar dengan jenis webPage.
<b:if cond='data:view.isHomepage'>
<script type='application/ld+json'>
{
"@context":"http://schema.org",
"@type":"WebSite",
"name":"<data:view.title.escaped/>",
"url":"<data:view.url.canonical/>",
"potentialAction":{
"@type":"SearchAction",
"target":"<data:view.url.canonical/>search?q={search_term_string}",
"query-input":"required name=search_term_string"
}
}
</script>
</b:if>Yang menonjol dalam blok ini adalah potensiAction, yang menentukan kemungkinan untuk membiarkan mesin pencari (Google, apa pun) mengintegrasikan Kotak Pencarian Sitelinks, kotak pencarian di dalam daftar hasil, seperti yang dijelaskan di sini. Ada format singkat untuk ini dan beberapa generator seperti Merkle menggunakannya, tetapi tidak direkomendasikan, karena tidak standar.
Blok JSON-LD yang dijelaskan sebelumnya pada dasarnya hanya persiapan untuk deskripsi halaman individual yang akan diindeks oleh mesin pencari. Blok berikut sekarang menjelaskan halaman itu sendiri dan menyertakan blok yang dijelaskan sebelumnya dengan merujuk ke @id:
<b:if cond='data:view.isSingleItem or data:view.isMultipleItems'>
<script type='application/ld+json'>
{
"@context": "https://schema.org",
"@type": "WebPage",
"@id": "<data:view.url.canonical.jsonEscaped/>#webpage",
"url": "<data:view.url.canonical.jsonEscaped/>",
"name": "<data:view.title/>",
"description": "Website Untuk Para Blogger Mania",
"acquireLicensePage": "https://www.inchimediatama.org/",
"alternateName": "Website Untuk Para Blogger Mania",
"headline": "Website Untuk Para Blogger Mania",
"alternativeHeadline": "<b:eval expr='data:view.description.jsonEscaped'/>"
}
</script>
</b:if>Selain deskripsi halaman web sebelumnya, blok berikut adalah deskripsi halaman yang lebih terperinci sebagai artikel atau postingan blog.
<script type='application/ld+json'>
{
"@context": "https://schema.org",
"@type": "Article",
"@id": "<data:post.url.canonical.jsonEscaped/>#article",
"mainEntityOfPage": {
"@id": "<data:post.url.canonical.jsonEscaped/>#webpage"
},
"headline": "<data:post.title.jsonEscaped/>",
"publisher": {
"@id": "<data:post.url.canonical.jsonEscaped/>#organization"
},
"datePublished": "<data:post.date.iso8601.jsonEscaped/>",
"dateModified": "<data:post.lastUpdated.iso8601.jsonEscaped/>",
"keywords": "<data:post.title.jsonEscaped/>",
"wordcount": <data:post.body.size/>,
"editor": "<data:post.author.name.jsonEscaped/>",
"author": {
"@type": "Person",
"name": "<data:post.author.name.jsonEscaped/>"
<b:if cond='data:post.author.profileUrl'>
,"url": "<data:post.author.profileUrl.jsonEscaped/>"
</b:if>
}
}
</script>2. Cara Test JSON LD
Bila semuanya sudah anda buat dan dimasukkan kedalam kode tempalte Blogger anda, sebaiknya uji kode yang dihasilkan. Schema.org menawarkan alat pengujian yang dapat anda buka di https://validator.schema.org/. Selain itu, ada Google Rich Results Test, yang memvalidasi kode Anda terhadap implementasi yang sebagian spesifik untuk mesin pencari mereka sendiri.
Mungkin ada beberapa byte lebih yang dikirimkan ke pengguna di browser atau bot mesin pencari, tetapi keuntungannya adalah, semua informasi yang menjelaskan halaman disimpan di satu tempat di header halaman dan tidak ada yang tersebar di seluruh HTML lagi. Pemeliharaan kode dan meta data menjadi jauh lebih mudah.
Silahkan Berkomentar, Kakak...! Bunda...!
Posting Komentar