Membuat Struktur Data Carousel Breadcrumb ItemList

· 2 min read

Menambahkan objek Schema.org JSON-LD ini ke situs Anda tidak menjamin bahwa Google akan memberi Anda hasil kaya atau cuplikan unggulan, tetapi akan me

Google memiliki cuplikan unggulan baru dalam versi beta yang disebut carousel. Ini adalah salah satu pustaka skema paling menarik yang keluar dalam beberapa tahun, dan mungkin menjadi pengubah permainan untuk usaha kecil, penerbit, afiliasi, dan bahkan merek besar di masa depan.  Di bawah ini Anda akan menemukan bagaimana menurut saya itu akan dikembangkan, cara berbagai jenis situs berpotensi menggunakannya dari penyedia layanan dan pengecer hingga blogger, pembuat konten, dan afiliasi.

Tetapi pertama-tama, harap diingat bahwa skema dan data terstruktur tidak dimaksudkan untuk meningkatkan SEO Anda, mereka dimaksudkan untuk membantu Anda mendapatkan hasil kaya dan lebih banyak ruang dalam hasil pencarian.

Konten dan halaman Anda masih harus layak ditampilkan dan berkualitas tinggi. Dengan demikian, apa pun yang dapat Anda lakukan untuk membantu Google dan pengguna memahami halaman Anda dengan lebih baik secara teori akan membantu SEO dan peringkat.

Data Terstruktur Carousel memang dapat mengubah hasil pencarian Anda dari tautan biru yang membosankan menjadi hasil kaya dengan elemen yang mencolok secara visual. 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.


Membuat Struktur Data Carousel Breadcrumb ItemList

Contoh Tampilan Struktur data Carousel
di hasil pencarian Google


Catatan: Menambahkan objek Schema.org JSON-LD ini ke situs Anda tidak menjamin bahwa Google akan memberi Anda hasil kaya atau cuplikan unggulan, tetapi akan membuat Anda memenuhi syarat untuk disertakan,

Di sinilah Anda dapat mempelajari data terstruktur carousel di bagian developer Google, dan data tersebut mendemonstrasikan cara menerapkannya di situs blog anda seperti Blogger atau wordpres. Tapi pada artikel ini, pembahasan hanya akan kami fokuskan pada pembuatan Carousel di Blogger.


A. Bahan Praktek

1. Template dari abag Vietick (Download).
2. Jangan gunakan akun Blogger anda yang sedang aktif atau sedang digunakan.
3. Gunakan akun Blogger baru (kami sarankan buat akun blogger baru).
4. Baca tutorials secara perlahan biar cepat paham.

Setelah anda menyiapkan semua bahan di point A, sebelum kita masuk ke inti materi ada baiknya kita berkenalan dengan Carousel.


B. Apa itu Struktur data Carousel (ItemList)

ItemList struktur data Carousal adalah hasil Schema Markup kaya yang sebagian besar akan ditampilkan di perangkat seluler saat pengguna menelusuri tiap informasi/artikel di Google. Carousel dapat ditukar oleh pengguna untuk melihat kartu berikutnya hanya di perangkat seluler. Kartu hasil kaya seperti itu di Google dapat membantu pemilik situs dalam banyak hal.

Namun, semua situs web tidak bisa mendapatkan fitur ini sampai mereka menerapkan Skema Data Terstruktur ItemList Carousel di situs web mereka.

Dalam panduan ini kita akan membagikan segala sesuatu tentang Skema ItemList, beberapa orang menyebutnya Skema Carousel juga. Tapi kami akan tetap menggunakan ItemLIst karena ini adalah nama standar yang ditetapkan oleh Schema.org secara resmi. Berdasarkan situs schema.org kami juga membuat alat pembuat skema gratis kami. Google juga memiliki panduan pengguna terperinci tentang jenis skema ini yang dapat Anda periksa di sini.

Mesin pencari seperti Google mengandalkan kami untuk memberi mereka data yang akurat dan terkini.  Jika Andalah yang menyediakannya dalam format yang mudah digunakan ini, dan kualitas konten Anda tinggi, Anda sekarang dapat mengalahkan blog-blog besar dan mengambil ruang di hasil pencarian Google.  Lagi pula, anda tahu isi artikel anda jika Anda seorang penulis, dan anda tahu daerah sekitar tempat tinggal jika anda seorang blogger lokal.

Saya ingin menunjukkan lagi bahwa Google bermaksud bersaing dengan TikTok dan platform "influencer" lainnya, Amazon dan eBay untuk berbelanja, dan Expedia atau AirBnB untuk pemesanan perjalanan.  Ini mungkin mengapa mereka memiliki perspektif dan memunculkan "permata tersembunyi".  ItemList Carousel ini mungkin menjadi bagian darinya dan waktu Anda untuk bersinar sebagai pembuat konten.  Anda memiliki konten dan pengalaman asli yang merupakan bagian dari E-E-A-T.  Jika tes beta skema ini berhasil, ini adalah kesempatan Anda untuk mendapatkan dan berkembang.


C. Penggunaan ItemList Struktur Data Carousel

Jika Anda menjalankan situs web Blogger dan tidak menerapkan Skema ItemList Carousel, maka anda mungkin kehilangan sejumlah besar lalu lintas organik yang berarti anda kehilangan banyak pembaca. Atau jika Anda menyediakan layanan apa pun di mana Anda menulis banyak artikel di situs web Blogger, maka anda dapat kembali menerapkan semua skema ItemList Carousel tersebut.

Hal baiknya adalah Anda tidak perlu menjadi ahli dalam pemrograman untuk menghasilkan kode skema ini. Anda dapat membuat semua jenis kode markup skema di situs web kami secara gratis dan hanya dalam beberapa klik. Anda dapat memvalidasi kode yang dihasilkan untuk menerapkan skema tersebut.

