Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

ราคาโรงแรม: เปิดใช้การนำทางของ Crawler และการติดแท็กราคา

คู่มือนี้สรุปวิธีติดแท็กเว็บไซต์ด้วย Microdata และ แอตทริบิวต์การนำทาง เพื่อให้ Crawler ตรวจสอบความถูกต้องของราคาของ Google สามารถไปยัง Funnel การจองของคุณโดยอัตโนมัติและตรวจสอบอัตราค่าห้องพัก

ประเด็นสำคัญ: Crawler จะตรวจสอบอัตราโดยทำตามลิงก์และปุ่มที่คลิกได้ (data-nav-*) เพื่อไปยังหน้าแสดงราคาสุดท้าย และดึงราคารวมของการเข้าพักที่มองเห็นได้โดยทำตามองค์ประกอบที่ติดแท็ก Microdata ในหน้า โดยไม่รองรับการป้อนข้อมูลส่วนบุคคลของผู้ใช้หรือข้อมูลทดสอบ (เช่น ชื่อแขกหรืออีเมล) หรือรายละเอียดการชำระเงิน อัตราค่าบริการต้องเข้าถึงได้โดยไม่ต้องให้ข้อมูลจากผู้ใช้

ดูข้อกำหนดทางเทคนิคทั้งหมดของพร็อพเพอร์ตี้ Structured Data ที่พร้อมใช้งานทั้งหมด (รวมถึงภาษี ค่าธรรมเนียม และรายละเอียดห้องพักที่แยกตามรายการ) ได้ที่ การอ้างอิง Structured Data ของราคาโรงแรม

1. การติดตั้งใช้งานการนำทาง (`data-nav-*`)

ใช้แอตทริบิวต์ HTML data-nav-* ที่กำหนดเองเพื่อใส่คำอธิบายประกอบองค์ประกอบแบบอินเทอร์แอกทีฟและประกาศขั้นตอนของ Funnel เพื่อให้ Crawler สามารถข้ามขั้นตอนการจองได้

1.1 การประกาศขั้นตอนที่ด้านบนของหน้า (`data-nav-stage`)

ทุกหน้าใน Funnel การจองที่แสดงอัตราค่าบริการควรประกาศขั้นตอนของหน้า โดยแนบกับแท็ก <body> หรือแท็ก Wrapper หลัก (เช่น <div>, <section>, หรือ <main>) ซึ่งจะบอกให้ Crawler ทราบว่าขั้นตอนใดของขั้นตอนการจองที่ใช้งานอยู่ และช่วยในการแก้ปัญหาในภายหลัง

data-nav-stage (แนะนำ): ประกาศขั้นตอนของ Funnel ที่ใช้งานอยู่ แม้ว่าจะไม่จำเป็นอย่างเคร่งครัด แต่การระบุชื่อ (เช่น "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") ในหน้าแสดงราคาสุดท้ายก่อนชำระเงิน ซึ่งจะบอกให้ Crawler ทราบว่าหน้านี้เป็นหน้าสุดท้ายและสามารถดึงราคาออกมาเพื่อตรวจสอบความถูกต้องได้ หน้านี้ต้องมีโครงสร้างราคาพร้อมการติดแท็ก Microdata

1.3 แอตทริบิวต์การโต้ตอบในเส้นทางที่สำคัญ

ในหน้าเว็บระดับกลาง ให้ติดแท็กองค์ประกอบแบบอินเทอร์แอกทีฟ (ปุ่มหรือลิงก์) ที่จะนำผู้ใช้ไปตามเส้นทางที่สำคัญของการจอง หากต้องดำเนินการหลายอย่างในหน้าเดียวกัน ให้ระบุลำดับการดำเนินการ Crawler จะทำตามลำดับที่ระบุก่อนที่จะพยายามดึงราคาในหน้าสุดท้าย

