होटल के किराये: क्रॉलर नेविगेशन और किराये की टैगिंग की सुविधा चालू करें

इस गाइड में बताया गया है कि अपनी वेबसाइट को माइक्रोडेटा और नेविगेशन एट्रिब्यूट के साथ कैसे टैग करें, ताकि Google का किराया सटीक होने की पुष्टि करने वाला क्रॉलर, आपके बुकिंग फ़नल पर अपने-आप नेविगेट कर सके. साथ ही, कमरे के किराये की पुष्टि कर सके.

उपलब्ध सभी स्ट्रक्चर्ड डेटा प्रॉपर्टी की पूरी तकनीकी जानकारी के लिए, होटल के किराये के स्ट्रक्चर्ड डेटा का रेफ़रंस देखें. इसमें टैक्स, शुल्क, और कमरे की जानकारी शामिल है.

इंटरैक्टिव एलिमेंट को एनोटेट करने के लिए, कस्टम data-nav-* एचटीएमएल एट्रिब्यूट का इस्तेमाल करें. साथ ही, फ़नल के चरणों का एलान करें, ताकि क्रॉलर आपके बुकिंग फ़्लो को ट्रैवर्स कर सके.

1.1 पेज के सबसे ऊपर स्टेज का एलान (data-nav-stage)

आपके बुकिंग फ़नल के हर उस पेज पर स्टेज की जानकारी होनी चाहिए जिस पर किराये दिखाए जाते हैं. यह जानकारी, <body> टैग या प्राइमरी रैपर टैग (जैसे कि <div>, <section> या <main>) से जुड़ी होनी चाहिए. इससे क्रॉलर को पता चलता है कि बुकिंग फ़्लो का कौन-सा चरण चालू है. साथ ही, इससे बाद में समस्याओं को हल करने में मदद मिलती है.

  • data-nav-stage (सुझाया गया): इससे, चालू फ़नल स्टेज का एलान किया जाता है. नाम (उदाहरण के लिए, "landing", "room-selection", "checkout", "ready-for-payment") देना ज़रूरी नहीं है. हालांकि, इससे पुष्टि के दौरान चालू स्टेज की पहचान करने में मदद मिलती है.

1.2 फ़ाइनल स्टेज इंडिकेटर (data-nav-stage-final)

उपयोगकर्ता की निजी जानकारी या पेमेंट की जानकारी डालने से पहले, कीमतों की जानकारी दिखाने वाले आखिरी पेज पर, पेज के सबसे ऊपर मौजूद कंटेनर में फ़ाइनल-स्टेज का फ़्लैग जोड़ें. साथ ही, स्टेज का एलान करें. उदाहरण के लिए, data-nav-stage="ready-for-payment".

  • data-nav-stage-final (ज़रूरी नहीं): पेमेंट से पहले, फ़ाइनल कीमत वाले पेज पर "true" (data-nav-stage-final="true") पर सेट करें. इससे क्रॉलर को पता चलता है कि यह पेज, आखिरी पेज है और पुष्टि करने के लिए कीमत निकाली जा सकती है. इस पेज पर, माइक्रोडेटा टैगिंग के साथ कीमत की जानकारी होनी चाहिए.

1.3 क्रिटिकल पाथ इंटरैक्शन एट्रिब्यूट

इंटरमीडिएट पेजों पर, इंटरैक्टिव एलिमेंट (बटन या लिंक) को टैग करें. ये एलिमेंट, उपयोगकर्ता को बुकिंग के मुख्य पाथ पर आगे बढ़ाते हैं. अगर एक ही पेज पर कई कार्रवाइयां करनी हैं, तो उनके क्रम के बारे में बताएं. क्रॉलर, फ़ाइनल पेज पर कीमत निकालने से पहले, तय किए गए क्रम का पालन करता है.

एट्रिब्यूट ज़रूरी वैल्यू मकसद
data-nav-criticalpath "true" यह बटन/लिंक को ज़रूरी के तौर पर मार्क करता है. क्रॉलर को आगे बढ़ने के लिए इस पर क्लिक करना होगा.
data-nav-interactiontype "CLICK" यह कुकी यह एलान करती है कि फ़्लो को आगे बढ़ाने के लिए, क्लिक करने की कार्रवाई ज़रूरी है.
data-nav-interactionorder "1", "2", ... अगर एक ही पेज पर कई कार्रवाइयां करनी हैं, तो यह कुकी उनके क्रम के बारे में बताती है.

कम से कम नेविगेशन का उदाहरण

<button data-nav-criticalpath="true"
        data-nav-interactiontype="CLICK"
        data-nav-interactionorder="1">
  Continue
</button>

