Panduan ini menguraikan cara memberi tag pada situs Anda dengan microdata dan atribut navigasi sehingga crawler akurasi harga Google dapat otomatis menavigasi funnel pemesanan Anda dan memvalidasi tarif kamar Anda.
Untuk spesifikasi teknis lengkap semua properti data terstruktur yang tersedia (termasuk pajak, biaya, dan detail kamar yang dikelompokkan), lihat referensi data terstruktur harga hotel.
1. Penerapan navigasi (data-nav-*)
Gunakan atribut HTML data-nav-* kustom untuk memberi anotasi pada elemen interaktif
dan mendeklarasikan tahap funnel sehingga crawler dapat menjelajahi alur pemesanan Anda.
1.1 Deklarasi tahap di bagian atas halaman (data-nav-stage)
Setiap halaman di funnel pemesanan yang menampilkan tarif harus mendeklarasikan tahapnya, yang dilampirkan ke tag <body> atau tag wrapper utama (seperti <div>, <section>, atau <main>). Hal ini memberi tahu crawler tahap alur pemesanan mana yang aktif dan membantu memecahkan masalah di kemudian hari.
data-nav-stage(Direkomendasikan): Mendeklarasikan tahap funnel yang aktif. Meskipun tidak benar-benar diperlukan, menentukan nama (misalnya,"landing","room-selection","checkout","ready-for-payment") membantu mengidentifikasi tahap aktif selama validasi.
1.2 Indikator tahap akhir (data-nav-stage-final)
Di halaman akhir yang menampilkan harga sebelum pengguna memasukkan informasi pribadi atau pembayaran, tambahkan tanda tahap akhir ke penampung atas halaman Anda bersama dengan pernyataan tahap (misalnya, data-nav-stage="ready-for-payment").
data-nav-stage-final(Opsional): Setel ke"true"(data-nav-stage-final="true") di halaman harga akhir sebelum pembayaran. Hal ini menunjukkan kepada crawler bahwa halaman ini adalah halaman terakhir dan harga dapat diekstrak untuk validasi. Halaman ini harus berisi struktur harga dengan pemberian tag microdata.
1.3 Atribut interaksi jalur kritis
Di halaman perantara, beri tag pada elemen interaktif (tombol atau link) yang memajukan pengguna di jalur penting pemesanan. Jika beberapa tindakan diperlukan di halaman yang sama, tentukan urutan eksekusi. Crawler mengikuti urutan yang ditentukan sebelum mencoba mengekstrak harga di halaman akhir.
| Atribut | Nilai yang Wajib Diisi | Tujuan |
|---|---|---|
data-nav-criticalpath |
"true" |
Menandai tombol/link wajib yang harus diklik crawler untuk melanjutkan. |
data-nav-interactiontype |
"CLICK" |
Mendeklarasikan bahwa tindakan klik diperlukan untuk melanjutkan alur. |
data-nav-interactionorder |
"1", "2", ... |
Mendeklarasikan urutan eksekusi jika beberapa tindakan diperlukan di halaman yang sama. |
Contoh navigasi minimal
<button data-nav-criticalpath="true"
data-nav-interactiontype="CLICK"
data-nav-interactionorder="1">
Continue
</button>
2. Pernyataan harga (microdata)
Di halaman terakhir funnel pemesanan yang dapat diakses (sebelum entri informasi pribadi atau pembayaran), beri tag pada penawaran harga (satu penawaran harga) dengan tag microdata. Hanya satu penawaran yang harus diberi tag di halaman, yang menunjukkan tarif yang diekstrak crawler, sesuai dengan tarif yang dipilih di Google sebelum pengguna membuka situs Anda. Untuk mengetahui detail tentang cara menentukan parameter halaman landing, lihat variabel dan ketentuan.
Meskipun Google sepenuhnya mendukung hierarki lengkap dalam referensi data terstruktur harga hotel (termasuk tarif dasar yang dikelompokkan, pajak, biaya, dan detail kamar masing-masing), Google juga menerima hierarki data yang disederhanakan untuk mempermudah Anda menandai harga hotel di halaman web.
Harga total menginap wajib diisi untuk tarif yang tersedia. Jika itinerari atau kamar tidak tersedia atau terjual habis, nyatakan https://schema.org/SoldOut di bagian
makesOffer tanpa priceSpecification:
<div itemprop="makesOffer" itemscope itemtype="https://schema.org/Offer">
<meta itemprop="availability" content="https://schema.org/SoldOut"/>
Sold Out
</div>
Untuk mengetahui informasi selengkapnya, lihat spesifikasi
properti availability.
2.1 Hierarki data terstruktur yang disederhanakan
Untuk menyederhanakan pemberian tag di halaman pemesanan, Anda hanya perlu mendeklarasikan penampung hotel dan reservasi root, tanggal menginap (YYYY-MM-DD), jumlah tamu, dan satu penawaran yang berisi total harga menginap:
Hotel / LodgingReservation (Root Container)
├── identifier [Meta/Attribute] Hotel ID
├── name [Visible text] Hotel Name
├── checkinTime / checkoutTime [Visible text with YYYY-MM-DD in content="..."] Stay Dates
├── numAdults / numChildren [Visible text] Occupancy
└── makesOffer (Offer)
└── priceSpecification (CompoundPriceSpecification)
├── priceCurrency [ISO Code, such as "USD"] Currency
└── price [Visible text] Total Stay Price (Taxes & Fees Included)
2.2 Aturan visibilitas penting
Untuk memastikan ekstraksi harga yang andal, ikuti aturan visibilitas berikut saat memberi tag pada HTML Anda:
- Harga total menginap harus terlihat: Beri tag pada angka harga yang terlihat langsung di halaman menggunakan
itemprop="price". Jangan gunakan metadata tersembunyi (<meta>) atau nilai atribut (value="..."ataucontent="...") untuk angka harga. - Tanggal menginap yang dapat dibaca mesin: Beri tag pada tanggal menginap yang terlihat di halaman sebanyak mungkin. Jika diperlukan, Anda dapat menggunakan atribut
content="..."pada elemen<span>untuk memberikan formatYYYY-MM-DDstandar sambil menampilkan tanggal yang terlihat (misalnya,<span itemprop="checkinTime" content="2026-08-10">August 10, 2026</span>). - Kolom yang tidak terlihat: Kolom yang tidak ditampilkan secara langsung di halaman (seperti ID hotel atau kode mata uang) dapat menggunakan tag
<meta>atau atributcontent="...".
3. Contoh
Contoh end-to-end berikut menunjukkan cara memberi tag pada langkah funnel perantara dan halaman checkout akhir dengan atribut navigasi dan microdata.
Contoh 1: halaman perantara dengan tombol yang dapat diklik
Cuplikan berikut menunjukkan halaman pemilihan ruang perantara
(room-selection) dengan satu tombol tindakan jalur penting yang diberi tag untuk melanjutkan
alur:
<body data-nav-stage="room-selection">
<!-- Main page content -->
<button class="btn-continue"
data-nav-criticalpath="true"
data-nav-interactiontype="CLICK"
data-nav-interactionorder="1">
Book This Room
</button>
</body>
Contoh 2: halaman harga akhir dengan indikator tahap dan microdata minimal
Cuplikan berikut menunjukkan halaman terakhir sebelum pembayaran
(ready-for-payment) tempat data-nav-stage-final="true" dideklarasikan di
wrapper dan harga menginap yang resmi ditampilkan secara jelas:
<body data-nav-stage="ready-for-payment" data-nav-stage-final="true">
<!-- Root Container: Co-Typed Hotel & LodgingReservation -->
<div itemscope itemtype="https://schema.org/Hotel https://schema.org/LodgingReservation">
<!-- Hotel Identifier (Can be hidden meta tag) -->
<meta itemprop="identifier" content="grand-view-001" />
<h1 itemprop="name">Grand View Hotel</h1>
<!-- Visible Stay Dates & Occupancy -->
<p>
Check-in: <span itemprop="checkinTime" content="2026-08-10">Aug 10, 2026</span> |
Check-out: <span itemprop="checkoutTime" content="2026-08-15">Aug 15, 2026</span> |
Guests: <span itemprop="numAdults">2</span> Adults, <span itemprop="numChildren">1</span> Child
</p>
<!-- Single Minimal Rate Offer -->
<div itemprop="makesOffer" itemscope itemtype="https://schema.org/Offer">
<div itemprop="priceSpecification" itemscope itemtype="https://schema.org/CompoundPriceSpecification">
<p class="summary-total">
Total Stay Price (Taxes & Fees Included):
<!-- 3-letter ISO Currency Code (can use content="" for hiding the 3-letter currency code while displaying a symbol) -->
<span itemprop="priceCurrency" content="EUR">€</span>
<!-- VISIBLE TOTAL STAY PRICE (Directly wrapped, no hidden attributes) -->
<span itemprop="price">650.00</span>
</p>
</div>
</div>
</div>
</body>
4. Memverifikasi penerapan Anda
Sebelum men-deploy perubahan, uji markup dan pemberian tag navigasi untuk memastikan crawler dapat berhasil memvalidasi data harga Anda.
4.1 Verifikasi harga dan struktur microdata
Anda dapat menggunakan
Validator Schema.org
atau
Pengujian Hasil Multimedia Google
untuk memeriksa microdata yang diekstrak dari URL halaman atau konten HTML Anda. Verifikasi
kolom yang diekstrak terhadap spesifikasi dalam
referensi data terstruktur harga hotel,
dan pastikan elemen itemprop="price" Anda adalah item yang terlihat di halaman.
4.2 Memverifikasi navigasi
Untuk memverifikasi tag, buka Alat Developer Browser di Google Chrome dengan
mengklik kanan halaman web Anda dan memilih Periksa (atau menekan F12) untuk
memeriksa DOM HTML.
Konfirmasi bahwa penerapan Anda memenuhi persyaratan navigasi berikut:
- Tahap atas halaman dinyatakan: Setiap halaman dalam alur pemesanan
mencakup
data-nav-stage="..."pada tag<body>atau wrapper root, dan halaman harga akhir mencakupdata-nav-stage-final="true". - Jalur penting selesai: Halaman perantara memiliki elemen
interaktif (tombol atau link) yang ditandai dengan
data-nav-criticalpath="true",data-nav-interactiontype, dandata-nav-interactionorder. Jika ada beberapa tindakan, pastikan nomor pesanan ditetapkan dengan benar.
4.3 Memverifikasi visibilitas dan kualitas markup
Pastikan bahwa microdata Anda memenuhi semua persyaratan struktur dan visibilitas (untuk mengetahui detailnya, lihat hierarki data terstruktur yang disederhanakan dan aturan visibilitas penting):
- Hierarki yang ketat: Pastikan markup Anda mengikuti urutan bertingkat yang diperlukan (baik pohon yang disederhanakan maupun spesifikasi referensi data terstruktur lengkap). Elemen yang tidak berurutan atau tidak tepat mungkin tidak terdeteksi oleh crawler.
- Harga yang terlihat:
itemprop="price"secara langsung membungkus angka harga yang terlihat tanpa atribut tersembunyi atau tag<meta>. - Tanggal menginap yang dapat dibaca mesin:
checkinTimedancheckoutTimeberisiYYYY-MM-DDstandar (opsional menggunakan atributcontent="..."). - Pemberian tag elemen langsung: Semua properti yang terlihat (nama hotel, tanggal menginap, jumlah tamu) membungkus teks halaman yang terlihat.