ใช้การแสดงผลแบบไดนามิกเป็นวิธีแก้ปัญหาชั่วคราว

ในบางเว็บไซต์ JavaScript จะสร้างเนื้อหาอื่นๆ ในหน้าเว็บเมื่อมีการเรียกใช้ในเบราว์เซอร์ ซึ่งเราเรียกว่าการแสดงผลฝั่งไคลเอ็นต์ แม้ว่า Google Search จะประมวลผล JavaScript ได้ แต่ก็มีฟีเจอร์ JavaScript ที่มีข้อจํากัดใน Google Search และบางหน้าอาจพบปัญหาเกี่ยวกับเนื้อหาที่ไม่ปรากฎใน HTML ที่แสดงผล เครื่องมือค้นหาอื่นๆ อาจเลือกไม่สนใจ JavaScript และจะไม่เห็นเนื้อหาที่สร้างด้วย JavaScript

การแสดงผลแบบไดนามิกเป็นวิธีแก้ปัญหาชั่วคราวสําหรับเว็บไซต์ที่ไม่มีเนื้อหาที่สร้างด้วย JavaScript ให้กับเครื่องมือค้นหา เซิร์ฟเวอร์การแสดงผลแบบไดนามิกตรวจพบบ็อตที่อาจมีปัญหากับเนื้อหาที่สร้างด้วย JavaScript และแสดงเวอร์ชันที่เซิร์ฟเวอร์แสดงผลโดยไม่มี JavaScript ต่อบ็อตเหล่านี้ และแสดงเนื้อหาเวอร์ชันที่แสดงผลฝั่งไคลเอ็นต์แก่ผู้ใช้

การแสดงผลแบบไดนามิกเป็นวิธีแก้ปัญหาชั่วคราวและไม่ใช่วิธีแก้ไขที่แนะนำ เนื่องจากจะทําให้มีความซับซ้อนและจำเป็นต้องใช้ทรัพยากรเพิ่มเติม

เว็บไซต์ที่ควรใช้การแสดงผลแบบไดนามิก

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

ทำความเข้าใจวิธีการทำงานของการแสดงผลแบบไดนามิก

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

แผนภาพที่แสดงวิธีการแสดงผลแบบไดนามิก แผนภาพส่วนบนชี้ให้เห็นถึงเซิร์ฟเวอร์ที่แสดงเนื้อหา HTML และ JavaScript เริ่มต้นไปยังเบราว์เซอร์โดยตรง ขณะที่แผนภาพส่วนล่างชี้ให้เห็นถึงเซิร์ฟเวอร์ที่แสดงเนื้อหา HTML และ JavaScript เริ่มต้นไปยังตัวแสดงผล ซึ่งจะแปลงเนื้อหาดังกล่าวเป็นเนื้อหา HTML แบบคงที่ หลังจากที่แปลงเนื้อหาแล้ว ตัวแสดงผลจะแสดง HTML แบบคงที่ไปยังโปรแกรมรวบรวมข้อมูล

การแสดงผลแบบไดนามิกไม่ใช่การปิดบังหน้าเว็บจริง

โดยทั่วไป Googlebot จะไม่ถือว่าการแสดงผลแบบไดนามิกเป็นการปิดบังหน้าเว็บจริง ตราบใดที่การแสดงผลนั้นสร้างเนื้อหาที่เหมือนกัน Googlebot จะไม่มองว่าการแสดงผลแบบไดนามิกเป็นการปิดบังหน้าเว็บจริง

ขณะตั้งค่าการแสดงผลแบบไดนามิก เว็บไซต์อาจสร้างหน้าข้อผิดพลาดขึ้นมา Googlebot จะไม่ถือว่าหน้าข้อผิดพลาดเหล่านี้เป็นการปิดบังหน้าเว็บจริง และปฏิบัติต่อข้อผิดพลาดนั้นเช่นเดียวกับหน้าข้อผิดพลาดอื่นๆ

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

นำการแสดงผลแบบไดนามิกไปใช้

