Bikin Struktur Data Carousel untuk Video Youtube dengan JSON LD

VideoObject adalah tipe data yang ada di Schema.org dan biasanya digunakan untuk menyusun informasi tentang klip video. Jenis data ini memungkinkan webmaster dan pengembang web untuk mendeskripsikan file video sedemikian rupa sehingga mesin pencari dan platform lain dapat lebih memahami dan mengindeks konten artikel yang mengandung objek video.

Menggunakan VideoObject dapat meningkatan visibilitas video di mesin pencari dan mempercepat postingan artikel anda di indek oleh Google. Ketika informasi video disusun menggunakan jenis ini, akan sangat membantu algoritme mesin pencari mengekstrak dan menampilkan hasil yang lebih relevan. Misalnya, video dapat ditampilkan sebagai thumbnail atau carousel di hasil penelusuran, yang meningkatkan kemungkinan pengguna akan mengkliknya.

VideoObject menyertakan berbagai properti yang memungkinkan anda menelusuri informasi tentang video. Misalnya, anda dapat menentukan judul video, deskripsi, durasi, bahasa, kepenulisan, dan atribut penting lainnya. Hal ini membuat informasi lebih lengkap dan informatif bagi pengguna dan mesin pencari.

Selain itu, VideoObject dapat digunakan dalam jenis konteks lain pada struktur data Schema.org, yang memungkinkan anda membuat deskripsi konten yang lebih kompleks dan berlapis. Misalnya, video dapat ditautkan ke artikel, acara, atau produk tertentu, yang selanjutnya meningkatkan relevansi kontekstualnya.

JSON LD Rich Result Video Object

Secara keseluruhan, VideoObject adalah alat penting untuk mengoptimalkan konten video di Internet, yang membantu meningkatkan aksesibilitas dan visibilitasnya bagi pengguna dan mesin pencari. Untuk menyusun struktur data Carousel Video, kita memerlukan property ItemList. Dengan ItemList proses pembuatan Carousel video menjadi lebih mudah.

Pada artikel ini kami akan menjelaskan cara membuat struktur data Carousel untuk VideoObject. Sebagai study kasus kami akan menggunakan Google Blogger untuk menerapkan Carousel tersebut.

Apa itu Skema ItemList?

Secara sederhana, Skema ItemList digunakan untuk menandai daftar Item. Daftar dapat dari jenis apa pun, katakanlah film, produk, aplikasi, lagu, dll., tetapi semua item daftar harus memiliki jenis Skema yang sama. Anda juga dapat membaca definisi lengkap ItemList di Schema. Film. Resep.

Beberapa Item pada skema ItemList diperlukan untuk menyusun data dengan struktur data Carousel. Langkah pertama-tama Anda harus menentukan ItemList dan ListItem.

• ItemList: ItemList adalah daftar yang berisi semua properti dalam daftar.
• ListItem: Daftar semua elemen seperti URl, jenis, nama, posisi.
• item.name: Nama item. Seperti nama film atau nama resep.
• item.url: URL yang memenuhi syarat dari halaman item.
• item: properti individual dalam daftar. Seperti, Film, Restoran atau resep.
• position: menyatakan posisi item dalam struktur carousel.

Sedangkan Data Terstruktur Carousel adalah tampilan hasil pencarian seperti daftar horizontal. Mesin pencari Google biasanya menyajikan korsel film dengan gambar konten, judul, dan tahun dirilis. Ini juga menggunakan ini untuk buku dan banyak lainnya.

Carousel adalah hasil kaya seperti daftar yang dapat digeser orang di perangkat seluler. Ini menampilkan beberapa kartu dari situs yang sama (juga dikenal sebagai carousel host). Untuk mengaktifkan carousel untuk situs Anda, tambahkan data terstruktur Carousel yang dikombinasikan dengan salah satu jenis konten yang didukung.

Di mana data carousel dapat digunakan?

Anda dapat menggunakan markup Carousel untuk struktur data situs web Anda untuk menyusun data konten seperti:

• Film (movie)
• Kursus
• Resep
• Restoran
• Video (Klip atau Youtube)

Bagaimana Skema Carousel diterapkan?

Untuk menerapkan markup carousel di situs web anda, penting untuk memutuskan halaman situs web mana yang akan membawa markup.

1. Halaman Ringkasan (Summary Page): Halaman ini berisi deskripsi mini atau ringkasan dari setiap item atau itemList di mana setiap item dalam daftar memiliki tiga properti (jenis, posisi, dan URL).
2. Halaman Detail (Details Page): Halaman ini memberikan deskripsi terperinci tentang data yang menggunakan carousel untuk penataan data. Contoh: jika halaman ringkasan membahas tentang resep kue Nanas terbaik, maka setiap halaman detail akan memiliki properti data terstruktur RECIPE untuk resep tertentu.
3. Daftar Tunggal/ Semua dalam satu halaman: Ini adalah entitas satu halaman yang berisi semua informasi terkait carousel. Ini adalah tautan satu halaman.

Buat Script Carousel Skema VideoObject Youtube di Blogger

Seperti telah kami jelaskan di atas, pada contoh ini kami akan mempraktekkan skema Carousel Video Youtube untuk Google blogger. Meskipun Skema Carousel ini kita terapkan di blogger tapi dapat anda gunakan juga di template lainnya seperti Joomla, Drupal, Gohugo dan lainnya.

Di bawah ini adalah contoh script skema Carousel untuk Video Youtube.

