این راهنما نحوه برچسبگذاری وبسایت شما با میکرودیتاها و ویژگیهای ناوبری را شرح میدهد تا خزنده دقت قیمت گوگل بتواند بهطور خودکار در قیف رزرو شما پیمایش کند و نرخ اتاقهای شما را تأیید کند.
جریان خزنده مفهومی
توالی زیر نشان میدهد که چگونه خزنده در یک قیف رزرو معمولی پیمایش میکند، حالتهای بارگذاری پویا را مدیریت میکند و اقدامات حیاتی را شناسایی میکند.
🗺️ مرور سریع جریان
- 🔗 مرحله ۱: سطح گوگل - خزنده به آدرس اینترنتی صفحه فرود پویا (که بر اساس الگوی شما در گوگل پیکربندی شده است) دسترسی پیدا میکند و درست مانند یک کاربر واقعی به سایت شما وارد میشود.
- 🛬 مرحله ۲: صفحه فرود — خزنده در سایت شریک فرود میآید (
data-nav-stage="landing"). - 🖱️ مرحله ۳: ناوبری — خزنده تعاملات اجباری (کلیکها، انتخابها) را که با استفاده از ویژگیهای
data-nav-*اعلام شدهاند، اجرا میکند. - 🏁 مرحله ۴: صفحه نهایی — خزنده به آخرین صفحه قابل دسترسی میرسد (
data-nav-stage-final="true"). - 📊 مرحله ۵: استخراج قیمت — خزنده قیمت برچسبگذاری شده با ریزدادهها را استخراج کرده و کل هزینه اقامت را اعتبارسنجی میکند.
مرحله ۱: صفحه فرود (انتخاب هتل یا صفحه افزایش فروش اختیاری)
خزنده از آدرس اینترنتی صفحه فرود (صفحهای که کاربر پس از کلیک روی موارد گوگل به سایت همکار منتقل میشود) بازدید میکند. برای جزئیات بیشتر در مورد پیکربندی پارامترهای صفحه فرود برای اطمینان از انتخاب نرخ صحیح، به متغیرها و شرایط مراجعه کنید.
حالت الف: صفحه بارگذاری
یک ماسک نشانگر بارگذاری به صورت گذرا قابل مشاهده است. خزنده منتظر میماند تا این تگ ناوبری ناپدید شود (حداکثر ۱۵ ثانیه).
<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>
حالت ب: صفحه بارگذاری شده است
به محض اینکه نشانگر بارگذاری ناپدید شد، محتوای صفحه بارگذاری میشود. خزنده عنصر مسیر بحرانی را پیدا کرده و برای پیشروی روی آن کلیک میکند.
<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>
مرحله ۲: صفحه میانی اختیاری (انتخاب اتاق یا گزینه)
خزنده به صفحه انتخاب نرخ میرسد.
حالت الف: صفحه بارگذاری
هنگام دریافت نرخها، یک چرخنده ظاهر میشود.
<body data-nav-stage="room-selection">
<div data-nav-loading-indicator="true">Fetching Rates...</div>
</body>
حالت ب: صفحه بارگذاری شده است
پس از اتمام بارگذاری، خزنده ممکن است قبل از ادامه کار با چندین عنصر به ترتیب تعامل داشته باشد. فقط تعاملات اجباری (مثلاً موافقت با شرایط اجباری یا انتخاب پیکربندیهای مورد نیاز بر اساس انتخاب کاربر در گوگل یا حداقل مسیر قیمت اجباری) باید برچسبگذاری شوند.
<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>
مرحله ۳: صفحه خزش نهایی (اعتبارسنجی قیمت / خلاصه رزرو)
خزنده به آخرین صفحه قابل دسترسی (آخرین صفحه قبل از ورود اطلاعات شخصی یا پرداخت کاربر) میرسد. این صفحه صحت پرچم data-nav-stage-final را تأیید میکند. این به خزنده سیگنال میدهد که پس از هرگونه پیمایش باقیمانده، قیمت دارای برچسب ریزداده را استخراج کند. برچسبهای ناوبری همیشه قبل از استخراج قیمت، ابتدا با هم تعامل دارند.
محدودههای آیتم اصلی باید همنوع 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>
۱. پیادهسازی ناوبری ( data-nav-* )
از ویژگیهای سفارشی data-nav-* HTML برای حاشیهنویسی عناصر تعاملی و اعلام مراحل قیف فروش استفاده کنید تا خزنده بتواند جریان رزرو شما را پیمایش کند.
۱.۱ اعلان مرحله بالای صفحه ( data-nav-stage )
هر صفحهای در قیف رزرو شما که نرخها را نمایش میدهد، باید مرحله خود را اعلام کند و آن را به تگ <body> یا یک تگ wrapper اصلی (مانند <div> ، <section> یا <main> ) متصل کند. این به خزنده میگوید که کدام مرحله از جریان رزرو فعال است و بعداً به رفع مشکلات کمک میکند.
-
data-nav-stage(توصیه شده): مرحله فعال قیف فروش را اعلام میکند. اگرچه کاملاً الزامی نیست، اما مشخص کردن نامها (برای مثال،"landing"،"room-selection"،"checkout"،"ready-for-payment") به شناسایی مرحله فعال در طول اعتبارسنجی کمک میکند.
۱.۲ نشانگر مرحله نهایی ( data-nav-stage-final )
در صفحه آخر که قیمتها را قبل از ورود اطلاعات شخصی یا پرداخت کاربر نمایش میدهد، پرچم مرحله نهایی را در کنار اعلان مرحله (برای مثال، data-nav-stage="ready-for-payment" ) به کانتینر بالای صفحه خود اضافه کنید.
-
data-nav-stage-final(برای صفحات اعتبارسنجی قیمت الزامی است): در آخرین صفحه از قیف رزرو که خزنده میتواند به آن دسترسی داشته باشد، روی"true"(data-nav-stage-final="true") تنظیم کنید. این نشان میدهد که پس از تکمیل تمام مراحل ناوبری مورد نیاز، خزنده باید قیمت را از این صفحه بخواند.
۱.۳ ویژگیهای تعامل مسیر بحرانی
در صفحات میانی، عناصر تعاملی (دکمهها یا لینکها) را که کاربر را در مسیر بحرانی رزرو پیش میبرند، برچسبگذاری کنید. اگر چندین اقدام در یک صفحه مورد نیاز است، ترتیب اجرا را مشخص کنید. خزنده قبل از تلاش برای استخراج قیمت در صفحه نهایی، ترتیب مشخص شده را دنبال میکند.
| ویژگی | مقدار مورد نیاز | هدف |
|---|---|---|
data-nav-criticalpath | "true" | دکمه/لینک اجباری که خزنده برای پیشروی باید روی آن کلیک کند را علامتگذاری میکند. |
data-nav-interactiontype | "CLICK" | عمل تعامل را اعلام میکند. CLICK برای دکمهها/لینکها است. |
data-nav-interactionorder | "1" ، "2" ، ... | اگر چندین عمل در یک صفحه مورد نیاز باشد، توالی اجرا را اعلام میکند. |
data-nav-loading-indicator | "true" | عنصری را علامتگذاری میکند که حالت بارگذاری را نشان میدهد (مثلاً spinner). خزنده قبل از ادامه، منتظر ناپدید شدن این عنصر میماند. |
مثال ناوبری مینیمال
<button data-nav-criticalpath="true"
data-nav-interactiontype="CLICK"
data-nav-interactionorder="1">
Continue
</button>
۲. اعلام قیمت (ریزداده)
در آخرین صفحه قابل دسترسی قیف رزرو خود (قبل از ورود اطلاعات شخصی یا پرداخت)، پیشنهاد قیمت (یک پیشنهاد قیمت) را با برچسبهای میکرودیتا برچسبگذاری کنید. فقط یک پیشنهاد باید در صفحه برچسبگذاری شود که نشان میدهد خزنده کدام نرخ را استخراج میکند، که مربوط به نرخ انتخاب شده در گوگل قبل از ورود کاربر به وبسایت شما است. برای جزئیات بیشتر در مورد تعریف پارامترهای صفحه فرود، به متغیرها و شرایط مراجعه کنید.
در حالی که گوگل به طور کامل از سلسله مراتب کامل در مرجع دادههای ساختاریافته قیمت هتل پشتیبانی میکند
(شامل نرخهای پایه جزئی، مالیاتهای فردی، هزینهها و جزئیات اتاق)، گوگل همچنین یک درخت داده ساختاریافته سادهشده را میپذیرد تا برچسبگذاری قیمت هتلها در صفحات وب شما را آسانتر کند.
قیمت کل اقامت برای نرخهای موجود اجباری است. اگر برنامه سفر یا اتاق موجود نیست یا تمام شده است، در قسمت 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 مراجعه کنید.
۲.۱ درخت داده ساختاریافته سادهشده
برای سادهسازی تگگذاری در صفحات رزرو، فقط کافی است هتل اصلی و کانتینر رزرو، تاریخ اقامت ( 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)
۲.۲ قوانین دید بحرانی
برای اطمینان از استخراج قیمت قابل اعتماد، هنگام برچسب گذاری 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="..."استفاده کنند.
۳. مثالها
مثالهای کامل زیر نحوه برچسبگذاری مراحل میانی قیف فروش و صفحات پرداخت نهایی را با ویژگیهای ناوبری و میکرودیتا نشان میدهند.
مثال ۱: صفحه میانی با دکمه قابل کلیک
قطعه کد زیر یک صفحه انتخاب اتاق میانی ( 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>
مثال ۲: صفحه قیمت نهایی با نشانگر مرحله و حداقل ریزدادهها
قطعه کد زیر آخرین صفحه قبل از پرداخت ( ready-for-payment ) را نشان میدهد که در آن data-nav-stage-final="true" در wrapper اعلان شده و قیمت اقامت معتبر به وضوح نمایش داده میشود:
<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>
۴. پیادهسازی خود را تأیید کنید
قبل از اعمال تغییرات، نشانهگذاری و برچسبگذاری ناوبری خود را آزمایش کنید تا مطمئن شوید که خزنده میتواند با موفقیت دادههای قیمتگذاری شما را تأیید کند.
۴.۱ بررسی قیمت و ساختار ریزدادهها
شما میتوانید از اعتبارسنج Schema.org یا تست نتایج غنی گوگل برای بررسی ریزدادههای استخراجشده از URL صفحه یا محتوای HTML خود استفاده کنید. فیلدهای استخراجشده را با مشخصات موجود در مرجع دادههای ساختاریافته قیمت هتل مطابقت دهید و مطمئن شوید که عنصر itemprop="price" شما یک آیتم قابل مشاهده در صفحه است.
۴.۲ تأیید ناوبری
برای تأیید تگهای خود، با کلیک راست روی صفحه وب خود و انتخاب Inspect (یا فشار دادن F12 ) برای بررسی HTML DOM ، ابزارهای توسعهدهنده مرورگر را در گوگل کروم باز کنید. عناصری با ویژگیهای data-nav-* را پیدا کنید.
تأیید کنید که پیادهسازی شما الزامات ناوبری زیر را برآورده میکند:
- مرحله بالای صفحه اعلام شده است: هر صفحه در جریان رزرو شامل
data-nav-stage="..."در تگ<body>یا root wrapper خود است و صفحه قیمت نهایی شاملdata-nav-stage-final="true"است. - مسیر بحرانی کامل شده است: صفحات میانی عناصر تعاملی خود (دکمهها یا پیوندها) را با
data-nav-criticalpath="true"،data-nav-interactiontypeوdata-nav-interactionorderمشخص کردهاند. اگر چندین اقدام وجود دارد، مطمئن شوید که شمارههای سفارش به درستی تنظیم شدهاند.
۴.۳ بررسی کیفیت نمایش و نشانهگذاری
تأیید کنید که ریزدادههای شما تمام الزامات ساختار و قابلیت مشاهده را برآورده میکنند (برای جزئیات بیشتر، به درخت داده ساختاریافته سادهشده و قوانین حیاتی قابلیت مشاهده مراجعه کنید):
- سلسله مراتب دقیق: مطمئن شوید که نشانهگذاری شما از ترتیب تودرتوی مورد نیاز (چه درخت سادهشده و چه مشخصات مرجع دادههای ساختاریافته کامل) پیروی میکند. عناصر خارج از ترتیب یا عناصر تودرتوی نامناسب ممکن است توسط خزنده از دست بروند.
- قیمت قابل مشاهده:
itemprop="price"مستقیماً عدد قیمت قابل مشاهده را بدون ویژگیهای پنهان یا برچسبهای<meta>در بر میگیرد. - تاریخهای اقامت قابل خواندن توسط ماشین:
checkinTimeوcheckoutTime(یا به طور جایگزین، ویژگیهایcheckinDateوcheckoutDate) حاوی قالب تاریخ استانداردYYYY-MM-DDهستند (در صورت نیاز، میتوان از ویژگیهایcontent="..."به صورت اختیاری استفاده کرد). اگر از تاریخ تماموقت (مثلاً2027-08-21T23:59:59یا مشابه آن) استفاده شود، بخش تاریخYYYY-MM-DDدر ابتدا فقط استخراج میشود. - تگگذاری مستقیم عنصر: تمام ویژگیهای قابل مشاهده (نام هتل، تاریخ اقامت، تعداد اتاقها) متن قابل مشاهده صفحه را در بر میگیرند.