Apa itu Schema Markup dan Rich Snippets?

Schema Markup adalah kode yang ditambahkan ke halaman web untuk membantu mesin pencari memahami konten secara lebih baik.

Dengan markup ini, informasi tertentu, seperti ulasan, acara, produk, atau bisnis lokal, dapat ditampilkan dalam hasil pencarian sebagai rich snippets, yang meningkatkan visibilitas dan daya tarik bagi pengguna untuk mengunjungi.

Implementasi schema markup bisa dilakukan menggunakan JSON-LD, Microdata, atau RDFa, dengan JSON-LD sebagai format yang paling direkomendasikan oleh Google karena lebih mudah dibaca dan dikelola.

Menggunakan schema markup yang relevan dapat meningkatkan SEO, meningkatkan klik, dan memberikan pengalaman pengguna yang lebih kaya.

Series: Belajar SEO Pemula Hingga Mahir

Jenis-Jenis Schema Markup

Schema Markup sendiri ada banyak jenisnya. Setiap jenis dapat menampilkan tampilan Rich Snippet tersendiri. Berikut ini tipe yang dipahami oleh Google:

1. Article: Untuk berita, blog, dan jenis artikel lainnya.
2. Book: Untuk buku dengan detail seperti penulis, penilaian, dan ulasan.
3. Breadcrumb: Untuk tautan navigasi yang membantu pengguna memahami struktur halaman dalam sebuah situs.
4. Course: Untuk kursus pendidikan dengan detail seperti penyedia kursus.
5. Dataset: Untuk kumpulan data terstruktur, sering digunakan dalam tabel data.
6. Event: Untuk acara seperti konser, webinar, dan festival, menampilkan tanggal, lokasi, dan informasi tiket.
7. FAQ (Frequently Asked Questions): Untuk FAQ dengan pertanyaan dan jawaban.
8. HowTo: Untuk instruksi langkah demi langkah dalam menyelesaikan tugas.
9. Image: Untuk informasi terstruktur tentang gambar.
10. Job Posting: Untuk daftar pekerjaan dengan informasi seperti judul pekerjaan, gaji, dan lokasi.
11. Local Business: Untuk bisnis lokal dengan informasi seperti alamat, jam operasional, dan detail kontak.
12. Logo: Untuk menentukan logo dari sebuah organisasi.
13. Media: Termasuk berbagai jenis media, terutama video dan gambar.
14. Movie: Untuk film, termasuk detail seperti penilaian dan jadwal tayang.
15. Offer: Untuk penawaran atau diskon produk, sering digunakan dalam e-commerce.
16. Person: Untuk detail tentang individu, seperti nama, jabatan, dan kontak.
17. Product: Untuk produk dengan detail seperti harga, ketersediaan, dan ulasan.
18. Q&A: Untuk halaman tanya jawab, cocok untuk forum.
19. Recipe: Untuk resep dengan informasi seperti bahan, waktu memasak, dan nutrisi.
20. Review: Untuk ulasan dan penilaian, sering dipasangkan dengan halaman produk atau layanan.
21. Software Application: Untuk perangkat lunak atau aplikasi dengan detail seperti sistem operasi, kategori, dan harga.
22. Speakable: Untuk konten yang dapat diucapkan oleh perangkat (misalnya, Google Assistant).
23. Video: Untuk video dengan informasi seperti deskripsi, tanggal unggah, dan durasi.
24. WebPage: Untuk informasi terstruktur tentang halaman web.
25. WebSite: Untuk informasi umum tentang situs web, seperti URL pencarian.

Untuk memahami lebih lanjut dapat langsung ke Dokumentasi Schema Markup Google.

Cara Implementasi Schema Markup

Ada 3 cara mengimplementasikan schema markup yaitu:

1. JSON-LD
2. Microdata
3. RDFa

Jika ingin memahami lebih lanjut mengenai Schema markup bisa langsung ke SCHEMA.ORG

Menggunakan JSON-LD

Gaya ini adalah yang paling direkomendasikan oleh Google. Dari sisi teknis juga sangat mudah diimplementasikan dibandingkan 2 lainnya.

  <script  type="application/ld+json">
  {
  "@context":  "https://schema.org/",
  "@type":  "Recipe",
  "name":  "Party Coffee Cake",
  "author":  {
  "@type":  "Person",
  "name":  "Mary Stone"
  },
  "datePublished":  "2018-03-10",
  "description":  "This coffee cake is awesome and perfect for parties.",
  "prepTime":  "PT20M"
  }
  </script>

Menggunakan Microdata

<section itemscope itemtype="https://example.org/animals#cat">
    <h1 itemprop="name">Hedral</h1>
    <p itemprop="desc">Hedral is a male american domestic
    shorthair, with a fluffy black fur with white paws and belly.</p>
    <img itemprop="img" src="hedral.jpeg" alt="" title="Hedral, age 18 months">
</section>

Menggunakan RDFa

<p vocab="http://schema.org/" typeof="Person">
   My name is
   <span property="name">Manu Sporny</span>
   and you can give me a ring via
   <span property="telephone">1-800-555-0199</span>
   or visit 
   <a property="url" href="http://manu.sporny.org/">my homepage</a>.
</p>

Uji Coba Schema Markup

Google sudah menyediakan tool untuk melakukan uji coba untuk:

1. Melakukan validasi terhadap Schema Markup
2. Melihat Rich Snippet berdasarkan Schema Markup sebuah halaman website.

Untuk mencoba bisa langsung ke Google Schema Markup Validator

Schema Markup Generator

Ada banyak generator yang dapat membantu dalam membuat Schema Markup. Silakan google saja "Schema Markup Generator" untuk melihat tool terkini.

Dengan generator ini, pengguna dapat memilih jenis markup yang sesuai (seperti artikel, bisnis lokal, FAQ, dll.), mengisi informasi yang diperlukan, dan secara otomatis menghasilkan kode dalam format JSON-LD atau lainnya.

Kode ini kemudian dapat ditempelkan ke halaman web untuk meningkatkan SEO dan membuat hasil pencarian lebih informatif. Berikut contohnya:

<html>
  <head>
    <title>Party Coffee Cake</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Party Coffee Cake",
      "author": {
        "@type": "Person",
        "name": "Mary Stone"
      },
      "datePublished": "2018-03-10",
      "description": "This coffee cake is awesome and perfect for parties.",
      "prepTime": "PT20M"
    }
    </script>
  </head>
  <body>
    <h2>Party coffee cake recipe</h2>
    <p>
      <i>by Mary Stone, 2018-03-10</i>
    </p>
    <p>
      This coffee cake is awesome and perfect for parties.
    </p>
    <p>
      Preparation time: 20 minutes
    </p>
  </body>
</html>