Mengenal tentang Schema Markup: Mulai dari Definisi, Fungsi, Tipe, sampai Cara Memasangnya

Salah satu tools yang dapat dimanfaatkan oleh pemilik website untuk meningkatkan visibilitas di halaman hasil pencarian adalah schema markup.

Dalam artikel ini, akan dibahas apa itu schema markup, mulai dari definisi, fungsi, tipe, sampai dengan cara memasangnya.

Apa itu schema markup?

Schema markup, sering juga disebut dengan schema, structured data, structured data markup, adalah format data standar yang mengandung informasi dan konteks terhadap suatu halaman website.

Pada dasarnya, schema markup ini adalah piece of code (paling populer disajikan dalam JSON-LD) yang hanya akan dibaca oleh search engine dan tidak akan dilihat oleh user manusia.

Sebagai contoh, schema markup di halaman produk akan mengandung informasi berupa:

nama produk,
deskripsi,
rating produk,
penawaran yang datang dengan produk spesifik ini,
biaya pengiriman dan detailnya, dll.

Fungsi schema markup

Schema markup dapat meningkatkan akurasi pemahaman Google atau search engine lainnya terhadap suatu konten.

Selain itu, schema markup akan membantu membuat hasil pencarian jadi lebih menarik bagi user (rich result) dan mendorong mereka untuk berinteraksi lebih lanjut.

Rich result seperti FAQ, resep, dan lainnya dapat dicapai dengan menggunakan schema markup ini.

Tipe-tipe schema markup

Per 1 Maret 2024, terdapat 806 jenis schema markup dengan 1.474 schema property yang didokumentasikan di schema org.

Google sendiri saat ini hanya mendukung 35 jenis dari schema markup ini untuk dapat eligible menampilkan rich result:

Article
Book actions
Breadcrumb
Carousel
Course info
Course list
Dataset
Discussion forum
Education Q&A
Employer aggregate rating
Estimated salary
Event
Fact Check
FAQ
Home activity
Image metadata
Job posting
Learning video
Local business
Math solver
Movie
Organization
Practice problem
Product
Profile page
Q&A
Recipe
Review snippet
Sitelinks search box
Software app
Speakable
Subscription and paywalled content
Vacation rental
Vehicle listing
Video

Meskipun demikian, Martin Splitt mengatakan bahwa semua schema markup bermanfaat. Walaupun Google tidak menggunakannya saat ini, belum tentu schema markup tersebut tetap tidak digunakan ke depannya.

Every single piece of structured data helps, just because we are not using it for rich results today doesn’t mean we won’t use it tomorrow. @g33konaut pic.twitter.com/JdqEQedlJo
— Lily Ray 😏 (@lilyraynyc) November 15, 2019

Jadi, jika memungkinkan gunakanlah schema markup secara maksimal tetapi tetap relevan.

Di tulisan ini, kita akan membahas beberapa schema markup yang populer.

Article

Schema markup artikel dapat bermanfaat untuk segala jenis konten artikel, termasuk:

Blog,
Berita,
Resep,
Review, dsb.

Namun, tentu saja untuk jenis artikel yang lebih spesifik seperti berita atau resep, kamu juga disarankan untuk menambahkan schema markup yang sesuai.

Beberapa properti yang disarankan ada di schema markup artikel adalah:

Author (termasuk nama dan URL author page-nya)
Tanggal dan waktu artikel terakhir kali dipublikasikan
Tanggal dan waktu artikel terakhir kali diubah
Judul artikel
URL gambar yang digunakan di artikel