2. कीमत का एलान (माइक्रोडेटा)

बुकिंग फ़नल के आखिरी पेज पर (निजी या पेमेंट की जानकारी डालने से पहले), कीमत के ऑफ़र (एक कीमत का ऑफ़र) को माइक्रोडेटा टैग के साथ टैग करें. पेज पर सिर्फ़ एक ऑफ़र टैग किया जाना चाहिए. इससे यह पता चलता है कि क्रॉलर किस किराये की जानकारी निकालता है. यह किराया, Google पर चुने गए उस किराये के हिसाब से होना चाहिए जो व्यक्ति को आपकी वेबसाइट पर पहुंचने से पहले दिखाया गया था. लैंडिंग पेज के पैरामीटर तय करने के बारे में ज़्यादा जानने के लिए, वैरिएबल और शर्तें देखें.

Google, होटल के किराये के स्ट्रक्चर्ड डेटा के रेफ़रंस में मौजूद पूरी हैरारकी के साथ काम करता है. इसमें, आइटम के हिसाब से मूल किराये, अलग-अलग टैक्स, शुल्क, और कमरे की जानकारी शामिल है. हालांकि, Google, स्ट्रक्चर्ड डेटा के आसान ट्री को भी स्वीकार करता है, ताकि आपके लिए अपने वेबपेजों पर होटल के किराये को टैग करना आसान हो जाए.

उपलब्ध किराये के लिए, ठहरने का कुल किराया बताना ज़रूरी है. अगर यात्रा की योजना या कमरा उपलब्ध नहीं है या उसके सारे टिकट बिक चुके हैं, तो makesOffer एट्रिब्यूट की वैल्यू के तौर पर https://schema.org/SoldOut एट्रिब्यूट की वैल्यू दें. इसके लिए, priceSpecification एट्रिब्यूट की वैल्यू देने की ज़रूरत नहीं है:

<div itemprop="makesOffer" itemscope itemtype="https://schema.org/Offer">
  <meta itemprop="availability" content="https://schema.org/SoldOut"/>
  Sold Out
</div>

ज़्यादा जानकारी के लिए, availability प्रॉपर्टी स्पेसिफ़िकेशन देखें.

2.1 स्ट्रक्चर्ड डेटा ट्री का आसान वर्शन

बुकिंग पेजों पर टैग करने की प्रोसेस को आसान बनाने के लिए, आपको सिर्फ़ रूट होटल और रिज़र्वेशन कंटेनर, ठहरने की तारीखें (YYYY-MM-DD), ऑक्यूपेंसी, और कुल किराये की जानकारी देने वाला एक ऑफ़र घोषित करना होगा:

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 विज़िबिलिटी से जुड़े ज़रूरी नियम

कीमत की जानकारी सही तरीके से निकालने के लिए, एचटीएमएल को टैग करते समय, कीमत दिखने से जुड़े इन नियमों का पालन करें:

  • रुकने के कुल किराये की जानकारी दिखनी चाहिए: itemprop="price" का इस्तेमाल करके, पेज पर दिखने वाले किराये की संख्या को सीधे तौर पर टैग करें. कीमत के लिए, छिपे हुए मेटाडेटा (<meta>) या एट्रिब्यूट वैल्यू (value="..." या content="...") का इस्तेमाल न करें.
  • मशीन से पढ़ी जा सकने वाली तारीखें: पेज पर दिखने वाली तारीखों को ज़्यादा से ज़्यादा टैग करें. ज़रूरत पड़ने पर, content="..." एट्रिब्यूट का इस्तेमाल <span> एलिमेंट पर किया जा सकता है. इससे, तारीख को YYYY-MM-DD फ़ॉर्मैट में दिखाया जा सकता है. उदाहरण के लिए, <span itemprop="checkinTime" content="2026-08-10">August 10, 2026</span>.
  • न दिखने वाले फ़ील्ड: ऐसे फ़ील्ड जो पेज पर सीधे तौर पर नहीं दिखते हैं (जैसे कि होटल आईडी या मुद्रा कोड), उनमें <meta> टैग या content="..." एट्रिब्यूट का इस्तेमाल किया जा सकता है.

3. उदाहरण

यहां दिए गए एंड-टू-एंड उदाहरणों में, नेविगेशन एट्रिब्यूट और माइक्रोडेटा का इस्तेमाल करके, फ़नल के बीच के चरणों और फ़ाइनल चेकआउट पेजों को टैग करने का तरीका बताया गया है.

पहला उदाहरण: क्लिक किए जा सकने वाले बटन वाला इंटरमीडिएट पेज

