Цены на отели: включить навигацию поискового робота и добавление ценников.

В этом руководстве описано, как добавить на ваш сайт микроданные и атрибуты навигации , чтобы поисковый робот Google, проверяющий точность цен, мог автоматически перемещаться по вашей воронке бронирования и подтверждать цены на номера.


Концептуальный поток ползуна

Следующая последовательность действий иллюстрирует, как веб-краулер перемещается по типичной воронке бронирования, обрабатывая динамические состояния загрузки и определяя критически важные действия.

🗺️ Краткий обзор потока

  • 🔗 Этап 1: Поиск в Google — Краулер получает доступ к URL-адресу динамической целевой страницы (настроенному в Google на основе вашего шаблона) и попадает на ваш сайт так же, как и реальный пользователь.
  • 🛬 Этап 2: Целевая страница — Краулер попадает на сайт партнера ( data-nav-stage="landing" ).
  • 🖱️ Этап 3: Навигация — Краулер выполняет обязательные действия (клики, выделение), объявленные с помощью атрибутов data-nav-* .
  • 🏁 Этап 4: Финальная страница — Краулер достигает финальной доступной страницы ( data-nav-stage-final="true" ).
  • 📊 Этап 5: Извлечение цены — Краулер извлекает цену с микроданными и проверяет общую стоимость проживания.

Шаг 1: целевая страница (страница выбора отеля или дополнительная страница для продажи дополнительных услуг)

Поисковый робот переходит по URL целевой страницы (страница, на которую пользователь попадает на партнерский сайт после клика по элементам Google). Подробную информацию о настройке параметров целевой страницы для обеспечения выбора правильной ставки см. в разделе «Переменные и условия» .

Состояние А: экран загрузки

Временно отображается индикатор загрузки. Краулер ожидает исчезновения этого навигационного тега (максимум 15 секунд).

<body data-nav-stage="landing">
  <!-- Loading indicator: Crawler waits for this to disappear (max 15s) -->
  <div data-nav-loading-indicator="true">Loading Page...</div>
</body>

Состояние B: страница загружена

Как только индикатор загрузки исчезнет, ​​содержимое страницы загрузится. Поисковый робот находит и нажимает на элемент критического пути для перехода к следующему шагу.

<body data-nav-stage="landing">
  <!-- Ignored: Crawler skips non-selected rates -->
  <div class="hotel-result">
    <h3>Grand Hotel - Basic Room</h3>
    <button>View Rates</button>
  </div>

  <!-- critical path: crawler clicks this to advance -->
  <div class="hotel-result selected-rate">
    <h3>Grand Hotel - Deluxe Suite</h3>
    <button data-nav-criticalpath="true"
            data-nav-interactiontype="CLICK"
            data-nav-interactionorder="1">
      View Rates
    </button>
  </div>
</body>

Шаг 2: необязательная промежуточная страница (выбор номера или опции)

Поисковый робот доходит до страницы выбора тарифа.

Состояние А: экран загрузки

Во время загрузки курсов появляется индикатор загрузки.

<body data-nav-stage="room-selection">
  <div data-nav-loading-indicator="true">Fetching Rates...</div>
</body>

Состояние B: страница загружена

После завершения загрузки поисковый робот может последовательно взаимодействовать с несколькими элементами, прежде чем продолжить. Помечать следует только обязательные взаимодействия (например, согласие с обязательными условиями или выбор необходимых настроек на основе выбора пользователя в Google или пути минимальной обязательной цены).

<body data-nav-stage="room-selection">
  <!-- Step 1: mandatory interaction (e.g., select bed configuration) -->
  <div class="rate-option">
    <p>Deluxe Suite</p>

    <!-- Note: Either the value selected by the user on Google should be pre-selected,
         or navigation elements must be provided so the crawler can select it. -->
    <div class="bed-selection">
      <button data-nav-criticalpath="true"
              data-nav-interactiontype="CLICK"
              data-nav-interactionorder="1">
        Select Queen Bed
      </button>
      <button>Select King Bed</button>
    </div>
  </div>

  <!-- Step 2: mandatory interaction (e.g., mandatory insurance opt-out or agreement) -->
  <div class="mandatory-notice">
    <label>
      <input type="checkbox"
             data-nav-criticalpath="true"
             data-nav-interactiontype="CLICK"
             data-nav-interactionorder="2">
      I agree to the non-refundable dynamic pricing waiver.
    </label>
  </div>

  <!-- Step 3: Continue to checkout -->
  <button data-nav-criticalpath="true"
          data-nav-interactiontype="CLICK"
          data-nav-interactionorder="3">
    Continue Reserving
  </button>
</body>

Шаг 3: заключительная страница сканирования (проверка цены / сводка бронирования)

Поисковый робот достигает последней доступной страницы (последней страницы перед вводом личных данных пользователя или платежной информации). Он проверяет, установлен ли флаг data-nav-stage-final в значение true. Это сигнализирует роботу о необходимости извлечения цены с микроданными после завершения всех оставшихся переходов по страницам. Взаимодействие с навигационными тегами всегда происходит в первую очередь перед извлечением цены.