Berikut contoh sederhana dari schema markup artikel:

  
  <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "Article",
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://www.sactiest.com/2023/02/panduan-belajar-seo.html"
      },
      "headline": "Panduan Belajar SEO: Roadmap, Cara Belajar, dan Kesalahan Umum",
      "description": "Saya beberapa kali mendapat pertanyaan yang kurang lebih seperti ini, 'Saya lagi belajar SEO nih, Kak. Tapi ya gitu, masih belum...'",
      "datePublished": "2023-02-21T22:00:00+07:00",
      "dateModified": "2023-12-22T23:08:00+07:00",
      "image": {
        "@type": "ImageObject",
        "url: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqjKNW0TjsbmPI9tVxMMFp0FG2_NhJzKv9kvnCOOICU6EcMQi786pDDoad31WG8TOe7GLPgzuBJ9iiiJF5LAaE71TQJ-Su_wgDfpa_QlNRZJSxEKLG8QOE848Z89usttijicBXSU2nznuUzQ2fZ_EQrPmgRFNQOAw-7I46-g15bfgzBi6BiLSkH4cHBG4/w1200-h630-p-k-no-nu/Panduan%20Belajar%20SEO.jpg",
        "height: 630,
        "width: 1200
      },
      "publisher": {
        "@type": "Organization",
        "name: "Blogger",
        "logo: {
          "@type": "ImageObject",
          "url: "https://blogger.googleusercontent.com/img/b/U2hvZWJveA/AVvXsEgfMvYAhAbdHksiBA24JKmb2Tav6K0GviwztID3Cq4VpV96HaJfy0viIu8z1SSw_G9n5FQHZWSRao61M3e58ImahqBtr7LiOUS6m_w59IvDYwjmMcbq3fKW4JSbacqkbxTo8B90dWp0Cese92xfLMPe_tg11g/h60/",
          "width: 206,
          "height: 60
        }
      },
      "author": {
        "@type": "Person",
        "name: "Maulana",
        "url: "https://www.sactiest.com/p/about.html"
      }
    }
    </script>

Breadcrumb

Breadcrumb adalah schema markup untuk menunjukkan posisi halaman di hierarki atau taksonomi suatu website, dan berfungsi membantu user memahami dan menjelajahi website secara efektif—terutama untuk website yang punya banyak kategori, contohnya ecommerce website.

Untuk Google menampilkan breadcrumb di hasil pencarian, setidaknya kamu harus menambahkan dua list item di schema markup ini. List item tersebut mengandung setidaknya 3 properti:

item (URL)
nama
position

Berikut contoh schema markup breadcrumb:

  
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Books",
        "item": "https://example.com/books"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Science Fiction",
        "item": "https://example.com/books/science-fiction"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "Award Winners",
        "item": "https://example.com/books/science-fiction/award-winners"
      }]
    }
    </script>

FAQ

Halaman Pertanyaan Umum atau FAQ adalah halaman yang berisi daftar pertanyaan dan jawaban yang berkaitan dengan topik tertentu.

FAQ yang diberi markup berpotensi untuk muncul di halaman pencarian dalam bentuk accordion menu (mirip dengan fitur PAA, tetapi khusus untuk satu halaman website).

Meskipun munculnya fitur FAQ ini hilang timbul di hasil pencarian, dan Google juga sempat membatasinya hanya untuk website-website yang authoritative (government and health websites), menambahkan schema markup ini dirasa masih bermanfaat untuk menambahkan konteks suatu halaman kepada crawler.

Properti yang harus ada dalam schema ini tentu saja pertanyaan umum beserta jawabannya.

Berikut adalah contohnya:

  
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      "mainEntity": [{
        "@type": "Question",
        "name": "How to find an apprenticeship?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "<p>We provide an official service to search through available apprenticeships. To get started, create an account here, specify the desired region, and your preferences. You will be able to search through all officially registered open apprenticeships.</p>"
        }
      }, {
        "@type": "Question",
        "name": "Whom to contact?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "You can contact the apprenticeship office through our official phone hotline above, or with the web-form below. We generally respond to written requests within 7-10 days."
        }
      }]
    }
    </script>

Organization

Kamu dapat menambahkan schema markup organisasi untuk memberikan konteks kepada search engine tentang informasi perusahaan, seperti:

Nama,
Logo,
Alamat,
Informasi kontak, dsb.

Google memanfaatkan informasi dari schema ini untuk menampilkan Knowledge Panels untuk keyword-keyword yang relevan.

Properti yang sebaiknya ada di schema ini adalah:

Nama organisasi (termasuk legal name dan alternatifnya),
Deskripsi,
Logo,
URL (homepage website),
Nomor telepon,
Email,
Alamat,
Tahun didirikan, dsb.

Berikut contoh schema markup organisasi:

  <script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "image": "https://www.example.com/example_image.jpg",
  "url": "https://www.example.com",
  "sameAs": [
    "https://example.net/profile/example1234",
    "https://example.org/example1234"
  ],
  "logo": "https://www.example.com/images/logo.png",
  "name": "Example Corporation",
  "description": "The example corporation is well-known for producing high-quality widgets",
  "email": "contact@example.com",
  "telephone": "+47-99-999-9999",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Rue Improbable 99",
    "addressLocality": "Paris",
    "addressCountry": "FR",
    "addressRegion": "Ile-de-France",
    "postalCode": "75001"
  },
  "vatID": "FR12345678901",
  "iso6523Code": "0199:724500PMK2A2M1SQQ228"
}
</script>