यहां दिए गए स्निपेट में, कमरे के चुनाव का इंटरमीडिएट पेज (room-selection) दिखाया गया है. इसमें एक ही मुख्य पाथ ऐक्शन बटन को टैग किया गया है, ताकि फ़्लो को आगे बढ़ाया जा सके:

<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>

उदाहरण 2: स्टेज इंडिकेटर और कम से कम माइक्रोडेटा वाला फ़ाइनल कीमत पेज

नीचे दिए गए स्निपेट में, पेमेंट से पहले का आखिरी पेज (ready-for-payment) दिखाया गया है. इसमें data-nav-stage-final="true" को रैपर पर दिखाया गया है और ठहरने की आधिकारिक कीमत साफ़ तौर पर दिखाई गई है:

<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. लागू करने की पुष्टि करना

बदलावों को लागू करने से पहले, अपने मार्कअप और नेविगेशन टैगिंग की जांच करें. इससे यह पक्का किया जा सकेगा कि क्रॉलर, किराये की जानकारी की पुष्टि कर सकता है.

4.1 किराये और माइक्रोडेटा स्ट्रक्चर की पुष्टि करना

अपने पेज के यूआरएल या एचटीएमएल कॉन्टेंट से निकाले गए माइक्रोडेटा की जांच करने के लिए, Schema.org Validator या Google Rich Results Test का इस्तेमाल किया जा सकता है. होटल के किराये के स्ट्रक्चर्ड डेटा के रेफ़रंस में दी गई खास जानकारी के हिसाब से, निकाले गए फ़ील्ड की पुष्टि करें. साथ ही, पक्का करें कि आपका itemprop="price" एलिमेंट, पेज पर दिखने वाला आइटम हो.

4.2 नेविगेशन की पुष्टि करना

अपने टैग की पुष्टि करने के लिए, Google Chrome में ब्राउज़र डेवलपर टूल खोलें. इसके लिए, अपने वेबपेज पर राइट क्लिक करें और जांच करें को चुनें. इसके अलावा, एचटीएमएल DOM की जांच करने के लिए, F12 दबाएं.

पुष्टि करें कि आपने नेविगेशन से जुड़ी इन ज़रूरी शर्तों को पूरा किया हो:

  • पेज के सबसे ऊपर दिखने वाली स्टेज का एलान किया गया हो: बुकिंग फ़्लो के हर पेज में, <body> या रूट रैपर टैग पर data-nav-stage="..." शामिल हो. साथ ही, फ़ाइनल कीमत वाले पेज में data-nav-stage-final="true" शामिल हो.
  • क्रिटिकल पाथ पूरा हो गया है: इंटरमीडिएट पेजों के इंटरैक्टिव एलिमेंट (बटन या लिंक) को data-nav-criticalpath="true", data-nav-interactiontype, और data-nav-interactionorder के तौर पर मार्क किया गया है. अगर एक से ज़्यादा कार्रवाइयां मौजूद हैं, तो पक्का करें कि ऑर्डर नंबर सही तरीके से सेट किए गए हों.

4.3 दिखने की स्थिति और मार्कअप की क्वालिटी की पुष्टि करना

पुष्टि करें कि आपका माइक्रोडेटा, स्ट्रक्चर और दिखने से जुड़ी सभी ज़रूरी शर्तों को पूरा करता हो. ज़्यादा जानकारी के लिए, स्ट्रक्चर्ड डेटा ट्री का आसान वर्शन और दिखने से जुड़े ज़रूरी नियम देखें:

  • स्ट्रिक्ट हैरारकी: पक्का करें कि आपका मार्कअप, नेस्टिंग के ज़रूरी क्रम का पालन करता हो. जैसे, आसान ट्री या पूरा स्ट्रक्चर्ड डेटा रेफ़रंस स्पेसिफ़िकेशन. क्रम से न लगे या गलत तरीके से नेस्ट किए गए एलिमेंट को क्रॉलर अनदेखा कर सकता है.
  • दिखने वाली कीमत: itemprop="price", दिखने वाली कीमत वाले नंबर को सीधे तौर पर रैप करता है. इसमें छिपे हुए एट्रिब्यूट या <meta> टैग नहीं होते.
  • मशीन से पढ़ी जा सकने वाली ठहरने की तारीखें: checkinTime और checkoutTime में स्टैंडर्ड YYYY-MM-DD शामिल होता है. हालांकि, content="..." एट्रिब्यूट का इस्तेमाल करना ज़रूरी नहीं है.
  • सीधे तौर पर एलिमेंट टैग करना: दिखने वाली सभी प्रॉपर्टी (होटल का नाम, ठहरने की तारीखें, वयस्कों और बच्चों की संख्या) में, पेज पर दिखने वाला टेक्स्ट शामिल होता है.