Основные области видимости элементов должны представлять собой котипы Hotel и LodgingReservation (например, itemtype="https://schema.org/Hotel https://schema.org/LodgingReservation" ). Для обеспечения обратной совместимости мы также принимаем родительскую область видимости Hotel , содержащую дочерний элемент, имеющий котипы Offer и LodgingReservation (например, <div itemprop="makesOffer" itemscope itemtype="https://schema.org/Offer https://schema.org/LodgingReservation"> ). На странице должен быть только один элемент Hotel и один Offer находящийся под этим Hotel .

  • В этом примере показана только обязательная маркировка итоговой цены, рекомендуемая для простоты. {Простая итоговая цена}

    <!-- End of Scope comments identify container boundaries -->
    <body data-nav-stage="checkout" data-nav-stage-final="true">
    
      <!-- Booking Summary Cart Scope (Hotel + LodgingReservation) -->
      <div class="booking-summary" itemscope itemtype="https://schema.org/Hotel https://schema.org/LodgingReservation">
    
        <!-- Hotel Identifier (Can be hidden meta tag) -->
        <meta itemprop="identifier" content="grand-hotel-001" />
    
        <h2 itemprop="name">Grand Hotel</h2>
    
        <!-- Visible Stay Dates & Occupancy (checkinDate / checkoutDate are also acceptable) -->
        <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>
    
        <!-- Offer Scope -->
        <div class="cart-details" itemprop="makesOffer" itemscope itemtype="https://schema.org/Offer">
    
          <!-- Compound Price Scope -->
          <div itemprop="priceSpecification" itemscope itemtype="https://schema.org/CompoundPriceSpecification">
    
            <div class="total-line">
              <span>Total Stay (Taxes Included):</span>
              <!-- The crawler extracts this final rate as total price -->
              <span itemprop="price">440.00</span>
              <meta itemprop="priceCurrency" content="USD" />
            </div>
    
          </div> <!-- End of CompoundPriceSpecification Scope -->
        </div> <!-- End of Offer Scope -->
      </div> <!-- End of Hotel/LodgingReservation Scope -->
    
    </body>
    
  • В этом примере показана общая стоимость с подробным описанием (базовая ставка, сборы). {Общая стоимость + Подробное описание}

    <!-- End of Scope comments identify container boundaries -->
    <body data-nav-stage="checkout" data-nav-stage-final="true">
    
      <!-- Booking Summary Cart Scope (Hotel + LodgingReservation) -->
      <div class="booking-summary" itemscope itemtype="https://schema.org/Hotel https://schema.org/LodgingReservation">
    
        <!-- Hotel Identifier (Can be hidden meta tag) -->
        <meta itemprop="identifier" content="grand-hotel-001" />
    
        <h2 itemprop="name">Grand Hotel</h2>
    
        <!-- Visible Stay Dates & Occupancy (checkinDate / checkoutDate are also acceptable) -->
        <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>
    
        <!-- Offer Scope -->
        <div class="cart-details" itemprop="makesOffer" itemscope itemtype="https://schema.org/Offer">
    
          <!-- Compound Price Scope -->
          <div itemprop="priceSpecification" itemscope itemtype="https://schema.org/CompoundPriceSpecification">
    
            <div class="line-item">
              <span>Base Rate (2 Nights):</span>
              <!-- Unit Price Scope for Base -->
              <span itemprop="priceSpecification" itemscope itemtype="https://schema.org/UnitPriceSpecification">
                <span itemprop="price">400.00</span>
                <meta itemprop="priceCurrency" content="USD" />
              </span> <!-- End of UnitPriceSpecification Scope -->
            </div>
    
            <div class="line-item">
              <span>Resort Fee:</span>
              <!-- Unit Price Scope for Fee -->
              <span itemprop="priceSpecification" itemscope itemtype="https://schema.org/UnitPriceSpecification">
                <span itemprop="price">40.00</span>
                <meta itemprop="priceCurrency" content="USD" />
              </span> <!-- End of UnitPriceSpecification Scope -->
            </div>
    
            <div class="total-line">
              <span>Total Stay:</span>
              <!-- The crawler extracts this final rate as total price -->
              <span itemprop="price">440.00</span>
              <meta itemprop="priceCurrency" content="USD" />
            </div>
    
          </div> <!-- End of CompoundPriceSpecification Scope -->
        </div> <!-- End of Offer Scope -->
      </div> <!-- End of Hotel/LodgingReservation Scope -->
    
    </body>
    

Используйте пользовательские HTML-атрибуты 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 )

