Membuat Script JSON LD Image Untuk Stuktur Data Blogger
·
2 min read
·
Label
BlogSite
Dalam acara kumpul-kumpul webmaster baru-baru ini, John Mueller dari Google berbicara tentang bagaimana raksasa pencarian tersebut berencana untuk menggunakan pencarian gambar untuk tugas-tugas yang lebih bersifat transaksional, lebih edukatif, dan lebih terkait pencarian pada tahun 2020 dan seterusnya. Kami telah melihat peningkatan penggunaan gambar dalam Rich Card dan cuplikan fitur kaya lainnya yang menyertakan visual dan kami berharap hal ini akan terus berlanjut. Ini berarti bahwa memiliki ukuran gambar yang valid menjadi lebih penting dari sebelumnya.
Schema markup adalah format standar yang memungkinkan mesin pencari untuk menafsirkan dan mengatur informasi pada halaman web. Bila diterapkan pada gambar, ia menyediakan konteks tambahan di luar apa yang disampaikan konten visual. Berikut adalah beberapa wawasan utama dari berbagai perspektif tentang penerapan stuktur data image.
a. Sudut Pandang Mesin Pencari.
- Mesin pencari seperti Google, Bing, dan Yahoo mengandalkan data terstruktur untuk meningkatkan pemahaman mereka tentang konten web. Dengan menggunakan Markup Skema, Anda membantu mereka mengenali gambar, relevansinya, dan hubungannya dengan elemen lain pada halaman.
- Gambar yang diberi markup dengan benar dapat muncul di cuplikan kaya, panel pengetahuan, dan hasil pencarian gambar, sehingga meningkatkan visibilitasnya.
b. Pengalaman Pengguna (User Experience).
- Data terstruktur memberi manfaat bagi pengguna dengan meningkatkan pengalaman pengguna secara keseluruhan. Bila gambar dijelaskan secara akurat, pengguna dapat menemukan konten yang relevan dengan lebih mudah.
- Bayangkan sebuah blog resep yang setiap resepnya menyertakan gambar. Dengan data terstruktur, mesin telusur dapat menampilkan gambar resep, waktu memasak, dan peringkat langsung di hasil penelusuran, sehingga menarik pengguna untuk mengeklik.
c. Aksesibilitas dan Teknologi Bantuan.
- Data terstruktur membuat gambar Anda lebih mudah diakses oleh penyandang disabilitas. Pembaca layar dan teknologi bantuan lainnya mengandalkan informasi ini untuk mendeskripsikan gambar kepada pengguna.
- Misalnya, teks alt seperti "Kue keping cokelat di atas loyang" memberikan konteks bagi mesin pencari dan pengguna yang memiliki gangguan penglihatan.
1. Menerapkan Data Terstruktur untuk Gambar
Sekarang, mari kita bahas cara menggunakan data terstruktur secara efektif untuk gambar Anda:
a. Alt Text (Teks Alternatif)
- Teks alt merupakan bagian mendasar dari data terstruktur. Teks ini menjelaskan konten gambar secara ringkas.
- Contoh: Jika Anda memiliki gambar kamera antik, teks alt-nya bisa berupa "Kamera film antik dengan casing kulit."
- Ingatlah untuk menjaga teks alt tetap relevan, deskriptif, dan ringkas.
b. Skema Objek Gambar.
- Gunakan skema ImageObject untuk memberikan informasi terperinci tentang gambar Anda. Sertakan properti seperti nama, deskripsi, contentUrl, dan thumbnailUrl.
Di bawah ini, kami berikan contoh dasar dari script struktur data untuk Image yang biasa digunakan pada tempalte blogger.
<b:includable id='postMetadataJSONImage'>
"image": {
"@type": "ImageObject",
<b:if cond='data:post.featuredImage.isResizable'>
"url": "<b:eval expr='resizeImage(data:post.featuredImage, 1200, "1200:630")'/>",
"height": 630,
"width": 1200
<b:else/>
"url": "https://lh3.googleusercontent.com/ULB6iBuCeTVvSjjjU1A-O8e9ZpVba6uvyhtiWRti_rBAs9yMYOFBujxriJRZ-A=w1200",
"height": 348,
"width": 1200
</b:if>
},
</b:includable>c. Pengujian Data Terstruktur.
- Sebelum menerapkan data terstruktur, validasi atau test data tersebut menggunakan alat seperti Alat Pengujian Data Terstruktur Google. Perbaiki semua kesalahan atau peringatan.
- Pantau data terstruktur Anda secara berkala untuk memastikannya tetap akurat dan terkini.
2. Apa saja persyaratan ukuran gambar Google untuk Situs Web
Sebagaimana dinyatakan pada Januari 2024, ekstensi gambar Google untuk cuplikan kaya memerlukan resolusi gambar dan rasio aspek spesifik berikut:
- Gambar persegi-Square images (1 x 1) minimal 300 x 300; direkomendasikan 1.200 x 1.200.
- Gambar lanskap-Landscape images (1,91 x 1): minimal 600 x 314. Rekomendasinya adalah 1.200 x 628.
- Format file: Google mendukung format gambar berikut untuk hasil kaya dan gambar unggulan: BMP, GIF, JPEG, PNG, WebP, dan SVG.
- Ketajaman gambar harus dipertahankan setelah pemotongan dan pengubahan ukuran.
Untuk lebih mengoftimalkan struktur data iamge, Google memperbarui Panduan Gambar Data Terstrukturnya. Google mengambil pendekatan yang lebih terstruktur dengan hal-hal spesifik dalam gambar data terstrukturnya untuk penggunaan gambar.
Sebelumnya, kami hanya perlu memberikan URL untuk setiap gambar. Kini, Google mengindikasikan bahwa ia menginginkan "Bidang berulang ImageObject atau URL". Meskipun beberapa halaman kami tidak berisi gambar, panduan baru menyatakan, "Setiap halaman harus berisi setidaknya satu gambar, dan tidak disebutkan bahwa ini hanya berlaku untuk halaman dan postingan yang menyertakan markup skema. Perbedaannya dapat berarti apakah konten Anda muncul di Google Cards populer atau tidak.
3. Menerapkan Markup Data Terstruktur untuk Gambar
Data terstruktur, yang sering dinyatakan dalam markup Schema.org, berfungsi sebagai bahasa universal yang menjembatani kesenjangan antara konten yang dapat dibaca manusia dan data yang dapat dipahami mesin. Saat diterapkan pada gambar, data terstruktur menawarkan beberapa manfaat:
a. Rich Snippet dan Tampilan SERP yang Disempurnakan:
- Data terstruktur memungkinkan mesin telusur membuat rich snippet untuk gambar Anda. Snippet ini dapat mencakup detail seperti jenis gambar (produk, resep, acara, dll.), peringkat, dan informasi relevan lainnya.
- Misalnya, jika Anda menjalankan situs e-commerce, data terstruktur dapat menampilkan gambar produk beserta harga, ketersediaan, dan peringkat bintang langsung di hasil penelusuran.
b. Peningkatan Peringkat Penelusuran Gambar.
- Mesin telusur menggunakan data terstruktur untuk lebih memahami konteks dan relevansi gambar Anda. Pemahaman ini dapat berdampak positif pada peringkat penelusuran gambar Anda.
- Dengan memberikan informasi terperinci tentang gambar, Anda meningkatkan peluang gambar tersebut muncul dalam kueri penelusuran yang relevan.
c. Aksesibilitas dan Pengalaman Pengguna.
- Data terstruktur tidak hanya menguntungkan mesin pencari tetapi juga pengguna. Saat pembaca layar menemukan gambar yang terstruktur dengan baik, mereka dapat memberikan deskripsi yang lebih akurat kepada pengguna yang memiliki gangguan penglihatan.
- Gambar yang diberi tanda dengan benar meningkatkan aksesibilitas secara keseluruhan dan berkontribusi pada pengalaman pengguna yang positif.
Setelah anda memahami pentingnya struktur data image untuk sebuah blog, sekarang kita mulai menerapkan struktur data image pada tempalte blogger. Biasanya dan umumnya tiap gambar akan ditampilkan dihalaman postingan. Oleh karena itu, kita pun harus membuat struktur data image di halaman postingan atau BlogPosting.
Berikut adalah contoh script JSON LD struktur data BlogPosting yang didalamnya terdapat object Image.
<script type='application/ld+json'>
{
"@context":"https://schema.org",
"@type":"BlogPosting",
"mainEntityOfPage":
{"@type":"WebPage",
"@id":"<data:post.url.canonical.jsonEscaped/>"},
"headline":"<data:post.title.jsonEscaped/>",
"description":"<data:post.snippets.short.jsonEscaped/>",
"datePublished":"<data:post.date.iso8601.jsonEscaped/>",
"dateModified":"<data:post.lastUpdated.iso8601.jsonEscaped/>",
"image":{
"@type":"ImageObject",
<b:if cond='data:post.featuredImage.isResizable'>
"url":"<b:eval expr='resizeImage(data:post.featuredImage, 1200, "1200:675")'/>",
"height":675,"width":1200<b:else/> "url":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3GWbrsQnqIs5yh18u2XuzdOSswiIxBtzXixSGmhFamQ_8RXRpfPqTJmKoB8aEYwc6BQkCp1Mo8Df9SgKkFB9u3DyPeGE-MOhDx-_xF284DbVJb_iiZDZCxS_isbSVquVMc2u6aBuGoobuHjK44LC3BCuxyJdu_DTbTqToPc3Ufh01GVU/s1600/no-image-available%20copy.jpg","height":348,"width":1200</b:if>},
<b:if cond='data:post.thumbnailUrl'>
"thumbnailUrl": "<data:post.thumbnailUrl/>"
</b:if>
</script>Selain di postingan artikel, struktur data Image juga digunakan oleh object WebPage. Biar contoh scriptnya lebih lengkap, berikut adalah contoh script JSON-LD struktur data WebPage yang didalamnya terdapat object Image.
<script type='application/ld+json'>
{
"@context": "http://schema.org",
"@type": "WebPage",
"@id": "<data:view.url/>#webpage",
"url": "<data:post.url.canonical/>",
"name": "<data:post.title.jsonEscaped/>",
<b:if cond='data:post.featuredImage'>
"primaryImageOfPage":
{
"@id": "<data:view.url/>#image"},
<b:else/>
"image":
{
"@type": "ImageObject",
"@id": "<data:view.url/>#image",
"caption": "<data:post.title.jsonEscaped/>",
"url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRDo6ylljwvU7hLVWRd9cIciBEO4sknBzOHQGECuvW5x8ZK6LuFj890M6HCZZM9j61NaqQU3DA1_SJZELqdtiIEdUejC9zkIf_lLDFFgR3dXAQ2l2lqadxk0waF_lYet5olTZX19oEbYHYJSMaBScwIACW1pGs3TtnR7ZCu7P_FqmzX61yUasXjXmPdC6l/s320/Logo%20Inchi%20copy.png",
"image": [
{
"@type": "ImageObject",
<b:if cond='data:post.featuredImage'>
"url": "<b:eval expr='resizeImage(data:post.featuredImage, 1200, "1200:675")'/>",
"height": 630,
"width": 1200
<b:else/>
"url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3GWbrsQnqIs5yh18u2XuzdOSswiIxBtzXixSGmhFamQ_8RXRpfPqTJmKoB8aEYwc6BQkCp1Mo8Df9SgKkFB9u3DyPeGE-MOhDx-_xF284DbVJb_iiZDZCxS_isbSVquVMc2u6aBuGoobuHjK44LC3BCuxyJdu_DTbTqToPc3Ufh01GVU/s1600/no-image-available%20copy.jpg",
"height": 348,
"width": 630
</b:if>
},
{
"@type": "ImageObject",
<b:if cond='data:post.firstImageUrl'>
"url": "<data:post.firstImageUrl/>",
"height": 630,
"width": 1200
<b:else/>
"url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3GWbrsQnqIs5yh18u2XuzdOSswiIxBtzXixSGmhFamQ_8RXRpfPqTJmKoB8aEYwc6BQkCp1Mo8Df9SgKkFB9u3DyPeGE-MOhDx-_xF284DbVJb_iiZDZCxS_isbSVquVMc2u6aBuGoobuHjK44LC3BCuxyJdu_DTbTqToPc3Ufh01GVU/s1600/no-image-available%20copy.jpg",
"height": 348,
"width": 630
</b:if>
},
{
"@type": "ImageObject",
<b:if cond='data:post.thumbnailUrl'>
"url": "<b:eval expr='data:post.thumbnailUrl'/>",
"height": 630,
"width": 1200
<b:else/>
"url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3GWbrsQnqIs5yh18u2XuzdOSswiIxBtzXixSGmhFamQ_8RXRpfPqTJmKoB8aEYwc6BQkCp1Mo8Df9SgKkFB9u3DyPeGE-MOhDx-_xF284DbVJb_iiZDZCxS_isbSVquVMc2u6aBuGoobuHjK44LC3BCuxyJdu_DTbTqToPc3Ufh01GVU/s1600/no-image-available%20copy.jpg",
"height": 630,
"width": 1200
</b:if>
}
]
}}
</b:if>
</script>Bila melihat contoh script di atas, agak sedikit bingung, karena kami menulisnya secara lengkap beda dengan yang lainnya. Jadi, anda jangan segan-segan menulis di kolam komentar jika mengalami masalah dengan penulisan struktur data tersebut.
Menggabungkan data terstruktur untuk gambar/image merupakan teknik SEO yang ampuh. Dengan menyediakan konteks, meningkatkan aksesibilitas, dan meningkatkan pengalaman pengguna, Anda akan meningkatkan visibilitas situs web dan melibatkan audiens secara efektif. Ingat, setiap piksel penting dalam lanskap digital!.
Silahkan Berkomentar, Kakak...! Bunda...!
Posting Komentar