ตรวจสอบว่า Google มองเห็นเนื้อหาที่เป็น Lazy Load ได้

การชะลอการโหลดเนื้อหาที่ไม่สำคัญหรือมองไม่เห็น หรือที่เรียกว่า "Lazy Load" นั้นเป็นการปฏิบัติที่พบได้บ่อยและเป็นแนวทางปฏิบัติที่ดีที่สุดสำหรับ UX สำหรับข้อมูลเพิ่มเติม โปรดดูคู่มือสำหรับการทำ Lazy Load รูปภาพและวิดีโอในหลักพื้นฐานในการทำเว็บไซต์ แต่หากใช้เทคนิคนี้อย่างไม่ถูกต้อง การทำ Lazy Load อาจซ่อนเนื้อหาจาก Google โดยไม่ตั้งใจได้ เอกสารนี้จะอธิบายวิธีตรวจสอบว่า Google รวบรวมข้อมูลและจัดทำดัชนีเนื้อหาแบบ Lazy Load ได้

โหลดเนื้อหาเมื่อเนื้อหาแสดงในวิวพอร์ต

เพื่อให้มั่นใจว่า Googlebot เห็นเนื้อหาทั้งหมดในหน้า ให้ตรวจสอบว่าการใช้การโหลดแบบ Lazy Loading นั้นโหลดเนื้อหาที่เกี่ยวข้องทั้งหมดเมื่อมีการแสดงเนื้อหานั้นๆ ในวิวพอร์ตโดยใช้ IntersectionObserver API และ polyfill

รองรับการโหลดที่ใส่เลขหน้าสำหรับการเลื่อนได้ไม่รู้จบ

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

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

การทดสอบ

หลังจากที่ตั้งค่าการนำไปใช้แล้ว คุณควรตรวจสอบว่าทุกอย่างทำงานได้ถูกต้อง วิธีตรวจสอบอย่างหนึ่งก็คือการใช้สคริปต์ Puppeteer เพื่อทดสอบการใช้งานในเครื่อง Puppeteer เป็นไลบรารี Node.js ที่ใช้ควบคุม Chrome แบบ Headless คุณต้องใช้ Node.js จึงจะเรียกใช้สคริปต์ได้ ใช้คำสั่งต่อไปนี้เพื่อดูสคริปต์และเรียกใช้

git checkout https://github.com/GoogleChromeLabs/puppeteer-examples
cd puppeteer-examples
npm i
node lazyimages_without_scroll_events.js -h

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