Product

Halaman produk di website (terutama ecommerce) sebaiknya memiliki schema markup yang menjelaskan informasi berikut:

Nama produk
Gambar produk
Deskripsi produk
Gambar produk (URL)
Harga (dan mata uang)
Ketersediaan produk
Rating
Penawaran produk spesifik ini
Biaya pengiriman dan detailnya

Dengan menambahkan schema markup satu ini, Google akan memahami lebih baik tentang produk yang di-list dan berpotensi untuk muncul di tab shopping pada halaman hasil pencarian.

Selain schema markup produk, kamu juga dapat menggunakan schema offering, rating, dan review untuk menambahkan konteks kepada search engine tentang ulasan, SKU, dan detail penawaran suatu produk.

Berikut adalah contoh dari product schema markup:

  <script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "Executive Anvil",
  "image": [
    "https://example.com/photos/1x1/photo.jpg",
    "https://example.com/photos/4x3/photo.jpg",
    "https://example.com/photos/16x9/photo.jpg"
  ],
  "description": "Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.",
  "sku": "0446310786",
  "mpn": "925872",
  "brand": {
    "@type": "Brand",
    "name": "ACME"
  },
  "review": {
    "@type": "Review",
    "reviewRating": {
      "@type": "Rating",
      "ratingValue": 4,
      "bestRating": 5
    },
    "author": {
      "@type": "Person",
      "name": "Fred Benson"
    }
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": 4.4,
    "reviewCount": 89
  },
  "offers": {
    "@type": "Offer",
    "url": "https://example.com/anvil",
    "priceCurrency": "USD",
    "price": 119.99,
    "priceValidUntil": "2020-11-20",
    "itemCondition": "https://schema.org/UsedCondition",
    "availability": "https://schema.org/InStock"
  }
}
</script>

Profile page

Markup ini membantu Google memperjelas informasi tentang kreator, seperti:

Nama atau akun media sosial,
Foto profil,
Jumlah pengikut, atau popularitas konten mereka.

Google juga memanfaatkan markup ini saat membedakan kreator, dan dalam fitur seperti Perspectives (fitur baru di Google SERP) serta forum dan media sosial.

Beberapa properti yang disarankan ada untuk schema ini adalah:

Orang atau organisasi
Kredensial
Gambar
Statistik
URL

Kamu bisa cek lebih lanjut tentang schema markup satu ini di dokumentasi Google Search Central.

Berikut adalah contoh dari profile page schema markup:

  <script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ProfilePage",
  "dateCreated": "2019-12-23T12:34:00-05:00",
  "dateModified": "2019-12-26T14:53:00-05:00",
  "mainEntity": {
    "@type": "Person",
    "name": "Angelo Huff",
    "alternateName": "ahuff23",
    "identifier": "123475623",
    "interactionStatistic": [{
      "@type": "InteractionCounter",
      "interactionType": "https://schema.org/FollowAction",
      "userInteractionCount": 1
    },{
      "@type": "InteractionCounter",
      "interactionType": "https://schema.org/LikeAction",
      "userInteractionCount": 5
    }],
    "agentInteractionStatistic": {
      "@type": "InteractionCounter",
      "interactionType": "https://schema.org/WriteAction",
      "userInteractionCount": 2346
    },
    "description": "Defender of Truth",
    "image": "https://example.com/avatars/ahuff23.jpg",
    "sameAs": [
      "https://www.example.com/real-angelo",
      "https://example.com/profile/therealangelohuff"
    ]
  }
}
</script>

Rating/review

Review dan rating yang valid dapat ditampilkan dalam bentuk rich result atau pada Knowledge Panels, dan hal ini berlaku untuk banyak jenis konten termasuk:

Buku
Course
Event
Bisnis lokal
Film
Produk
Resep
Software

Beberapa properti yang disarankan ada di schema ini adalah:

Penulis review
Item yang di-review
Nama item yang di-review
Rating

