Ce guide explique comment baliser votre site Web avec des microdonnées et des attributs de navigation afin que le robot d'exploration de la précision des prix de Google puisse parcourir automatiquement votre entonnoir de réservation et valider vos tarifs de chambres.
Pour obtenir la spécification technique complète de toutes les propriétés de données structurées disponibles (y compris les taxes, les frais et les détails des chambres détaillés), consultez la référence pour les données structurées sur les prix des hôtels.
1. Implémentation de la navigation (data-nav-*)
Utilisez des attributs HTML data-nav-* personnalisés pour annoter les éléments interactifs et déclarer les étapes de l'entonnoir afin que le robot d'exploration puisse parcourir votre flux de réservation.
1.1 Déclaration de l'étape en haut de la page (data-nav-stage)
Chaque page de votre entonnoir de réservation qui affiche des tarifs doit déclarer son
étape, associée à la balise <body> ou à une balise wrapper principale (telle que
<div>, <section>, ou <main>). Cela indique au robot d'exploration l'étape active du
flux de réservation et facilite la résolution des problèmes ultérieurement.
data-nav-stage(recommandé) : déclare l'étape active de l'entonnoir. Bien que cela ne soit pas strictement obligatoire, spécifier des noms (par exemple,"landing","room-selection","checkout","ready-for-payment") permet d'identifier l' étape active lors de la validation.
1.2 Indicateur d'étape finale (data-nav-stage-final)
Sur la dernière page affichant les prix avant la saisie des informations personnelles ou de paiement
de l'utilisateur, ajoutez l'indicateur d'étape finale à votre conteneur en haut de la page
à côté d'une déclaration d'étape (par exemple,
data-nav-stage="ready-for-payment").
data-nav-stage-final(facultatif) : défini sur"true"(data-nav-stage-final="true") sur la page de prix finale avant le paiement. Cela indique au robot d'exploration que cette page est la dernière et que le prix peut être extrait pour validation. Cette page doit contenir la structure de prix avec le balisage de microdonnées.
1.3 Attributs d'interaction du chemin critique
Sur les pages intermédiaires, balisez les éléments interactifs (boutons ou liens) qui font progresser l'utilisateur sur le chemin critique de la réservation. Si plusieurs actions sont requises sur la même page, spécifiez l'ordre d'exécution. Le robot d'exploration suit l'ordre spécifié avant de tenter d'extraire le prix sur la page finale.
| Attribut | Valeur requise | Objectif |
|---|---|---|
data-nav-criticalpath |
"true" |
Marque le bouton/lien obligatoire sur lequel le robot d'exploration doit cliquer pour passer à l'étape suivante. |
data-nav-interactiontype |
"CLICK" |
Déclare qu'une action de clic est requise pour passer à l'étape suivante. |
data-nav-interactionorder |
"1", "2", ... |
Déclare la séquence d'exécution si plusieurs actions sont requises sur la même page. |
Exemple minimal de navigation
<button data-nav-criticalpath="true"
data-nav-interactiontype="CLICK"
data-nav-interactionorder="1">
Continue
</button>
2. Déclaration de prix (microdonnées)
Sur la dernière page accessible de votre entonnoir de réservation (avant la saisie des informations personnelles ou de paiement), balisez l'offre de prix (une seule offre de prix) avec des balises de microdonnées. Une seule offre doit être balisée sur la page, indiquant le tarif que le robot d'exploration extrait, correspondant au tarif sélectionné sur Google avant que l'utilisateur n'accède à votre site Web. Pour en savoir plus sur la définition des paramètres de la page de destination, consultez Variables et conditions.
Bien que Google soit entièrement compatible avec la hiérarchie complète de la référence pour les données structurées sur les prix des hôtels (y compris les tarifs de base détaillés, les taxes individuelles, les frais et les détails des chambres), Google accepte également une arborescence de données structurées simplifiée pour vous permettre de baliser plus facilement les prix des hôtels sur vos pages Web.
Le prix total du séjour est obligatoire pour les tarifs disponibles. Si un séjour ou une chambre n'est pas disponible ou est complet, déclarez https://schema.org/SoldOut sous makesOffer sans priceSpecification :
<div itemprop="makesOffer" itemscope itemtype="https://schema.org/Offer">
<meta itemprop="availability" content="https://schema.org/SoldOut"/>
Sold Out
</div>
Pour en savoir plus, consultez la
availability propriété
spécification.
2.1 Arborescence de données structurées simplifiée
Pour simplifier le balisage sur vos pages de réservation, il vous suffit de déclarer le conteneur racine de l'hôtel et de la réservation
, les dates du séjour (YYYY-MM-DD), le nombre de personnes et une seule offre contenant le prix total du séjour
:
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 Règles de visibilité critiques
Pour garantir une extraction fiable des prix, suivez ces règles de visibilité lorsque vous balisez votre code HTML :
- Le prix total du séjour doit être visible : balisez le prix visible directement
sur la page à l'aide de
itemprop="price". N'utilisez pas de métadonnées masquées (<meta>) ni de valeurs d'attribut (value="..."oucontent="...") pour le prix. - Dates de séjour lisibles par les machines : balisez les dates de séjour visibles sur la page autant que possible. Si nécessaire, vous pouvez utiliser l'attribut
content="..."sur les éléments<span>pour fournir un formatYYYY-MM-DDstandard tout en affichant la date visible (par exemple,<span itemprop="checkinTime" content="2026-08-10">August 10, 2026</span>). - Champs non visibles : les champs qui ne sont pas affichés directement sur la page
(tels que l'ID de l'hôtel ou le code de devise) peuvent utiliser des balises
<meta>ou des attributscontent="...".
3. Exemples
Les exemples de bout en bout suivants montrent comment baliser les étapes intermédiaires de l'entonnoir et les pages de paiement finales avec des attributs de navigation et des microdonnées.
Exemple 1 : Page intermédiaire avec bouton cliquable
L'extrait suivant illustre une page intermédiaire de sélection de chambre (room-selection) avec un seul bouton d'action de chemin critique balisé pour faire progresser le flux :
<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>
Exemple 2 : Page de prix finale avec indicateur d'étape et microdonnées minimales
L'extrait suivant illustre la dernière page avant le paiement
(ready-for-payment) où data-nav-stage-final="true" est déclaré sur le
wrapper et le prix de séjour faisant autorité est visiblement exposé :
<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. Vérifier votre implémentation
Avant de déployer vos modifications, testez votre balisage et votre balisage de navigation pour vous assurer que le robot d'exploration peut valider vos données de prix.
4.1 Vérifier le prix et la structure des microdonnées
Vous pouvez utiliser le
programme de validation Schema.org
ou
le test des résultats enrichis de Google
pour inspecter les microdonnées extraites de l'URL de votre page ou du contenu HTML. Vérifiez
les champs extraits par rapport à la spécification de la
référence pour les données structurées sur les prix des hôtels,
et assurez-vous que votre itemprop="price" élément est un élément visible sur la page.
4.2 Vérifier la navigation
Pour vérifier vos balises, ouvrez les outils pour les développeurs du navigateur dans Google Chrome en cliquant avec le bouton droit sur votre page Web et en sélectionnant Inspecter (ou en appuyant sur F12) pour examiner le DOM HTML.
Vérifiez que votre implémentation répond aux exigences de navigation suivantes :
- L'étape en haut de la page est déclarée : chaque page du flux de réservation
inclut
data-nav-stage="..."sur sa balise<body>ou son wrapper racine, et la page de prix finale inclutdata-nav-stage-final="true". - Le chemin critique est terminé : les pages intermédiaires comportent leurs éléments interactifs (boutons ou liens) marqués avec
data-nav-criticalpath="true",data-nav-interactiontype, etdata-nav-interactionorder. Si plusieurs actions sont présentes, assurez-vous que les numéros d'ordre sont correctement définis.
4.3 Vérifier la visibilité et la qualité du balisage
Vérifiez que vos microdonnées répondent à toutes les exigences de structure et de visibilité (pour en savoir plus, consultez Arborescence de données structurées simplifiée et Règles de visibilité critiques) :
- Hiérarchie stricte : assurez-vous que votre balisage suit l'ordre d'imbrication requis (l'arborescence simplifiée ou la spécification complète de la référence pour les données structurées). Les éléments dans le désordre ou mal imbriqués peuvent être manqués par le robot d'exploration.
- Prix visible :
itemprop="price"encapsule directement le prix visible sans attributs masqués ni balises<meta>. - Dates de séjour lisibles par les machines :
checkinTimeetcheckoutTimecontiennent le formatYYYY-MM-DDstandard (en utilisant éventuellement les attributscontent="..."). - Balisage direct des éléments : toutes les propriétés visibles (nom de l'hôtel, dates du séjour, nombre de personnes) encapsulent le texte visible de la page.