Cara menambahkan schema markup pada artikel blog

by

helmy

Guest post dari sahabat -,

Apakabar sobat masih bersemangatkah hari ini? apakah anda sedang membuka halaman tentang cara menambahkan schema markup kedalam artikel blog karena penasaran? apasih schema markup dan keuntungan menambahkan script tersebut kedalam artikel blog ? tenang , semuanya akan dibahas pada halaman ini

Setiap blogger pemula mendambakan halaman webnya mendapatkan cuplikan kaya dihasil pencarian , tentu saja cuplikan kaya atau rich snippet ada banyak jenisnya dan tidak bisa diperoleh kalau struktur pembangun web tidak mendukung konsep schema yang benar

Biasanya ketika menjelajah dihalaman pencarian kita melihat cuplikan konten yang biasa-biasa saja diawali dengan judul – breadcrumb – deskripsi , nah anda pasti pernah melihat beberapa web memiliki tampilan yang berbeda misal ada bintangnya , ada fotonya , menjadi question dialog , menjadi listicle dsb

Cuplikan yang unik mendorong pengunjung untuk melakukan klik, itulah sebabnya banyak web yang berlomba-lomba memasang schema org untuk mendapatkan cuplikan kaya di internet

Beberapa template premium seperti viomagz buatan mas sugeng misalnya, secara template telah mengadopsi schema markup untuk membantu mesin pencari memahami blog anda

Tetapi itu hanya terbatas pada schema markup defult untuk website/blog saja , tujuan yang ingin dicapai palingan sebatas sitename , sitelinks , searchbox

Bagaimana dengan schema markup didalam artikel ? kita harus menambahkannya secara default pada halaman entry

Konon katanya dengan menambahkan schema markup (yang valid) bisa membantu halaman memperoleh peringkat yang lebih tinggi dan itu sudah dibuktikan oleh sebagian besar webmaster

Pengertian schema markup

Schema.org adalah kegiatan komunitas kolaboratif yang misinya adalah “membuat, mengelola, dan mempromosikan skema data terstruktur di Internet, di halaman web, dalam pesan email, dll.”

Webmaster menggunakan kosakata bersama ini untuk mengkompilasi metadata di situs web mereka dan untuk membantu mesin pencari memahami konten yang diterbitkan, suatu teknik yang dikenal sebagai optimisasi mesin pencari.