แอตทริบิวต์	ค่าที่ต้องการ	วัตถุประสงค์
`data-nav-criticalpath`	`"true"`	ทำเครื่องหมายปุ่ม/ลิงก์ที่บังคับซึ่ง Crawler ต้องคลิกเพื่อดำเนินการต่อ
`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. การประกาศราคา (Microdata)

ในหน้าสุดท้ายที่เข้าถึงได้ของ Funnel การจอง (ก่อนที่ผู้ใช้จะป้อนข้อมูลส่วนบุคคลหรือข้อมูลการชำระเงิน) ให้ติดแท็กข้อเสนอราคา (ข้อเสนอราคาเดียว) ด้วยแท็ก Microdata ควรติดแท็กข้อเสนอเพียงข้อเสนอเดียวในหน้า โดยระบุอัตราค่าบริการที่ Crawler ดึงออกมา ซึ่งสอดคล้องกับอัตราค่าบริการที่เลือกใน Google ก่อนที่ผู้ใช้จะเข้าสู่เว็บไซต์ ดูรายละเอียดเกี่ยวกับการกำหนดพารามิเตอร์หน้า Landing Page ได้ที่ ดู ตัวแปรและเงื่อนไข

แม้ว่า Google จะรองรับลำดับชั้นทั้งหมดในการ อ้างอิง Structured Data ของราคาโรงแรม อย่างเต็มที่ (รวมถึงอัตราฐาน ภาษี ค่าธรรมเนียม และรายละเอียดห้องพักที่แยกตามรายการ) แต่ Google ก็ยอมรับ ผังข้อมูล Structured Data แบบง่าย เพื่อให้คุณติดแท็กราคาโรงแรมในหน้าเว็บได้ง่ายขึ้น

ราคารวมของการเข้าพักเป็นข้อมูลที่บังคับสำหรับอัตราค่าบริการที่พร้อมให้บริการ หากแผนการเดินทางหรือห้องพักไม่พร้อมให้บริการหรือขายหมดแล้ว ให้ประกาศ 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 แผนผัง Structured Data แบบง่าย

หากต้องการติดแท็กในหน้าการจองให้ง่ายขึ้น คุณเพียงแค่ต้องประกาศคอนเทนเนอร์โรงแรมและคอนเทนเนอร์การจองระดับราก วันที่เข้าพัก (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)

ประเด็นสำคัญ: ทั้งแผนผังแบบง่ายนี้และลำดับชั้นที่ครอบคลุมซึ่งกำหนดไว้ใน การอ้างอิง Structured Data ของราคาโรงแรม เป็นสิ่งที่ยอมรับได้ ไม่ว่าคุณจะใช้โครงสร้างใด องค์ประกอบต้องเป็นไปตามลำดับชั้นการซ้อนที่กำหนด Crawler อาจไม่พบองค์ประกอบ Microdata ที่ประกาศไม่เป็นไปตามลำดับหรือวางไว้นอกคอนเทนเนอร์ระดับบนสุด

2.2 กฎการแสดงผลที่สำคัญ

โปรดทำตามกฎการแสดงผลต่อไปนี้เมื่อติดแท็ก HTML เพื่อให้ดึงราคาออกมาได้อย่างน่าเชื่อถือ

ราคารวมของการเข้าพักต้องมองเห็นได้: ติดแท็กตัวเลขราคาที่มองเห็นได้โดยตรง ในหน้าโดยใช้ itemprop="price" อย่าใช้ข้อมูลเมตาที่ซ่อนไว้ (<meta>) หรือค่าแอตทริบิวต์ (value="..." หรือ content="...") สำหรับตัวเลขราคา
วันที่เข้าพักที่เครื่องอ่านได้: ติดแท็กวันที่เข้าพักที่มองเห็นได้ในหน้าให้มากที่สุด หากจำเป็น คุณสามารถใช้แอตทริบิวต์ content="..." ในองค์ประกอบ <span> เพื่อระบุรูปแบบ YYYY-MM-DD มาแสดง วันที่ที่มองเห็นได้ (เช่น <span itemprop="checkinTime" content="2026-08-10">August 10, 2026</span>)
ช่องที่ไม่แสดง: ช่องที่ไม่แสดงโดยตรงในหน้า (เช่น รหัสโรงแรมหรือรหัสสกุลเงิน) สามารถใช้แท็ก <meta> หรือ content="..." ได้

3. ตัวอย่าง

ตัวอย่างแบบครบวงจรต่อไปนี้แสดงวิธีติดแท็กขั้นตอน Funnel ระดับกลางและหน้าชำระเงินสุดท้ายด้วยแอตทริบิวต์การนำทางและ Microdata

ตัวอย่างที่ 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>
</body>

ตัวอย่างที่ 2: หน้าแสดงราคาสุดท้ายที่มีตัวบ่งชี้ขั้นตอนและ Microdata แบบง่าย

ข้อมูลโค้ดต่อไปนี้แสดงหน้าสุดท้ายก่อนชำระเงิน (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>

4. ยืนยันการติดตั้งใช้งาน

ก่อนที่จะทำให้การเปลี่ยนแปลงใช้งานได้ ให้ทดสอบมาร์กอัปและการติดแท็กการนำทางเพื่อให้แน่ใจว่า Crawler สามารถตรวจสอบความถูกต้องของข้อมูลราคาได้สำเร็จ

4.1 ยืนยันราคาและโครงสร้าง Microdata

คุณสามารถใช้ เครื่องมือตรวจสอบ Schema.org หรือ การทดสอบผลการค้นหาที่เป็นริชมีเดียของ Google เพื่อตรวจสอบ Microdata ที่ดึงออกมาจาก URL ของหน้าเว็บหรือเนื้อหา HTML ตรวจสอบ ช่องที่ดึงออกมาเทียบกับข้อกำหนดในการอ้างอิง Structured Data ของราคาโรงแรม, และตรวจสอบว่าองค์ประกอบ itemprop="price" เป็นรายการที่มองเห็นได้ในหน้า

4.2 ยืนยันการนำทาง

หากต้องการยืนยันแท็ก ให้เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ ใน Google Chrome โดยคลิกขวาที่หน้าเว็บแล้วเลือกตรวจสอบ (หรือกด F12) เพื่อตรวจสอบ DOM ของ HTML

ยืนยันว่าการติดตั้งใช้งานเป็นไปตามข้อกำหนดการนำทางต่อไปนี้

มีการประกาศขั้นตอนที่ด้านบนของหน้า: ทุกหน้าในขั้นตอนการจอง มี data-nav-stage="..." ในแท็ก <body> หรือแท็ก Wrapper ระดับราก และ หน้าแสดงราคาสุดท้ายมี data-nav-stage-final="true"
เส้นทางที่สำคัญเสร็จสมบูรณ์: หน้าเว็บระดับกลางมีองค์ประกอบแบบอินเทอร์แอกทีฟ (ปุ่มหรือลิงก์) ที่ทำเครื่องหมายด้วย data-nav-criticalpath="true", data-nav-interactiontype และ data-nav-interactionorder หากมีการดำเนินการหลายอย่าง ให้ตรวจสอบว่าได้ตั้งค่าหมายเลขลำดับอย่างถูกต้อง

4.3 ยืนยันการแสดงผลและคุณภาพมาร์กอัป

ยืนยันว่า Microdata เป็นไปตามข้อกำหนดด้านโครงสร้างและการแสดงผลทั้งหมด (ดูรายละเอียดได้ที่ แผนผัง Structured Data แบบง่าย และ กฎการแสดงผลที่สำคัญ):

ลำดับชั้นที่เข้มงวด: ตรวจสอบว่ามาร์กอัปเป็นไปตามลำดับการซ้อนที่กำหนด (ทั้งแผนผังแบบง่ายหรือ ข้อกำหนดการอ้างอิง Structured Data แบบเต็ม) Crawler อาจไม่พบองค์ประกอบที่ไม่ได้เรียงตามลำดับหรือซ้อนกันอย่างไม่ถูกต้อง
ราคาที่มองเห็นได้: itemprop="price" จะครอบตัวเลขราคาที่มองเห็นได้ โดยตรงโดยไม่มีแอตทริบิวต์ที่ซ่อนไว้หรือแท็ก <meta>
วันที่เข้าพักที่เครื่องอ่านได้: checkinTime และ checkoutTime มี รูปแบบ YYYY-MM-DD มาตรฐาน (ใช้แอตทริบิวต์ content="..." ก็ได้)
การติดแท็กองค์ประกอบโดยตรง: พร็อพเพอร์ตี้ที่มองเห็นได้ทั้งหมด (ชื่อโรงแรม วันที่เข้าพัก จำนวนผู้เข้าพัก) จะครอบข้อความที่มองเห็นได้ในหน้า