Berikut adalah contoh dari review schema markup:

  <script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Review",
  "itemReviewed": {
    "@type": "Restaurant",
    "image": "https://www.example.com/seafood-restaurant.jpg",
    "name": "Legal Seafood",
    "servesCuisine": "Seafood",
    "priceRange": "$$$",
    "telephone": "1234567",
    "address" :{
      "@type": "PostalAddress",
      "streetAddress": "123 William St",
      "addressLocality": "New York",
      "addressRegion": "NY",
      "postalCode": "10038",
      "addressCountry": "US"
    }
  },
  "reviewRating": {
    "@type": "Rating",
    "ratingValue": "4"
  },
  "author": {
    "@type": "Person",
    "name": "Bob Smith"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Washington Times"
  }
}
</script>

Recipe

Resep adalah salah satu konten dengan rich result yang paling populer. Lewat schema markup ini, kamu bisa menambahkan informasi seperti:

Review dan rating,
Bahan-bahan yang dibutuhkan,
Waktu persiapan dan memasaknya,
Tips memasak, serta
Informasi nutrisi.

Berikut adalah contoh dari schema markup resep:

  <script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Recipe",
  "name": "Non-Alcoholic Piña Colada",
  "image": [
    "https://example.com/photos/1x1/photo.jpg",
    "https://example.com/photos/4x3/photo.jpg",
    "https://example.com/photos/16x9/photo.jpg"
  ],
  "author": {
    "@type": "Person",
    "name": "Mary Stone"
  },
  "datePublished": "2018-03-10",
  "description": "This non-alcoholic pina colada is everyone's favorite!",
  "recipeCuisine": "American",
  "prepTime": "PT1M",
  "cookTime": "PT2M",
  "totalTime": "PT3M",
  "keywords": "non-alcoholic",
  "recipeYield": "4 servings",
  "recipeCategory": "Drink",
  "nutrition": {
    "@type": "NutritionInformation",
    "calories": "120 calories"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "5",
    "ratingCount": "18"
  },
  "recipeIngredient": [
    "400ml of pineapple juice",
    "100ml cream of coconut",
    "ice"
  ],
  "recipeInstructions": [
    {
      "@type": "HowToStep",
      "name": "Blend",
      "text": "Blend 400ml of pineapple juice and 100ml cream of coconut until smooth.",
      "url": "https://example.com/non-alcoholic-pina-colada#step1",
      "image": "https://example.com/photos/non-alcoholic-pina-colada/step1.jpg"
    },
    {
      "@type": "HowToStep",
      "name": "Fill",
      "text": "Fill a glass with ice.",
      "url": "https://example.com/non-alcoholic-pina-colada#step2",
      "image": "https://example.com/photos/non-alcoholic-pina-colada/step2.jpg"
    },
    {
      "@type": "HowToStep",
      "name": "Pour",
      "text": "Pour the pineapple juice and coconut mixture over ice.",
      "url": "https://example.com/non-alcoholic-pina-colada#step3",
      "image": "https://example.com/photos/non-alcoholic-pina-colada/step3.jpg"
    }
  ],
  "video": {
    "@type": "VideoObject",
    "name": "How to Make a Non-Alcoholic Piña Colada",
    "description": "This is how you make a non-alcoholic piña colada.",
    "thumbnailUrl": [
      "https://example.com/photos/1x1/photo.jpg",
      "https://example.com/photos/4x3/photo.jpg",
      "https://example.com/photos/16x9/photo.jpg"
     ],
    "contentUrl": "https://www.example.com/video123.mp4",
    "embedUrl": "https://www.example.com/videoplayer?video=123",
    "uploadDate": "2018-02-05T08:00:00+08:00",
    "duration": "PT1M33S",
    "interactionStatistic": {
      "@type": "InteractionCounter",
      "interactionType": { "@type": "WatchAction" },
      "userInteractionCount": 2347
    },
    "expires": "2019-02-05T08:00:00+08:00"
   }
}
</script>

Video

Menambahkan schema markup pada halaman yang konten utamanya adalah video adalah best practice yang Google rekomendasikan.

Dengan schema markup video, kamu dapat memberikan informasi mengenai:

Deskripsi,
URL thumbnail,
Tanggal upload, serta
Durasi, dengan me-markup video Anda menggunakan VideoObject.

Konten video ini juga dapat muncul pada berbagai hasil pencarian:

Tab hasil pencarian video
Discover
Tab hasil pencarian gambar (berupa thumbnail)

Ada banyak properti yang bisa diimplementasikan dalam schema video, yaitu:

BroadcastEvent
ItemList
Clip
SeekToAction
Video pembelajaran

Masing-masing properti ini akan menghasilkan rich result yang berbeda-beda, dan baiknya digunakan sesuai dengan konten dan konteksnya.

Kamu bisa cek lebih detail mengenai schema vide di dokumentasi resmi Google.

Berikut contoh schema markup video:

  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "VideoObject",
      "name": "Introducing the self-driving bicycle in the Netherlands",
      "description": "This spring, Google is introducing the self-driving bicycle in Amsterdam, the world's premier cycling city. The Dutch cycle more than any other nation in the world, almost 900 kilometres per year per person, amounting to over 15 billion kilometres annually. The self-driving bicycle enables safe navigation through the city for Amsterdam residents, and furthers Google's ambition to improve urban mobility with technology. Google Netherlands takes enormous pride in the fact that a Dutch team worked on this innovation that will have great impact in their home country.",
      "thumbnailUrl": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
      ],
      "uploadDate": "2016-03-31T08:00:00+08:00",
      "duration": "PT1M54S",
      "contentUrl": "https://www.example.com/video/123/file.mp4",
      "embedUrl": "https://www.example.com/embed/123",
      "interactionStatistic": {
        "@type": "InteractionCounter",
        "interactionType": { "@type": "WatchAction" },
        "userInteractionCount": 5647018
      },
      "regionsAllowed": "US,NL"
    }
    </script>

Cara memasang schema markup

Terdapat beberapa cara untuk mengimplementasikan schema markup di website kamu, yang paling umum adalah dengan menggunakan plugin—atau dengan menambahkan schema markup code-nya secara manual.

Kamu bisa mengecek panduan bagi pemula terkait data struktur di schema.org.

Menggunakan plugin

Jika menggunakan CMS seperti Wix, WordPress, atau Shopify, kamu mungkin tidak bisa mengedit HTML secara langsung. Sebagai gantinya, CMS biasanya men-support plugin yang memungkinkan kamu untuk mengimplementasikan schema markup—Yoast, misalnya, bisa membantu dalam hal ini.

Kamu dapat menggunakan fitur apa pun berdasarkan CMS yang digunakan atau copy-paste code ke halaman website.

Jika menggunakan WordPress dengan editor Gutenberg, cukup tambahkan code block dan paste schema markup code-nya di sana.

Manual (coding)

Untuk cara ini, biasanya SEO akan meminta bantuan kepada software engineer.

Tergantung tech stack yang digunakan, pengerjaannya bisa sedikit berbeda. Namun, pada dasarnya, hal yang dilakukan adalah sama (menyematkan schema markup code di halaman yang relevan).

Cara mengecek schema yang sudah terpasang

Terdapat beberapa cara dalam memastikan apakah schema markup yang dipasang sudah benar dan seuai best practice.

Manual checking

Cara ini dilakukan dengan memanfaatkan developer tools di masing-masing browser.

Jika kamu menggunakan Google Chrome browser, kamu dapat mengakses Chrome Dev Tools dengan klik kanan di halaman yang ingin dicek schema markup-nya, lalu pilih Inspect—Ctrl + Shift + I untuk Windows.

Dari sana, kamu akan mengecek rendered HTML di tab Elements dan memastikan (lagi-lagi secara manual) apakah code dari schema markup-nya sudah benar.

Rich Results Test

Google merekomendasikan untuk menggunakan Rich Results Test untuk melihat simulasi rich result dari halaman website kamu yang sudah menggunakan schema markup.

Tools ini bisa diakses di halaman public Rich Results Test-nya maupun di Google Search Console masing-masing.

Copy-paste URL yang ingin kamu cek schema markup-nya.

Schema Markup Validator

Untuk validasi schema markup umum (selain dari yang didukung oleh Google), kamu dapat menggunakan Schema Markup Validator.

Caranya sama seperti menggunakan Rich Results Test, copy-paste URL yang ingin kamu cek schema markup-nya.

Demikian sedikit pembahasan mengenai schema markup, semoga bermanfaat.

Oh iya, schema markup bukan ranking factor.

Schema has nothing to do with rankings, so if something is violating our schema guidelines, that has no impact on ranking because ... schema wasn't involved in the ranking in the first place. We look at other factors to determine rankings. But it may cause a site to no longer be…
— Google SearchLiaison (@searchliaison) October 26, 2023

sactiest

Cari Blog Ini