แก้ไขเนื้อหาที่โหลดแบบ Lazy Loading

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

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

เพื่อให้ Google เห็นเนื้อหาทั้งหมดในหน้า โปรดตรวจสอบว่าการใช้การโหลดแบบ Lazy Loading นั้นโหลดเนื้อหาที่เกี่ยวข้องทั้งหมดเมื่อมีการแสดงเนื้อหานั้นๆ ในวิวพอร์ต ต่อไปนี้คือวิธีใช้การโหลดแบบเลื่อนลง

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

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

อย่าลืมทดสอบการใช้งาน

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

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

  • ตั้งค่า URL ที่ไม่ซ้ำกันแบบถาวรให้กับแต่ละกลุ่ม
  • ตรวจสอบว่าเนื้อหาที่แสดงใน URL แต่ละรายการเหมือนกันทุกครั้งที่โหลดในเบราว์เซอร์ วิธีหนึ่งในการทำเช่นนี้คือการใช้หมายเลขหน้าแบบสัมบูรณ์ใน URL เช่น ใช้ ?page=12 เป็นพารามิเตอร์การค้นหา
  • หลีกเลี่ยงการใช้องค์ประกอบแบบสัมพัทธ์ เช่น ?date=yesterday ใน URL เหล่านี้ วิธีนี้จะช่วยให้เครื่องมือค้นหาและผู้ใช้พบเนื้อหาเดียวกันภายใต้ URL หนึ่งๆ เสมอ ซึ่งทำให้เครื่องมือค้นหาจัดทำดัชนีเนื้อหาได้อย่างเหมาะสมได้ง่ายขึ้น และช่วยให้ผู้ใช้แชร์และมีส่วนร่วมกับเนื้อหาส่วนนั้นอีกครั้งได้
  • ลิงก์ไปยัง URL แต่ละรายการตามลำดับเพื่อให้เครื่องมือค้นหาค้นพบ URL เหล่านั้นในชุดแบบแบ่งหน้า ดูข้อมูลเพิ่มเติมเกี่ยวกับแนวทางปฏิบัติแนะนำเมื่อใช้การใส่เลขหน้า
  • เมื่อโหลดข้อมูลส่วนใหม่ของหน้าเว็บเพื่อตอบสนองต่อการเลื่อนของผู้ใช้ และกลายเป็นองค์ประกอบหลักที่ผู้ใช้มองเห็น ให้อัปเดต URL ที่แสดงโดยใช้ History API ซึ่งช่วยให้ผู้ใช้รีเฟรช แชร์ และลิงก์ไปยัง URL ปัจจุบันที่แสดงในเบราว์เซอร์ได้

ทดสอบ

หลังจากที่ตั้งค่าการนำไปใช้แล้ว ให้ตรวจสอบว่าทุกอย่างทำงานได้ถูกต้อง คุณสามารถใช้เครื่องมือตรวจสอบ URL ใน Search Console เพื่อดูว่าระบบโหลดเนื้อหาทั้งหมดหรือไม่ ตรวจสอบ HTML ที่แสดงผลเพื่อให้แน่ใจว่าเนื้อหาอยู่ใน HTML ที่แสดงผลโดยค้นหาในเครื่องมือตรวจสอบ URL หาก URL รูปภาพหรือวิดีโอปรากฏในแอตทริบิวต์ src ในองค์ประกอบ <img> หรือ <video> ใน HTML ที่แสดงผล แสดงว่าการตั้งค่าทำงานได้อย่างถูกต้อง