Sampai Carousel meninggalkan versi beta, kita tidak akan tahu persis bagaimana itu akan ditampilkan, apa yang akan dilakukannya, atau bagaimana itu akan berkembang.  Saat dalam versi beta, kita dapat mencoba mengisinya di hasil pencarian langsung.  Berikut lima cara yang ingin saya coba dan lakukan.  Jika Anda berada di salah satu ceruk ini, saya dengan senang hati mencoba dan membantu Anda melakukannya untuk melihat apakah itu berhasil (tergantung pada waktu dan ketersediaan).

Saya akan mencantumkan banyak ceruk, jenis bisnis, blogger, Wordpres dan lain-lain. Di bawah ini beberapa contoh, dimana anda bisa menerapkan Carousel.
  • Daftar kursus
  • Daftar Artikel
  • Film
  • Resep
  • Restoran
  • Acara (Events). dan
  • Imae (gambar)


D. Membuat Script Carousel Di blogger

Setelah anda mengenal dan megnetahui apa itu Carousel, sekarang kita praktekkan untuk membuat script dan meletakkannya di template Blogger anda. Kami anggap anda telah menyiapkan bahan-bahannya seperti poin "A" di atas, jika belum Download template "VTrick-Premium-Creative-Blogger-Template" anda copy paste ke akun bloger baru anda.

1. Test Template sebelum penerapan Carousel

Sebelum kita membuat kode, kita test terlebih dahulu template yang telah anda copy/salin ke dalam Blogger anda. Hasil pengetesan dapat anda lihat seperti gambar berikut.



Hasil test Struktur data
sebelum diterapkan Carousel



2. Buat Kode Carousel

Nach, pada bagian ini kita akan membuat script Carousel. Kami tak akan menjelaskan arti dan fungsi dari tiap kata script yang kami tulis, anda cukup copy/paste saja biar mudah dan cepat lalu lihat hasilnya.

Letakkan script di bawah ini:  di atas kode <b:includable id='indexPost' var='post'>
<b:includable id='indexMeta' 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;url&quot;:&quot;<data:post.url/>&quot;,
&quot;name&quot;:&quot;<data:post.title.jsonEscaped/>&quot;}
<b:if cond='data:i != data:posts.length - 1'>,
</b:if></b:loop>]}
</b:tag>
  
<b:if cond='data:view.isLabelSearch'>
<b:tag cond='data:view.isLabelSearch' name='script' type='application/ld+json'>
{
&quot;@context&quot;:&quot;http://schema.org&quot;,
&quot;@type&quot;:&quot;BreadcrumbList&quot;,
&quot;itemListElement&quot;:
[{
&quot;@type&quot;:&quot;ListItem&quot;,
&quot;position&quot;:1,
&quot;item&quot;:
{
&quot;@id&quot;:&quot;<data:view.url/>&quot;,
&quot;name&quot;:&quot;<data:view.title/>&quot;}},
{
&quot;@type&quot;:&quot;ListItem&quot;,
&quot;position&quot;:2,
&quot;item&quot;:
{
&quot;@id&quot;:&quot;<data:blog.searchUrl/>&quot;,
&quot;name&quot;:&quot;search&quot;}},
{
&quot;@type&quot;:&quot;ListItem&quot;,
&quot;position&quot;:3,
&quot;item&quot;:
{
&quot;@id&quot;:&quot;<data:view.url/>&quot;,
&quot;name&quot;:&quot;<data:view.search.label/>&quot;}}]}
</b:tag>
</b:if>
</b:includable>


Letakkan script di bawah ini: di bawah kode <b:includable id='main' var='this'>
<b:if cond='data:posts.length &gt; 0'>
<b:include cond='data:view.isMultipleItems' data='posts' name='indexMeta'/>
</b:if>

3. Cara Meletakkan/Menyalin Kode Carousel

Meskipun pada contoh script di atas, telah kami jealskan cara penempatan scriptnya. Mungkin ada baiknya kami jelaskan dalam bentuk gambar.

Untuk script pertama anda cari kode "<b:includable id='indexPost' var='post'>", setelah ketemu tempel script tersebut di atas kode "<b:includable id='indexPost' var='post'>". Perhatikan gambar berikut.



Cara Menyalin Kode Struktur data Carousel
di template blogger




Untuk script yang ke 2 atau kami menyebutnya script Eksekusi,, anda harus mengklik tombol "Jump to widget", kemudian anda klick "Blog1". Perhatikan gambar di bawah ini.



Contoh Cara Menyalin/Copy
Kode Carousel Eksekusi



4. Test Lagi Kode Carousel

Sekarang anda telah menyalin script Carousel di template blogger anda, mungkin pertanyaan yang muncul dibenak anda (terutama bagi pemula), apakah script Carousel tersebut berjalan. Untuk membuktikannya kita lakukan test lagi. Setelah kita test, layar pengujian telah menunjukkan object Carousel, itu artinya, script Carousel anda telah aktif dan berjalan.



Hasil test Akhir setelah diterapkan
Struktur Data Carousel


Sampai sini, anda pasti sudah bisa mengikuti isi artikel ini. Memang agak sedikit sulit tapi lebih sulit untuk mengikuti halaman hasil mesin pencari Google. Dengan merangkul strategi konten tingkat tinggi yang mencakup diversifikasi konten dan pengoptimalan niat, Anda akan secara organik menangkap lebih banyak peluang dari struktur data Carousel, sehingga hasil pencarian artikel anda di Google sering muncul dan dibaca oleh banyak pembaca.
Subscribe on LinkedIn

Silahkan Berkomentar, Kakak...! Bunda...!

Posting Komentar