Script struktur data "Carousel" untuk video Youtube

<b:includable id='metacarouselvideo' var='posts'>
<b:tag name='script' type='application/ld+json'>
{
&quot;@context&quot;:&quot;http://schema.org&quot;,
&quot;@type&quot;:&quot;ItemList&quot;,
&quot;itemListElement&quot;:
                    [
<b:loop index='i' values='data:posts' var='post'>
{
&quot;@type&quot;:&quot;ListItem&quot;,
&quot;position&quot;:<b:eval expr='data:i + 1'/>,
  
  &quot;item&quot;: {
  &quot;@type&quot;: &quot;VideoObject&quot;,
  &quot;name&quot;: &quot;<data:post.title.jsonEscaped/>&quot;,
  &quot;contentUrl&quot;: &quot;<data:post.url.canonical/>&quot;,  
  &quot;embedUrl&quot; : [&quot;https://youtu.be/0_PiolxXngw&quot;, &quot;https://youtu.be/zcdBK0_mEks&quot;, &quot;https://youtu.be/APHKg0Sv5ls&quot;, &quot;https://youtu.be/ex_HBaVgwiQ&quot;, &quot;https://youtu.be/xX7fupNKc14&quot;, &quot;https://youtu.be/8yib19VUbJA&quot;, &quot;https://youtu.be/Bdhh5grAtBk&quot;, &quot;https://youtu.be/KUJxf2utxlQ&quot;],
  <b:if cond='data:post.thumbnailUrl'>  
  &quot;thumbnailUrl&quot; : [&quot;https://img.youtube.com/vi/0_PiolxXngw/mqdefault.jpg&quot;, &quot;https://img.youtube.com/vi/zcdBK0_mEks/mqdefault.jpg&quot;, &quot;https://img.youtube.com/vi/APHKg0Sv5ls/mqdefault.jpg&quot;, &quot;https://img.youtube.com/vi/ex_HBaVgwiQ/mqdefault.jpg&quot;, &quot;https://img.youtube.com/vi/xX7fupNKc14/mqdefault.jpg&quot;, &quot;https://img.youtube.com/vi/8yib19VUbJA/mqdefault.jpg&quot;, &quot;https://img.youtube.com/vi/Bdhh5grAtBk/mqdefault.jpg&quot;, &quot;https://img.youtube.com/vi/KUJxf2utxlQ/mqdefault.jpg&quot;],  
  
&quot;thumbnail&quot;: &quot;<b:eval expr='data:post.thumbnailUrl'/>&quot;,
<b:else/>
&quot;thumbnail&quot;: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPDiGLN0WIVlBM4MWvmlAodRyGl94YerRvht_KaclgWxr6iBV387QY9KXiCheLF335MU5YJVht3rWP0NCQI7U9gPbIt7iRFKwhiP_eHjFjrvdhtsPEh4z3w0-gyLl0w96NCOPX_XjGDjgRikZh2xxfQU0ShdfZfw8cpvaq4SMO0vMToslIoAIOOqF53QI/s320/Mohon%20maf%20artikel%20ini%20tak%20ada%20gambar.jpg&quot;,   
&quot;thumbnailUrl&quot;: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPDiGLN0WIVlBM4MWvmlAodRyGl94YerRvht_KaclgWxr6iBV387QY9KXiCheLF335MU5YJVht3rWP0NCQI7U9gPbIt7iRFKwhiP_eHjFjrvdhtsPEh4z3w0-gyLl0w96NCOPX_XjGDjgRikZh2xxfQU0ShdfZfw8cpvaq4SMO0vMToslIoAIOOqF53QI/s320/Mohon%20maf%20artikel%20ini%20tak%20ada%20gambar.jpg&quot;,
</b:if>
&quot;uploadDate&quot;: &quot;<data:post.date.iso8601.jsonEscaped/>&quot;,
&quot;description&quot;: &quot;<data:post.snippet.jsonEscaped/>&quot;
}
}
<b:if cond='data:i != data:posts.length - 1'>,
</b:if></b:loop>
  ]

  }
</b:tag>
</b:includable>

Pada contoh script di atas kode "embedUrl" adalah alamat URL dari konten video anda yang ada di Youtube. Makin banyak video yang anda upload di Youtube, makin panjang pula kode "embedUrl".

Script di atas bisa anda letakkan sembarang di atas kode </body>, tapi script di atas belum aktif atau anda tak bisa menggunakan script tersebut. Agar script tersebut dapat anda gunakan, anda harus mengaktifkan script tersebut.

Cara mengaktfikan script tersebut cari kode "<b:includable id='post' var='post'>" dan ketikkan script berikut ini di bawah kode di atas.

Mengaktifkan struktur data "Carousel" untuk video Youtube

<b:if cond='data:posts.length &gt; 0'>
<b:include cond='data:view.isMultipleItems' data='posts' name='metacarouselvideo'/>  
</b:if>

Untuk masalah yang berkaitan dengan pemecahan masalah, Google Search Console adalah sahabat Anda dan akan membantu Anda dengan semua masalah Anda. Menggunakan carousel untuk menyusun data Anda tidak hanya membuatnya unik tetapi juga membuat pengguna mengunjungi situs web Anda berulang kali. Jika Anda bingung tentang skema atau jenis data terstruktur mana yang akan digunakan untuk menyusun situs web atau halaman web Anda, Anda selalu dapat merujuk ke posting sebelumnya yang membahas struktur data Schema.org.