ใช้การแสดงผลแบบไดนามิกเป็นวิธีแก้ปัญหาชั่วคราว
ในบางเว็บไซต์ 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 แบบคงที่ไปยังโปรแกรมรวบรวมข้อมูล](https://developers-dot-devsite-v2-prod.appspot.com/static/search/docs/images/how-dynamic-rendering-works.png?authuser=19&hl=th)
การแสดงผลแบบไดนามิกไม่ใช่การปิดบังหน้าเว็บจริง
โดยทั่วไป Googlebot จะไม่ถือว่าการแสดงผลแบบไดนามิกเป็นการปิดบังหน้าเว็บจริง ตราบใดที่การแสดงผลนั้นสร้างเนื้อหาที่เหมือนกัน Googlebot จะไม่มองว่าการแสดงผลแบบไดนามิกเป็นการปิดบังหน้าเว็บจริง
ขณะตั้งค่าการแสดงผลแบบไดนามิก เว็บไซต์อาจสร้างหน้าข้อผิดพลาดขึ้นมา Googlebot จะไม่ถือว่าหน้าข้อผิดพลาดเหล่านี้เป็นการปิดบังหน้าเว็บจริง และปฏิบัติต่อข้อผิดพลาดนั้นเช่นเดียวกับหน้าข้อผิดพลาดอื่นๆ
การใช้การแสดงผลแบบไดนามิกเพื่อแสดงเนื้อหาที่แตกต่างไปอย่างสิ้นเชิงให้แก่ผู้ใช้และโปรแกรมรวบรวมข้อมูลอาจถือเป็นการปิดบังหน้าเว็บจริง ตัวอย่างเช่น เว็บไซต์ที่แสดงหน้าเว็บเกี่ยวกับแมวให้แก่ผู้ใช้และแสดงหน้าเว็บเกี่ยวกับสุนัขให้แก่โปรแกรมรวบรวมข้อมูลอาจถูกมองว่าเป็นการปิดบังหน้าเว็บจริง
นำการแสดงผลแบบไดนามิกไปใช้
โปรดทำตามหลักเกณฑ์ทั่วไปของเราเพื่อตั้งค่าการแสดงผลเนื้อหาแบบไดนามิก และอ่านรายละเอียดการกำหนดค่าที่เจาะจง เนื่องจากเนื้อหาแต่ละประเภทมีการนำไปใช้ที่แตกต่างกันอย่างมาก
- ติดตั้งและกำหนดค่าตัวแสดงผลแบบไดนามิก (เช่น Puppeteer, Rendertron หรือ prerender.io) เพื่อเปลี่ยนรูปแบบเนื้อหาเป็น HTML แบบคงที่ วิธีนี้จะช่วยให้ Crawler จัดการได้ง่ายขึ้น
- เลือก User Agent ที่คุณต้องการให้รับ HTML แบบคงที่และดูรายละเอียดการกำหนดค่าที่เจาะจงเกี่ยวกับวิธีอัปเดตหรือเพิ่ม User Agent ด้านล่างนี้เป็นตัวอย่างของรายการ User Agent ที่พบทั่วไปในมิดเดิลแวร์ Rendertron
export const botUserAgents = [ 'googlebot', 'bingbot', 'linkedinbot', 'mediapartners-google', ];
- หากการแสดงผลล่วงหน้าทำให้เซิร์ฟเวอร์ช้าลงหรือคุณเห็นคำขอการแสดงผลล่วงหน้าจำนวนมาก ให้ลองใช้แคชสำหรับเนื้อหาที่แสดงผลล่วงหน้า หรือตรวจสอบว่าคำขอมาจาก Crawler ที่ถูกต้อง
- ระบุว่า User Agent กำหนดว่าต้องใช้เนื้อหาในเดสก์ท็อปหรืออุปกรณ์เคลื่อนที่ ใช้การแสดงผลแบบไดนามิกเพื่อระบุเวอร์ชันที่เหมาะสมกับเดสก์ท็อปหรืออุปกรณ์เคลื่อนที่ ด้านล่างนี้เป็นตัวอย่างที่บ่งบอกว่าการกำหนดค่าระบุว่า User Agent ต้องใช้เนื้อหาในเดสก์ท็อปหรืออุปกรณ์เคลื่อนที่ได้อย่างไร
isPrerenderedUA = userAgent.matches(botUserAgents) isMobileUA = userAgent.matches(['mobile', 'android'])
if (!isPrerenderedUA) { } else { servePreRendered(isMobileUA) } - กำหนดค่าเซิร์ฟเวอร์ที่จะส่ง HTML แบบคงที่ไปยังโปรแกรมรวบรวมข้อมูลที่คุณเลือก โดยมีหลายวิธีให้เลือกใช้ตามตัวอย่างด้านล่าง ทั้งนี้ขึ้นอยู่กับเทคโนโลยีที่ใช้ด้วย
- คำขอพร็อกซีที่มาจาก Crawler ไปยังตัวแสดงผลแบบไดนามิก
- แสดงผลล่วงหน้าในฐานะส่วนหนึ่งของกระบวนการติดตั้งใช้งานและทำให้เซิร์ฟเวอร์แสดง HTML แบบคงที่ไปยังโปรแกรมรวบรวมข้อมูล
- สร้างการแสดงผลแบบไดนามิกลงในโค้ดเซิร์ฟเวอร์ที่กำหนดเอง
- แสดงเนื้อหาแบบคงที่จากบริการการแสดงผลล่วงหน้าไปยัง Crawler
- ใช้มิดเดิลแวร์สำหรับเซิร์ฟเวอร์ (เช่น มิดเดิลแวร์ Rendertron)
ตรวจสอบการกำหนดค่า
หลังจากที่นำการแสดงผลแบบไดนามิกไปใช้เรียบร้อยแล้ว ให้ตรวจสอบว่าทุกอย่างทำงานได้ตามที่คาดไว้โดยตรวจสอบ URL ด้วยการทดสอบต่อไปนี้
- ทดสอบเนื้อหาเวอร์ชันอุปกรณ์เคลื่อนที่และเดสก์ท็อปด้วยเครื่องมือตรวจสอบ URL เพื่อดูว่าเนื้อหาดังกล่าวปรากฏอยู่ในหน้าที่แสดงผลด้วย (หน้าที่แสดงผลคือลักษณะที่ Google เห็นหน้าของคุณ)
done สำเร็จ: เนื้อหาเวอร์ชันอุปกรณ์เคลื่อนที่และเดสก์ท็อปตรงกับสิ่งที่คุณคาดหวังให้ผู้ใช้เห็น
error ลองอีกครั้ง: หากเนื้อหาที่เห็นไม่ตรงกับสิ่งที่คุณคาดหวัง โปรดดูส่วนการแก้ปัญหา
- หากคุณใช้ Structured Data ให้ทดสอบว่า Structured Data แสดงผลอย่างถูกต้องด้วยการทดสอบผลการค้นหาที่เป็นริชมีเดีย
done สำเร็จ: Structured Data ปรากฏขึ้นตามที่คุณคาดหวังไว้
error ลองอีกครั้ง: หาก Structured Data ไม่ปรากฏตามที่คาดหวัง โปรดดูส่วนการแก้ปัญหา
การแก้ปัญหา
หากเนื้อหาแสดงข้อผิดพลาดในเครื่องมือตรวจสอบ URL หรือเนื้อหาไม่ปรากฏในผลการค้นหาของ Google Search ให้ลองแก้ไขปัญหาที่พบบ่อยที่สุด หากยังประสบปัญหาอยู่ โปรดโพสต์หัวข้อใหม่ในชุมชนความช่วยเหลือของ Google Search Central
เนื้อหาไม่สมบูรณ์หรือดูแตกต่างไป
error สาเหตุของปัญหา: ตัวแสดงผลอาจกำหนดค่าไว้ไม่ถูกต้องหรือเว็บแอปพลิเคชันอาจใช้ไม่ได้กับโซลูชันการแสดงผลที่คุณใช้ ในบางครั้งระยะหมดเวลาก็อาจทำให้เนื้อหาแสดงผลอย่างไม่ถูกต้องก็ได้
done แก้ปัญหา: ดูเอกสารสำหรับโซลูชันการแสดงผลที่เจาะจงเพื่อแก้ไขข้อบกพร่องเกี่ยวกับการตั้งค่าการแสดงผลแบบไดนามิก
เวลาในการตอบสนองนาน
error สาเหตุของปัญหา: การใช้เบราว์เซอร์แบบไม่มีส่วนหัวเพื่อแสดงผลหน้าเว็บตามคำขอซึ่งมักทำให้ใช้เวลาในการตอบสนองนาน โดยอาจส่งผลให้ Crawler ยกเลิกคำขอและไม่จัดทำดัชนีเนื้อหา นอกจากนี้ เวลาในการตอบสนองนานอาจทำให้ Crawler ลดอัตราการ Crawl เมื่อเข้าทำการ Crawl และจัดทำดัชนีเนื้อหาของคุณด้วย
done แก้ไขปัญหา
- ตั้งค่าแคชสำหรับ HTML ที่แสดงผลล่วงหน้าหรือสร้าง HTML เวอร์ชันคงที่สำหรับเนื้อหาเป็นส่วนหนึ่งของกระบวนการสร้างของคุณ
- อย่าลืมเปิดใช้แคชในการกำหนดค่า (เช่น ชี้ Crawler ไปยังแคช)
- ตรวจสอบว่า Crawler ได้รับเนื้อหาอย่างรวดเร็วโดยใช้เครื่องมือทดสอบ เช่น การทดสอบผลการค้นหาที่เป็นริชมีเดีย หรือ webpagetest (โดยใช้สตริง User Agent ที่กำหนดเองจากรายการ User Agent ของ Crawler ของ Google) โดยคำขอของคุณต้องไม่หมดเวลาไปก่อน
คอมโพเนนต์เว็บไม่แสดงผลตามที่คาดไว้
error สาเหตุของปัญหา: Shadow DOM ถูกแยกออกจากส่วนที่เหลือของหน้า โซลูชันการแสดงผล (เช่น Rendertron) จะมองไม่เห็นเนื้อหาภายใน Shadow DOM ที่แยกออกมา ดูข้อมูลเพิ่มเติมได้ในแนวทางปฏิบัติแนะนำสำหรับคอมโพเนนต์เว็บ
done แก้ปัญหา
- โหลด polyfill webcomponents.js สำหรับเอลิเมนต์ที่กำหนดเองและ Shadow DOM
- ใช้การทดสอบผลการค้นหาที่เป็นริชมีเดียหรือเครื่องมือตรวจสอบ URL เพื่อตรวจสอบว่าเนื้อหาปรากฏใน HTML ที่แสดงผลของโซลูชันการแสดงผล
ไม่มีข้อมูลที่มีโครงสร้าง
error สาเหตุของปัญหา: ข้อผิดพลาดเกี่ยวกับ Structured Data อาจเกิดขึ้นได้ หากไม่มี User Agent สำหรับ Structured Data หรือไม่ได้รวมแท็กสคริปต์ JSON-LD ไว้ในเอาต์พุต
done แก้ไขปัญหา
- ใช้การทดสอบผลการค้นหาที่เป็นริชมีเดียเพื่อตรวจสอบว่า Structured Data นั้นปรากฏอยู่ในหน้า จากนั้นกําหนดค่า User Agent เพื่อทดสอบเนื้อหาที่แสดงผลล่วงหน้าด้วย Googlebot สําหรับเดสก์ท็อปหรืออุปกรณ์เคลื่อนที่
- ตรวจสอบว่าแท็กสคริปต์ JSON-LD รวมอยู่ใน HTML ที่แสดงผลแบบไดนามิกของเนื้อหา ดูข้อมูลเพิ่มเติมในเอกสารเกี่ยวกับโซลูชันการแสดงผล