โปรดทำตามหลักเกณฑ์ทั่วไปของเราเพื่อตั้งค่าการแสดงผลเนื้อหาแบบไดนามิก และอ่านรายละเอียดการกำหนดค่าที่เจาะจง เนื่องจากเนื้อหาแต่ละประเภทมีการนำไปใช้ที่แตกต่างกันอย่างมาก

  1. ติดตั้งและกำหนดค่าตัวแสดงผลแบบไดนามิก (เช่น Puppeteer, Rendertron หรือ prerender.io) เพื่อเปลี่ยนรูปแบบเนื้อหาเป็น HTML แบบคงที่ วิธีนี้จะช่วยให้ Crawler จัดการได้ง่ายขึ้น
  2. เลือก User Agent ที่คุณต้องการให้รับ HTML แบบคงที่และดูรายละเอียดการกำหนดค่าที่เจาะจงเกี่ยวกับวิธีอัปเดตหรือเพิ่ม User Agent ด้านล่างนี้เป็นตัวอย่างของรายการ User Agent ที่พบทั่วไปในมิดเดิลแวร์ Rendertron 
    export const botUserAgents = [
  'googlebot',
  'bingbot',
  'linkedinbot',
  'mediapartners-google',
];
  3. หากการแสดงผลล่วงหน้าทำให้เซิร์ฟเวอร์ช้าลงหรือคุณเห็นคำขอการแสดงผลล่วงหน้าจำนวนมาก ให้ลองใช้แคชสำหรับเนื้อหาที่แสดงผลล่วงหน้า หรือตรวจสอบว่าคำขอมาจาก Crawler ที่ถูกต้อง
  4. ระบุว่า User Agent กำหนดว่าต้องใช้เนื้อหาในเดสก์ท็อปหรืออุปกรณ์เคลื่อนที่ ใช้การแสดงผลแบบไดนามิกเพื่อระบุเวอร์ชันที่เหมาะสมกับเดสก์ท็อปหรืออุปกรณ์เคลื่อนที่ ด้านล่างนี้เป็นตัวอย่างที่บ่งบอกว่าการกำหนดค่าระบุว่า User Agent ต้องใช้เนื้อหาในเดสก์ท็อปหรืออุปกรณ์เคลื่อนที่ได้อย่างไร 
    isPrerenderedUA = userAgent.matches(botUserAgents)
isMobileUA = userAgent.matches(['mobile', 'android'])

    
if (!isPrerenderedUA) {
} else {
  servePreRendered(isMobileUA)
}
  5. กำหนดค่าเซิร์ฟเวอร์ที่จะส่ง HTML แบบคงที่ไปยังโปรแกรมรวบรวมข้อมูลที่คุณเลือก โดยมีหลายวิธีให้เลือกใช้ตามตัวอย่างด้านล่าง ทั้งนี้ขึ้นอยู่กับเทคโนโลยีที่ใช้ด้วย
    • คำขอพร็อกซีที่มาจาก Crawler ไปยังตัวแสดงผลแบบไดนามิก
    • แสดงผลล่วงหน้าในฐานะส่วนหนึ่งของกระบวนการติดตั้งใช้งานและทำให้เซิร์ฟเวอร์แสดง HTML แบบคงที่ไปยังโปรแกรมรวบรวมข้อมูล
    • สร้างการแสดงผลแบบไดนามิกลงในโค้ดเซิร์ฟเวอร์ที่กำหนดเอง
    • แสดงเนื้อหาแบบคงที่จากบริการการแสดงผลล่วงหน้าไปยัง Crawler
    • ใช้มิดเดิลแวร์สำหรับเซิร์ฟเวอร์ (เช่น มิดเดิลแวร์ Rendertron)

ตรวจสอบการกำหนดค่า

หลังจากที่นำการแสดงผลแบบไดนามิกไปใช้เรียบร้อยแล้ว ให้ตรวจสอบว่าทุกอย่างทำงานได้ตามที่คาดไว้โดยตรวจสอบ URL ด้วยการทดสอบต่อไปนี้

  1. ทดสอบเนื้อหาเวอร์ชันอุปกรณ์เคลื่อนที่และเดสก์ท็อปด้วยเครื่องมือตรวจสอบ URL เพื่อดูว่าเนื้อหาดังกล่าวปรากฏอยู่ในหน้าที่แสดงผลด้วย (หน้าที่แสดงผลคือลักษณะที่ Google เห็นหน้าของคุณ)

    สำเร็จ: เนื้อหาเวอร์ชันอุปกรณ์เคลื่อนที่และเดสก์ท็อปตรงกับสิ่งที่คุณคาดหวังให้ผู้ใช้เห็น

    ลองอีกครั้ง: หากเนื้อหาที่เห็นไม่ตรงกับสิ่งที่คุณคาดหวัง โปรดดูส่วนการแก้ปัญหา

  2. หากคุณใช้ Structured Data ให้ทดสอบว่า Structured Data แสดงผลอย่างถูกต้องด้วยการทดสอบผลการค้นหาที่เป็นริชมีเดีย

    สำเร็จ: Structured Data ปรากฏขึ้นตามที่คุณคาดหวังไว้

    ลองอีกครั้ง: หาก Structured Data ไม่ปรากฏตามที่คาดหวัง โปรดดูส่วนการแก้ปัญหา