На последней странице, отображающей цены перед вводом личных данных пользователя или платежной информации, добавьте флаг final-stage в контейнер в верхней части страницы вместе с объявлением этапа (например, 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" Объявляет действие взаимодействия. CLICK используется для кнопок/ссылок.
data-nav-interactionorder "1" , "2" , ... Определяет последовательность выполнения, если на одной странице требуется выполнить несколько действий.
data-nav-loading-indicator "true" Отмечает элемент, указывающий на состояние загрузки (например, индикатор загрузки). Веб-сканер ожидает исчезновения этого элемента, прежде чем продолжить работу.

Пример минимальной навигации

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

2. Указание цены (микроданные)

На последней доступной странице вашей воронки бронирования (перед вводом личной информации или платежных данных) пометьте ценовое предложение (одно ценовое предложение) микротегами. На странице должно быть помечено только одно предложение, указывающее, какой тариф будет извлечен поисковым роботом, соответствующий тарифу, выбранному в Google до того, как пользователь попадет на ваш сайт. Подробную информацию об определении параметров целевой страницы см. в разделе « Переменные и условия» .

Хотя Google полностью поддерживает полную иерархию в справочнике структурированных данных о ценах на отели.

(включая детализированные базовые тарифы, индивидуальные налоги, сборы и информацию о номере), Google также принимает упрощенное структурированное дерево данных , чтобы вам было проще помечать цены на отели на ваших веб-страницах.

Для получения доступных тарифов обязательно указана общая стоимость проживания. Если маршрут или номер недоступны или распроданы, укажите https://schema.org/SoldOut в разделе makesOffer без 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 Правила критической видимости

Для обеспечения надежного извлечения цен следуйте этим правилам видимости при разметке HTML-кода:

  • Общая стоимость проживания должна быть видимой: укажите видимую цену непосредственно на странице, используя itemprop="price" . Не используйте скрытые метаданные ( <meta> ) или значения атрибутов ( value="..." или content="..." ) для указания цены.
  • Даты пребывания в машиночитаемом формате: По возможности указывайте видимые даты пребывания на странице. При необходимости можно использовать атрибут content="..." для элементов <span> `, чтобы указать стандартный формат YYYY-MM-DD при отображении видимой даты (например, ` <span itemprop="checkinTime" content="2026-08-10">August 10, 2026</span> ; checkinDate также допустимо).
  • Невидимые поля: Поля, которые не отображаются непосредственно на странице (например, идентификатор отеля или код валюты), могут использовать теги <meta> или атрибуты content="..." .

3. Примеры

Приведенные ниже примеры демонстрируют, как помечать промежуточные этапы воронки продаж и страницы оформления заказа атрибутами навигации и микроданными.

Пример 1: промежуточная страница с кликабельной кнопкой

Следующий фрагмент кода демонстрирует промежуточную страницу выбора номера ( 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>
  <!-- Rest of the Main page content -->
</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 Проверка цены и структуры микроданных

Для проверки микроданных, извлеченных из URL-адреса вашей страницы или HTML-контента, вы можете использовать валидатор Schema.org или тест расширенных результатов Google . Проверьте извлеченные поля на соответствие спецификации в справочнике структурированных данных цен на отели и убедитесь, что ваш элемент itemprop="price" является видимым элементом на странице.

4.2 Проверка навигации

Чтобы проверить ваши теги, откройте инструменты разработчика в Google Chrome, щелкнув правой кнопкой мыши по веб-странице и выбрав «Просмотреть код элемента» (или нажав F12 ), чтобы изучить HTML DOM. Найдите элементы с атрибутами data-nav-* .

Убедитесь, что ваша реализация соответствует следующим требованиям к навигации:

  • Объявлен этап в верхней части страницы: каждая страница в процессе бронирования включает data-nav-stage="..." в свой тег <body> или корневой тег-обертку, а страница с окончательной ценой включает data-nav-stage-final="true" .
  • Критический путь завершен: интерактивные элементы (кнопки или ссылки) на промежуточных страницах помечены параметрами data-nav-criticalpath="true" , data-nav-interactiontype и data-nav-interactionorder . Если присутствует несколько действий, убедитесь, что номера порядков заданы правильно.

4.3 Проверка видимости и качества разметки

Убедитесь, что ваши микроданные соответствуют всем требованиям к структуре и видимости (подробнее см. упрощенное дерево структурированных данных и правила критической видимости ):

  • Строгая иерархия: убедитесь, что ваша разметка соответствует требуемому порядку вложенности (либо упрощенному дереву, либо полной спецификации ссылок на структурированные данные ). Элементы, расположенные не по порядку или неправильно вложенные, могут быть пропущены поисковым роботом.
  • Видимая цена: itemprop="price" напрямую содержит видимое числовое значение цены без скрытых атрибутов или тегов <meta> .
  • Даты пребывания в машиночитаемом формате: атрибуты checkinTime и checkoutTime (или, альтернативно, атрибуты checkinDate и checkoutDate ) содержат стандартный формат даты YYYY-MM-DD (при необходимости можно использовать атрибуты content="..." ). Если используется полное время (например, 2027-08-21T23:59:59 или аналогичное), извлекается только начальная часть даты YYYY-MM-DD .
  • Прямая разметка элементов: все видимые свойства (название отеля, даты проживания, заполняемость) переносят видимый текст страницы.