Schema.org adalah inisiatif yang diluncurkan pada 2 Juni 2011 oleh Bing, Google, Yahoo! dan Yandex (operator mesin pencari terbesar di dunia pada saat itu untuk membuat dan mendukung serangkaian sistem markup data terstruktur terstruktur pada halaman web.

Pada November 2011, Yandex (yang memiliki mesin pencari terbesar di Rusia) bergabung dengan inisiatif ini. Mereka mengusulkan untuk menggunakan kosa kata schema.org dengan Microdata, RDFa atau JSON-LD untuk menandai konten situs web dengan metadata tentang dirinya sendiri.

Markup dapat dikenali oleh robot mesin pencari dan pengurai lainnya, yang memberikan akses ke makna situs (lihat Semantic Web). Inisiatif ini juga menjelaskan mekanisme ekstensi untuk menambahkan properti tambahan. Diskusi publik tentang inisiatif ini terutama terjadi pada milis kosakata publik W3C.

Pada 2012, ontologi GoodRelations diintegrasikan ke dalam Schema.org.

Sebagian besar kosa kata di Schema.org didasarkan pada format sebelumnya seperti Microformats, FOAF dan OpenCyc.   Microformats, dengan perwakilan hCard yang paling dominan, terus (hingga 2015) untuk didistribusikan secara luas di Web, di mana penyebaran Schema.org telah berkembang pesat antara 2012 dan 2014.

Pada 2015, Google mulai mendukung format JSON-LD dan merekomendasikan, mulai September 2017, untuk menggunakan JSON-LD untuk data terstruktur sedapat mungkin. 

Meskipun penggunaan Schema.org memiliki keuntungan yang jelas, adopsi tetap relatif buruk. Sebuah survei tahun 2016 terhadap 300 agen pemasaran B2C yang berbasis di AS dan pengiklan di seluruh industri mengungkapkan penyerapan hanya 17%.

Sebagai validator sebagai alat uji data terstruktur dari Google,  validator Microformats Yandex, [18] dan validator Bing Markup  dapat digunakan untuk menguji validitas data yang ditandai dengan skema dan microdata

Beberapa penanda skema seperti Organisasi dan Orang digunakan untuk mempengaruhi hasil Grafik Pengetahuan Google.

Contoh penggunaan schema org

Berikut adalah contoh penandaan informasi film dan sutradara menggunakan diagram dan data Schema.org Untuk menandai data, atribut elemen sama dengan URL skema yang digunakan.

Atribut elemen didefinisikan sebagai ruang lingkup dari tipe elemen. Jenis item saat ini dapat ditentukan menggunakan atribut itemprop.

Micro data

< div  itemscope  itemtype = “http://schema.org/Movie” >
  < h1  itemprop = “name” > Avatar </ h1 >
  < div  itemprop = “director”  itemscope  itemtype = “http://schema.org/Person ” >
  Direktur: < span  itemprop = ” name ” > James Cameron </ span >
(lahir < time  itemprop = ” birthDate ” datetime =”1954-08-16″ > 16 Agustus 1954 </ time > )
   </ div >
  < span  itemprop = “genre” > Fiksi ilmiah </ span >
  < a  href = “../movies/[-theatrical-trailer .html ”  itemprop = ” trailer ” > Cuplikan </ a >
</ div >

RDFa 1.1 Lite

< div  vocab = “http://schema.org/”  typeof = “Movie” >
  < h1  property = “name” > Avatar </ h1 >
  < div  property = “director”  typeof = “Person” >
  Sutradara: < span  properti = “nama” > James Cameron </ span >
(lahir < waktu  properti = “tanggal lahir” datetime = “1954-08-16” >16 Agustus 1954 </ time > )
   </ div >
  < span  property = “genre” > Fiksi ilmiah </ span >
  < a  href = “../movies/[-theatrical-trailer.html”  property = “trailer” > Trailer </ a >
</ div >

JSON-LD

<script  type = “application / ld + json” >
{
  “@context” :  “http://schema.org/” ,
  “@type” :  “Movie” ,
  “name” :  “Avatar” ,
  “director” :
    {
       “@type” :  “Person” ,
       “name” :  “James Cameron” ,
       “birthDate” :  “1954-08-16”
    },
  “genre” :  “Fiksi ilmiah” ,
  “trailer” :  “../movies/[-theatrical-trailer.html “
}
</script>

Berikut cara menambahkan schema markup dalam artikel blog

1. Disini saya menggunakan layanan generator schema markup dari https://technicalseo.com/seo-tools/schema-markup-generator/

2. Pada field Markup Schema.org mana yang ingin Anda buat? pilih artikel untuk memberi tau bahwa halaman anda adalah blogposting dan artikel teks

3. Isikan data-data yang diperlukan

layanan generator schema markup

Tentukan terlebih dahulu artikel mana yang mau ditambahkan skema markup

Mulai dari jenis schema apakah untuk artikel berita atau blog posting , sesuaikan dengan topik

Masukkan judul artikel dan gambar thumbnail

Masukkan url artikel yang ingin dibuat schema

Isi data tanggal posting dan tanggal pengeditan artikel terakhir kali

Masukkan identitas penerbit apakah organisasi atau personal kemudian masukkan nama author

Berikan url icon blog (opsional) atur ukuran ikon (biasanya 30×30 soalnya kan ikon kecil)

Kalau sudah tekan klik validasi

4. Selanjutnya anda akan dibawa kehalaman pengujian data terstruktur untuk melihat apakah markup anda sudah benar atau belum , pada contoh gambar dibawah tidak ada kesalahan pada markup yang saya buat

halaman pengujian data terstruktur

Tapi jika ada kesalahan error silahkan diklik maka data error disebelah kiri akan disorot silahkan diperbaiki atau dihapus pada isian yang kosong misal menghapus favicon

Jika tidak terdeteksi error kesalahan data terstruktur seharusnya google bot bisa merayapi halaman itu dengan benar

5. Setelah itu kembali kehalaman tab schema generator markup lalu copy paste kode pada tab microdata

Buka dashboard blogger > halaman entry > buka posting artikel > pindah dari tab compose ke tab HTML lalu letakkan kode microdata pada baris paling bawah

tab HTML

Meski nanti efeknya diakhir artikel akan muncul title , image , deskripsi , ikon dan author setidaknya kita telah memberi tahu google mengenai keberadaan data tersebut

Bagaimana supaya rapi ? maka anda harus merombaknya secara manual

Contoh kode itemprop

<div itemscope itemtype=”http://schema.org/NewsArticle”>
  <h2 itemprop=”headline”>Cara mengatasi bom panggilan masuk dari mantan</h2>
  <div itemprop=”image” itemscope itemtype=”https://schema.org/ImageObject”>
    <img itemprop=”url” src=”https://3.bp.blogspot.com/-i1as-BVg6tY/XKn8P-lV8qI/AAAAAAAAQUo/a8PPpAeW5tATR3G4EA1GyjQ0ZIkIkA9rQCLcBGAs/s1600/memblokir%2Bteror%2Bpanggilan%2B%25281%2529.jpg”/>
    <meta itemprop=”width” content=”700″/>
    <meta itemprop=”height” content=”400″/>
  </div>
  <meta itemscope itemprop=”mainEntityOfPage” itemType=”https://schema.org/WebPage” itemid=”https://www.helmykediri.com/2019/04/cara-mengatasi-bom-panggilan-masuk-dari.html”/>
  <span itemprop=”description”>-Bom panggilan masuk merupakan panggilan telepon secara periodik dan ketika diangkat hanya terdengar suara cewek berbicara dalam bahasa inggris yang bahkan saya sendiri tidak mengerti artinya</span>
  <meta itemprop=”datePublished” content=”2019-04-08″/>
  <meta itemprop=”dateModified” content=”2019-04-09″/>

[cut > paste, semua kode yang berada pada tab HTML sebelumnya kesini]

  <h3 itemprop=”author” itemscope itemtype=”https://schema.org/Organization”>
    By <span itemprop=”name”>Blog Orang IT</span>
  </h3>
  <div itemprop=”publisher” itemscope itemtype=”https://schema.org/Organization”>
    <meta itemprop=”name” content=”Helmy Kurniawan”/>
    <div itemprop=”logo” itemscope itemtype=”https://schema.org/ImageObject”>
      <img itemprop=”url” src=”https://draft.blogger.com/favicon-image.g?blogID=7204675838149040268″/>
      <meta itemprop=”width” content=”100″/>
      <meta itemprop=”height” content=”10″/>
    </div>
  </div>
</div>

Setelah itu publikasikan artikel

6. Submit ke google webmaster tools agar segera ditambahkan kedalam antrian khusus , setelah memposting artikel baru setiap webmaster pasti berharap agar blognya segera terindeks oleh google kan?

Submit ke google webmaster tools

7. Tunggu beberapa saat dan cek digoogle dengan url atau judul konten anda , lihatlah sekarang konten anda sudah terindex

Bagaimana dengan cuplikan kaya yang anda janjikan ? itu bukan sesuatu yang bisa didapatkan secara instant lagi pula kalau anda memaksa membuat cuplikan kaya secara manual melalui script dikhawatirkan ada okum tertentu yang melaporkan situs anda ke formulir

> https://support.google.com/webmasters/contact/rich_snippets_spam?hl=en

Apa yang harus saya lakukan ? anda harus melakukan optimasi SEO On Page dan SEO Off Page seperti biasanya tunggulah minimal selama 3 hari insyAllah nanti dapat cuplikan kaya

Perhatikan juga penggunaan heading didalam artikel agar skema tulisan lebih terstruktur contohnya untuk sub judul bisa pakai H2 kemudian sub sub bab menggunakan H3 kalau model artikelnya tutorial dalam bentuk listicle mungkin bisa mendapatkan snippet rich seperti yang diharapkan

Tapi selebihnya penggunaan skema markup hanya memudahkan googlebot dalam mengidentifikasi data saja misal :

http://schema.org/Book untuk mengidentifikasi bahwa itu adalah judul buku

http://schema.org/Offer untuk mengidentifikasi bahwa itu adalah nama kantor

itemprop=”reviews” artikel tentang review

itemprop=”price” artikel tentang jualan

Mengidentifikasi judul film , nama masakan , profile seseorang dll

Selebihnya silahkan baca disini > https://schema.org/docs/gs.html

Kalau tidak paham tinggal klik kanan > translate to indonesia

Demikian postingan mengenai cara memasang schema markup didalam artikel blog , memang ini akan memberi tau google tentang halaman anda apakah berisi judul film , reviews buku , data profile seseorang dll yang disesuaikan dengan kebutuhan pengguna

Update belajar penerapan schema markup :

Memulai dengan schema.org menggunakan Microdata

Sebagian besar webmaster terbiasa dengan tag HTML di halaman mereka. Biasanya, tag HTML memberi tahu browser cara menampilkan informasi yang termasuk dalam tag. Misalnya, <h1>Avatar</h1>memberi tahu browser untuk menampilkan string teks “Avatar” dalam format H1.

Namun, tag HTML tidak memberikan informasi tentang arti string teks itu— “Avatar” dapat merujuk pada film 3D yang sangat sukses, atau itu dapat merujuk pada jenis gambar profil — dan ini dapat mempersulit pencarian. mesin untuk secara cerdas menampilkan konten yang relevan kepada pengguna.

Schema.org menyediakan koleksi kosakata bersama yang dapat digunakan oleh webmaster untuk menandai halaman mereka dengan cara yang dapat dipahami oleh mesin pencari utama: Google, Microsoft, Yandex, dan Yahoo!

Anda menggunakan kosakata schema.org bersama dengan format Microdata , RDFa , atau JSON-LD untuk menambahkan informasi ke konten Web Anda. Panduan ini akan membantu Anda meningkatkan kecepatan dengan Microdata dan schema.org sehingga Anda dapat mulai menambahkan markup ke halaman web Anda.

Meskipun panduan ini berfokus pada Microdata , sebagian besar contoh di situs schema.org juga menunjukkan contoh dalam RDFa dan JSON-LD. Gagasan dasar (jenis, properti, dll.) Yang diperkenalkan di sini relevan di luar Microdata – lihat contoh untuk melihat bagaimana detailnya dibandingkan.

1. Cara menandai konten Anda menggunakan mikrodata

Mengapa menggunakan microdata?

Halaman web Anda memiliki makna mendasar yang dipahami orang ketika mereka membaca halaman web. Tetapi mesin pencari memiliki pemahaman terbatas tentang apa yang sedang dibahas pada halaman-halaman itu.

Dengan menambahkan tag tambahan ke HTML halaman web Anda — tag yang bertuliskan, “Hai mesin pencari, informasi ini menjelaskan film, atau tempat tertentu ini, atau orang, atau video” —Anda dapat membantu mesin pencari dan aplikasi lain lebih memahami konten Anda dan menampilkannya dengan cara yang bermanfaat dan relevan.

Microdata adalah serangkaian tag, yang diperkenalkan dengan HTML5, yang memungkinkan Anda melakukan ini.

Mari kita mulai dengan contoh nyata. Bayangkan Anda memiliki halaman tentang film Avatar — halaman dengan tautan ke trailer film, informasi tentang sutradara, dan sebagainya. Kode HTML Anda mungkin terlihat seperti ini:

<div>
 <h1> Avatar </h1>
 <span> Direktur: James Cameron (lahir 16 Agustus 1954) </span>
 <span> Fiksi ilmiah </span>
 <a href=”../movies/[-theatrical-trailer.html”> Cuplikan </a>
</div>

Untuk memulai, identifikasi bagian halaman yang “tentang” film Avatar. Untuk melakukan ini, tambahkan elemen itemscope ke tag HTML yang menyertakan informasi tentang item, seperti ini:

<div itemscope >
  <h1> Avatar </h1>
  <span> Direktur: James Cameron (lahir 16 Agustus 1954) </span>
  <span> Fiksi ilmiah </span>
  <a href=”../movies/[-theatrical-trailer.html”> Cuplikan </a>
</div>

Dengan menambahkan itemscope, Anda menetapkan bahwa HTML yang terkandung di dalam
<div>…</div>blok adalah tentang item tertentu.

Tapi itu tidak semua membantu untuk menentukan bahwa ada item yang sedang dibahas tanpa menentukan jenis item itu.

Anda dapat menentukan jenis item menggunakan itemtypeatribut segera setelah itemscope.

<div itemscope itemtype = “http://schema.org/Movie” >
  <h1> Avatar </h1>
  <span> Direktur: James Cameron (lahir 16 Agustus 1954) </span>
  <span> Fiksi ilmiah </span>
  <a href=”../movies/[-theatrical-trailer.html”> Cuplikan </a>
</div>

Ini menentukan bahwa item yang terkandung dalam div sebenarnya adalah Movie, seperti yang didefinisikan dalam hierarki jenis schema.org. Jenis barang disediakan sebagai URL, dalam hal ini http://schema.org/Movie.

Informasi tambahan apa yang dapat kami berikan mesin pencari tentang film Avatar? Film memiliki sifat yang menarik seperti aktor, sutradara, peringkat. Untuk memberi label properti, gunakan itempropatribut.

Misalnya, untuk mengidentifikasi sutradara film, tambahkan itemprop=”director”ke elemen yang melampirkan nama sutradara. (Ada daftar lengkap semua properti yang dapat Anda asosiasikan dengan film di http://schema.org/Movie.)

<div itemscope itemtype = “http://schema.org/Movie”>
  <h1 itemprop = “name” > Avatar </h1>
  <span> Direktur: <span itemprop = “director” > James Cameron </span> (lahir 16 Agustus 1954) </span>
  <span itemprop = “genre” > Fiksi ilmiah </span>
  <a href=”../movies/[-theatrical-trailer.html” itemprop=”trailer”> Cuplikan </a>
</div>

Perhatikan bahwa kami telah menambahkan <span>…</span>tag tambahan untuk melampirkan itemprop atribut ke teks yang sesuai pada halaman. <span>tag tidak mengubah cara halaman dirender oleh browser web, jadi itu adalah elemen HTML yang nyaman untuk digunakan itemprop.

Mesin pencari sekarang dapat memahami tidak hanya bahwa http://www.avatarmovie.com adalah URL, tetapi juga URL untuk trailer film Avatar fiksi ilmiah, yang disutradarai oleh James Cameron.

Kadang-kadang nilai properti item itu sendiri dapat menjadi item lain dengan set propertinya sendiri. Sebagai contoh, kita dapat menentukan bahwa sutradara film adalah item bertipe Person dan Person memiliki properti namedan birthDate.

Untuk menentukan bahwa nilai properti adalah item lain, Anda memulai yang baru itemscopesegera setelah yang sesuai itemprop.

<div itemscope itemtype = “http://schema.org/Movie”>
  <h1 itemprop = “name”> Avatar </h1>
  <div itemprop = “director” itemscope itemtype = “http://schema.org/Person” >
  Direktur: <span itemprop = “name”> James Cameron </span> (lahir <span itemprop = “birthDate” > 16 Agustus 1954 </span>)
  </div>
  <span itemprop = “genre”> Fiksi ilmiah </span>
  <a href=”../movies/[-theatrical-trailer.html” itemprop=”trailer”> Cuplikan </a>
</div>

2. Menggunakan kosakata schema.org

Tidak semua halaman web adalah tentang film dan orang — selain tipe Movie dan Person yang dijelaskan dalam bagian 1, schema.org menjelaskan berbagai jenis item lainnya, yang masing-masing memiliki serangkaian properti sendiri yang dapat digunakan untuk menggambarkan barang.

Jenis item luas adalah Hal , yang memiliki empat sifat: name, description, url, dan image. Tipe yang lebih spesifik membagikan properti dengan tipe yang lebih luas. Misalnya, Tempat adalah jenis Hal yang lebih spesifik, dan Bisnis Lokal adalah jenis Tempat yang lebih spesifik.

Item yang lebih spesifik mewarisi properti orang tua mereka. (Sebenarnya, LocalBusiness adalah jenis yang lebih spesifik dari tempat dan jenis yang lebih spesifik Organisasi, sehingga mewarisi sifat dari kedua jenis induk.)

Berikut satu set jenis barang yang umum digunakan:

Karya kreatif: CreativeWork , Book , Movie , MusicRecording , Recipe , TVSeries …
Objek non-teks tertanam: AudioObject , ImageObject , VideoObject
Peristiwa
Organisasi
Orang
Tempat , Bisnis Lokal , Restoran …
Produk , Penawaran , Penawaran Agregat
Tinjau , AgregatRating

Anda juga dapat melihat daftar lengkap dari semua jenis barang , yang tercantum pada satu halaman.

Berikut adalah beberapa catatan yang perlu di ingat ketika menambahkan markup schema.org ke halaman web Anda.

  • Lebih banyak lebih baik, kecuali untuk teks tersembunyi. Secara umum, semakin banyak konten yang Anda tandai, semakin baik. Namun, sebagai aturan umum, Anda harus menandai hanya konten yang dapat dilihat oleh orang-orang yang mengunjungi halaman web dan bukan konten di div tersembunyi atau elemen halaman tersembunyi lainnya.
  • Jenis dan teks yang diharapkan. Saat menelusuri tipe schema.org, Anda akan melihat bahwa banyak properti memiliki “tipe yang diharapkan”. Ini berarti bahwa nilai properti itu sendiri dapat menjadi item yang disematkan (lihat bagian 1d: item yang disematkan). Tapi ini bukan keharusan — tidak masalah memasukkan teks atau URL biasa. Selain itu, setiap kali jenis yang diharapkan ditentukan, itu juga baik untuk menanamkan item yang merupakan jenis anak dari jenis yang diharapkan. Misalnya, jika jenis yang diharapkan adalah Place, Anda juga boleh menanamkan LocalBusiness.
  • Menggunakan properti url. Beberapa halaman web tentang item tertentu. Misalnya, Anda mungkin memiliki halaman web tentang satu orang, yang dapat Anda mark up menggunakan tipe item Person. Halaman lain memiliki koleksi item yang dijelaskan pada mereka. Misalnya, situs perusahaan Anda dapat memiliki daftar karyawan di halaman, dengan tautan ke halaman profil untuk setiap orang. Untuk halaman seperti ini dengan koleksi item, 

Anda harus menandai setiap item secara terpisah (dalam hal ini sebagai serangkaian Orang) dan menambahkan properti url ke tautan ke halaman yang sesuai untuk setiap item, seperti ini:

<div itemscope itemtype = “http://schema.org/Person”>
  <a href=”alice.html” itemprop=”url”> Alice Jones </a>
</div>
<div itemscope itemtype = “http://schema.org/Person”>
  <a href=”bob.html” itemprop=”url”> Bob Smith </a>
</div>

Menguji markup Anda

Sama seperti browser web penting untuk menguji perubahan pada tata letak halaman web Anda, dan kompiler kode penting untuk menguji kode yang Anda tulis, Anda juga harus menguji markup schema.org Anda untuk memastikan itu diterapkan dengan benar.

Google menyediakan alat pengujian cuplikan kaya, yang dapat Anda gunakan untuk menguji markup Anda dan mengidentifikasi kesalahan.

> https://search.google.com/structured-data/testing-tool/u/0/?hl=id

Topik lanjutan: Versi informasi yang dapat dimengerti mesin

Banyak halaman dapat digambarkan hanya menggunakan itemscope, itemtypedan itempropatribut (diuraikan dalam bagian 1) bersama dengan jenis dan sifat didefinisikan pada schema.org (diuraikan dalam bagian 2).

Namun, kadang-kadang properti item sulit untuk dipahami mesin tanpa disambiguasi tambahan. Bagian ini menjelaskan bagaimana Anda bisa menyediakan versi informasi yang dapat dimengerti mesin saat menandai halaman Anda.

Tanggal, waktu, dan durasi: gunakan timetag dengandatetime
Enumerasi dan referensi kanonik: gunakan linktag denganhref
Informasi tidak ada / tersirat: gunakan metatag dengan content.

Tanggal, waktu, dan durasi: gunakan tag waktu dengan datetime

Tanggal dan waktu bisa sulit dipahami mesin. Pertimbangkan tanggal “04/01/11”. Apakah ini berarti 11 Januari 2004? 4 Januari 2011? Atau 1 April 2011? Untuk membuat tanggal tidak ambigu, gunakan timetag beserta datetimeatributnya. Nilai datetimeatribut adalah tanggal yang ditentukan menggunakan YYYY-MM-DDformat.

Kode HTML di bawah ini menentukan tanggal secara jelas sebagai 1 April 2011.

<time datetime = “2011-04-01”> 04/01/11 </time>
Anda juga dapat menentukan waktu dalam sehari, menggunakan format hh:mmatau hh:mm:ss. Waktu diawali dengan surat Tdan dapat diberikan bersama tanggal, seperti ini:

<time datetime = “2011-05-08T19: 30”> 8 Mei, 7:30 malam </ waktu>
Mari kita lihat ini dalam konteks. Berikut ini beberapa HTML yang menggambarkan konser yang berlangsung pada 8 Mei 2011. Markup acara termasuk nama acara, deskripsi, dan tanggal acara.

<div itemscope itemtype = “http://schema.org/Event” >
  <div itemprop = “name” > Ketuk Spinal </div>
  <span itemprop = “description” > Salah satu band paling keras yang pernah ada
  bersatu kembali untuk pertunjukan dua hari yang tak terlupakan. </span>
  Tanggal Acara:
  <time itemprop = “startDate” datetime = “2011-05-08T19: 30”> 8 Mei, 7:30 malam </time>
</div>
Durasi dapat ditentukan dengan cara analog menggunakan timetag dengan datetimeatribut. Durasi diawali dengan huruf P(singkatan dari “period”). Berikut ini cara menentukan waktu memasak resep 1 ½ jam:

<time itemprop = “cookTime” datetime = “PT1H30M” > 1 1/2 jam </time>
Hdigunakan untuk menentukan jumlah jam, dan Mdigunakan untuk menentukan jumlah menit.

Tanggal, waktu, dan standar durasi ditentukan oleh standar tanggal / waktu ISO 8601 .

Enumerasi dan referensi kanonik: gunakan tautan dengan href

Beberapa properti hanya dapat mengambil satu set nilai yang mungkin terbatas. Pemrogram sering menyebut ini “enumerasi.” Misalnya, toko online dengan barang yang dijual dapat menggunakan jenis barang Penawaran untuk menentukan rincian penawaran.

 The availabilityproperti biasanya dapat memiliki salah satu dari hanya mungkin values- beberapa In stock, Out of stock, Pre-order, dan sebagainya.

Sama seperti jenis barang yang ditentukan sebagai URL, nilai yang mungkin untuk penghitungan di schema.org juga dapat ditentukan sebagai URL.

Ini adalah barang yang dijual, ditandai dengan jenis Penawaran dan properti yang relevan:

<div itemscope itemtype = “http://schema.org/Offer”>
  <span itemprop = “name”> Blend-O-Matic </span>
  <span itemprop = “price”> $ 19,95 </span>
  <span itemprop = “availability”> Tersedia hari ini! </span>
</div>

Dan di sini adalah item yang sama, tetapi menggunakan linkdan hrefuntuk secara jelas menentukan ketersediaan sebagai salah satu nilai yang diizinkan:

<div itemscope itemtype = “http://schema.org/Offer”>
  <span itemprop = “name”> Blend-O-Matic </span>
  <span itemprop = “price”> $ 19,95 </span>
  <link itemprop = “availability” href = “http://schema.org/InStock” /> Tersedia hari ini!
</div>

Schema.org menyediakan enumerasi untuk beberapa properti — biasanya di mana pun ada sejumlah nilai tipikal untuk properti, ada enumerasi terkait yang ditentukan dalam schema.org. Dalam hal ini, nilai yang mungkin untuk availabilityditentukan dalam ItemAvailabilitas .


Referensi kanonik

Biasanya, tautan ditentukan menggunakan <a>elemen. Misalnya, tautan HTML berikut ke halaman Wikipedia untuk buku Catcher in the Rye.

<div itemscope itemtype = “http://schema.org/Book”>
  <span itemprop = “name”> The Catcher in the Rye </span> –
  oleh <span itemprop = “author”> JD Salinger </span>
  Ini adalah <a itemprop=”url” href=”http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye”> halaman Wikipedia </a> buku ini.
</div>

Seperti yang Anda lihat, itemprop=”url”dapat digunakan untuk menentukan tautan ke halaman di situs lain (dalam hal ini Wikipedia) membahas item yang sama. Tautan ke situs pihak ketiga dapat membantu mesin pencari untuk lebih memahami item yang Anda gambarkan di halaman web Anda.

Namun, Anda mungkin tidak ingin menambahkan tautan yang terlihat di halaman Anda. Dalam hal ini, Anda bisa menggunakan linkelemen sebagai gantinya, sebagai berikut:

<div itemscope itemtype = “http://schema.org/Book”>
  <span itemprop = “name”> The Catcher in the Rye </span> –
  <link itemprop = “url” href = “http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye” />
  oleh <span itemprop = “author”> JD Salinger </span>
</div>

Informasi yang hilang / tersirat: gunakan meta tag dengan konten

Terkadang, halaman web memiliki informasi yang akan berharga untuk ditandai, tetapi informasi tersebut tidak dapat ditandai karena cara itu muncul pada halaman. Informasi tersebut dapat disampaikan dalam gambar (misalnya, gambar yang digunakan untuk mewakili peringkat 4 dari 5) atau objek Flash (misalnya, durasi klip video), atau mungkin tersirat tetapi tidak dinyatakan secara eksplisit pada halaman (misalnya, mata uang suatu harga).

Dalam kasus ini, gunakan metatag bersama dengan contentatribut untuk menentukan informasi. Pertimbangkan contoh ini — gambar menampilkan peringkat bintang 4 dari 5:

<div itemscope itemtype = “http://schema.org/Offer”>
  <span itemprop = “name”> Blend-O-Matic </span>
  <span itemprop = “price”> $ 19,95 </span>
  <img src = “four-stars.jpg” />
  Berdasarkan 25 peringkat pengguna
</div>

Ini adalah contoh lagi dengan informasi peringkat ditandai.

<div itemscope itemtype = “http://schema.org/Offer”>
  <span itemprop = “name”> Blend-O-Matic </span>
  <span itemprop = “price”> $ 19,95 </span>
  <div itemprop = “ulasan” itemscope itemtype = “http://schema.org/AggregateRating” >
    <img src = “four-stars.jpg” />
    <meta itemprop = “ratingValue” content = “4” />
    <meta itemprop = “bestRating” content = “5” />
    Berdasarkan pada <span itemprop = “ratingCount” > 25 peringkat pengguna <span>
  </div>
</div>

Teknik ini harus digunakan dengan hemat. Hanya digunakan metadengan konten untuk informasi yang tidak dapat ditandai.

Memperluas schema.org

Sebagian besar situs dan organisasi tidak akan memiliki alasan untuk memperpanjang schema.org. Namun, schema.org menawarkan kemampuan untuk menentukan properti atau sub-tipe tambahan untuk tipe yang ada. Jika Anda tertarik untuk melakukan ini, baca lebih lanjut tentang mekanisme ekstensi schema.org .

Related Post