Harga Hotel: mengaktifkan navigasi crawler dan pemberian tag harga

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.


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="..." atau content="...") 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 format YYYY-MM-DD standar 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 atribut content="...".

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 mencakup data-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, dan data-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: checkinTime dan checkoutTime berisi YYYY-MM-DD standar (opsional menggunakan atribut content="...").
  • Pemberian tag elemen langsung: Semua properti yang terlihat (nama hotel, tanggal menginap, jumlah tamu) membungkus teks halaman yang terlihat.