การแก้ปัญหา

หากเนื้อหาแสดงข้อผิดพลาดในเครื่องมือตรวจสอบ URL หรือเนื้อหาไม่ปรากฏในผลการค้นหาของ Google Search ให้ลองแก้ไขปัญหาที่พบบ่อยที่สุด หากยังประสบปัญหาอยู่ โปรดโพสต์หัวข้อใหม่ในชุมชนความช่วยเหลือของ Google Search Central

เนื้อหาไม่สมบูรณ์หรือดูแตกต่างไป

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

แก้ปัญหา: ดูเอกสารสำหรับโซลูชันการแสดงผลที่เจาะจงเพื่อแก้ไขข้อบกพร่องเกี่ยวกับการตั้งค่าการแสดงผลแบบไดนามิก

เวลาในการตอบสนองนาน

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

แก้ไขปัญหา

  1. ตั้งค่าแคชสำหรับ HTML ที่แสดงผลล่วงหน้าหรือสร้าง HTML เวอร์ชันคงที่สำหรับเนื้อหาเป็นส่วนหนึ่งของกระบวนการสร้างของคุณ
  2. อย่าลืมเปิดใช้แคชในการกำหนดค่า (เช่น ชี้ Crawler ไปยังแคช)
  3. ตรวจสอบว่า Crawler ได้รับเนื้อหาอย่างรวดเร็วโดยใช้เครื่องมือทดสอบ เช่น การทดสอบผลการค้นหาที่เป็นริชมีเดีย หรือ webpagetest (โดยใช้สตริง User Agent ที่กำหนดเองจากรายการ User Agent ของ Crawler ของ Google) โดยคำขอของคุณต้องไม่หมดเวลาไปก่อน

คอมโพเนนต์เว็บไม่แสดงผลตามที่คาดไว้

สาเหตุของปัญหา: Shadow DOM ถูกแยกออกจากส่วนที่เหลือของหน้า โซลูชันการแสดงผล (เช่น Rendertron) จะมองไม่เห็นเนื้อหาภายใน Shadow DOM ที่แยกออกมา ดูข้อมูลเพิ่มเติมได้ในแนวทางปฏิบัติแนะนำสำหรับคอมโพเนนต์เว็บ

แก้ปัญหา

  1. โหลด polyfill webcomponents.js สำหรับเอลิเมนต์ที่กำหนดเองและ Shadow DOM
  2. ใช้การทดสอบผลการค้นหาที่เป็นริชมีเดียหรือเครื่องมือตรวจสอบ URL เพื่อตรวจสอบว่าเนื้อหาปรากฏใน HTML ที่แสดงผลของโซลูชันการแสดงผล

ไม่มีข้อมูลที่มีโครงสร้าง

สาเหตุของปัญหา: ข้อผิดพลาดเกี่ยวกับ Structured Data อาจเกิดขึ้นได้ หากไม่มี User Agent สำหรับ Structured Data หรือไม่ได้รวมแท็กสคริปต์ JSON-LD ไว้ในเอาต์พุต

แก้ไขปัญหา

  1. ใช้การทดสอบผลการค้นหาที่เป็นริชมีเดียเพื่อตรวจสอบว่า Structured Data นั้นปรากฏอยู่ในหน้า จากนั้นกําหนดค่า User Agent เพื่อทดสอบเนื้อหาที่แสดงผลล่วงหน้าด้วย Googlebot สําหรับเดสก์ท็อปหรืออุปกรณ์เคลื่อนที่
  2. ตรวจสอบว่าแท็กสคริปต์ JSON-LD รวมอยู่ใน HTML ที่แสดงผลแบบไดนามิกของเนื้อหา ดูข้อมูลเพิ่มเติมในเอกสารเกี่ยวกับโซลูชันการแสดงผล