ทำ Infinite Scroll ให้ Google ค้นเจอสินค้าครบ แม้หน้าเว็บจะโหลดเพิ่มตอนเลื่อน

หน้าหมวดหมู่สินค้าที่เลื่อนดูได้ต่อเนื่องช่วยให้ลูกค้าไม่ต้องเปลี่ยนหน้า แต่ประสบการณ์ที่ลื่นอาจเป็นทางตันของ Google หากสินค้าชุดถัดไปปรากฏหลังการเลื่อนหรือกด Load More เท่านั้น ผลคือสินค้าบางรายการไม่มีเส้นทางให้ระบบค้นหาเข้าถึง

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

Infinite Scroll ที่ลูกค้าเห็นครบ อาจไม่ใช่สิ่งที่ Google เห็น

Google อธิบายว่าโปรแกรมรวบรวมข้อมูลค้นหา URL จาก href ของแท็ก a เป็นหลัก และไม่ได้กดปุ่มหรือเรียกฟังก์ชัน JavaScript ที่ต้องอาศัยการกระทำของผู้ใช้ หากหน้าเริ่มด้วยสินค้า 20 รายการ แล้วโหลดอีก 20 รายการเมื่อเลื่อนถึงด้านล่าง Google อาจพบเพียงชุดแรกเมื่อไม่มี URL และลิงก์ไปชุดถัดไป

สัญญาณที่ควรตรวจมีดังนี้

• สินค้าท้ายหมวดค้นด้วย site: แล้วไม่พบ แต่สินค้าชุดแรกถูกค้นพบตามปกติ
• ปุ่ม Load More เป็น button หรือ div ที่มี onclick โดยไม่มี a href ไปหน้าถัดไป
• API ส่งสินค้ากลับมาเมื่อเกิด scroll event เท่านั้น ไม่มีหน้าที่เปิดชุดเดียวกันได้โดยตรง
• URL ไม่เปลี่ยนแม้ผู้ใช้เลื่อนผ่านหลายช่วง และรีเฟรชแล้วกลับไปด้านบน

ควรให้ HTML กับลิงก์สร้างเส้นทางค้นพบ ส่วน JavaScript ทำหน้าที่เสริมประสบการณ์ ไม่ใช่เป็นทางเดียวที่ใช้เข้าถึงสินค้า

เลือกรูปแบบให้เหมาะกับจำนวนสินค้า

Pagination เหมาะกับรายการจำนวนมากและทำให้ผู้ใช้รู้ตำแหน่ง Load More ให้ผู้ใช้ควบคุมจังหวะโหลด ส่วน Infinite Scroll เหมาะกับการสำรวจต่อเนื่อง แต่ไม่ควรทำให้ส่วนท้ายเว็บเข้าถึงยาก ไม่ว่าจะเลือกแบบใด โครงสร้างสำหรับ Google ยังควรมี URL แบบแบ่งหน้าอยู่เบื้องหลัง ดูแนวทางเชื่อม UX กับหน้าสินค้าเพิ่มเติมได้ในหมวด E-Commerce ของ WanTalk

วาง URL ให้สินค้าแต่ละช่วงเปิดได้โดยตรง

แบ่งรายการสินค้าเป็นช่วงหรือ chunk แล้วให้แต่ละช่วงมี URL ถาวร เช่น /category/shoes/?page=2 หรือ /category/shoes/page/2/ URL ดังกล่าวต้องเปิดตรงจากเบราว์เซอร์ได้ โดยไม่ต้องเริ่มจากหน้าแรกของหมวดและเลื่อนลงมาก่อน

1. ให้แต่ละช่วงมี URL เฉพาะและเนื้อหาคงที่

หน้า page=2 ควรแสดงสินค้าช่วงที่สองทุกครั้ง ไม่ใช้เงื่อนไขที่เปลี่ยนตามเวลา เช่น ?date=yesterday ควรกำหนดกติกาการเรียงและแบ่งหน้าที่คาดเดาได้ เพื่อให้ผู้ใช้และระบบค้นหากลับมายังเนื้อหาชุดเดิมได้

2. เชื่อมหน้าตามลำดับด้วย a href

แต่ละหน้าควรมีลิงก์ a href ไปหน้าถัดไปอย่างน้อยหนึ่งจุด เช่น “ถัดไป” ที่ปลายรายการ JavaScript สามารถดักการคลิกแล้วนำสินค้าเข้ามาต่อในหน้าเดิมได้ แต่ href ต้องยังทำงานเมื่อปิด JavaScript แนวทางนี้ทำให้ประสบการณ์ลื่นขึ้นโดยไม่ทิ้งโครงสร้างที่ Google ตามต่อได้

ควรมีลิงก์ย้อนกลับและทางกลับหน้าแรกของหมวดด้วย Sitemap หรือ Merchant Center feed ช่วยให้พบหน้าสินค้าเพิ่มได้ แต่ไม่ควรใช้แทน Internal Link ภายในเว็บไซต์

3. ให้แต่ละหน้ามี canonical ของตัวเอง

อย่าตั้ง canonical ของ page=2, page=3 และหน้าถัดไปกลับไป page=1 ทั้งหมด หากแต่ละหน้ามีสินค้าต่างกันควรอ้างอิง canonical ของตัวเอง และไม่ใช้ #page=2 เพราะ Google ไม่ใช้ URL fragment เป็นหมายเลขหน้าในชุด Pagination

4. แยก URL ตัวกรองออกจาก Pagination

ตัวกรองสี ขนาด ราคา หรือการเรียงอาจสร้าง URL จำนวนมากที่มีสินค้าใกล้เคียงกัน ทีมควรกำหนดว่าชุดใดควรให้ค้นหาเจอ และชุดใดควร noindex หรือจำกัดการรวบรวมข้อมูล อย่านำกฎของ URL ตัวกรองไปปะปนกับ page=n จนเกิดเส้นทางซ้ำและเปลืองการรวบรวมข้อมูล

ใช้ History API ให้ URL ตรงกับช่วงที่กำลังดู

เมื่อช่วงใหม่กลายเป็นเนื้อหาหลักบนหน้าจอ ควรอัปเดต URL ด้วย History API เช่น pushState หรือ replaceState เพื่อให้ผู้ใช้รีเฟรช แชร์ลิงก์ กด Back และกลับมายังตำแหน่งเดิมได้ การเปลี่ยน URL ต้องสัมพันธ์กับสินค้าที่มองเห็นจริง ไม่ควรเปลี่ยนทันทีเมื่อเพียงโหลดข้อมูลล่วงหน้า

ทดสอบสี่สถานการณ์ ได้แก่ เปิดหน้าที่สองโดยตรง รีเฟรชระหว่างรายการ ใช้ Back/Forward และคัดลอก URL ไปเปิดในหน้าต่างใหม่ ทุกกรณีต้องแสดงสินค้าชุดเดียวกัน หาก URL เปลี่ยนแต่เนื้อหาไม่ตรง หรือเปิดตรงแล้วต้องเลื่อนก่อนจึงมีข้อมูล โครงสร้างยังไม่พร้อม

แผนทำงานสำหรับทีมร้านออนไลน์

เริ่มจากทำรายการหน้าหมวดที่ใช้ Infinite Scroll หรือ Load More ระบุวิธีเรียก API และสุ่มสินค้าท้ายหมวดเพื่อตรวจว่ามีลิงก์ใดไปถึง หากตอบไม่ได้ต้องเพิ่ม Pagination ก่อน จากนั้นให้ทีมระบบสร้าง page=n ที่ตอบกลับด้วยรายการคงที่ ทีม Frontend เพิ่ม a href และ JavaScript ส่วนทีม SEO ตรวจ canonical, robots meta, URL ตัวกรอง, Internal Link และ sitemap ร่วมกัน

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

ตรวจ rendered HTML ก่อนสรุปว่าแก้สำเร็จ

หลังพัฒนา อย่าตรวจเฉพาะสิ่งที่ผู้ใช้เห็น ให้เปิด URL แต่ละหน้าโดยตรงและตรวจ HTML ที่ส่งกลับ จากนั้นใช้ URL Inspection ใน Search Console ดู rendered HTML ว่ามีการ์ดสินค้า ลิงก์สินค้า รูปภาพ และลิงก์หน้าถัดไปจริงหรือไม่ Google แนะนำให้ตรวจว่า URL ของรูปปรากฏใน src ขององค์ประกอบที่เกี่ยวข้องด้วย

ควรสุ่มตรวจหน้าต้น กลาง และท้ายของหมวด พร้อมเช็กว่า

• URL ตอบสถานะ 200 และไม่ redirect กลับหน้าแรกโดยไม่จำเป็น
• รายการสินค้าใน URL เดิมคงที่เมื่อเปิดซ้ำ
• ลิงก์สินค้าและหน้าถัดไปเป็น a href ที่ตามต่อได้
• canonical อ้างอิง URL ปัจจุบัน และหน้าไม่ถูก noindex โดยไม่ได้ตั้งใจ
• เมื่อปิด JavaScript ยังไปหน้าถัดไปและเปิดรายละเอียดสินค้าได้
• เมื่อเปิด JavaScript การเลื่อน เปลี่ยน URL รีเฟรช และ Back/Forward ทำงานสอดคล้องกัน

Checklist ก่อนเผยแพร่

• แต่ละช่วงสินค้ามี URL ถาวรและเปิดตรงได้
• เนื้อหาของ URL เดิมไม่เปลี่ยนแบบคาดเดาไม่ได้
• มี a href เชื่อมหน้าตามลำดับ และไม่ใช้ fragment เป็นหมายเลขหน้า
• canonical ของแต่ละหน้าชี้หาตัวเอง
• History API เปลี่ยน URL ตามช่วงที่ผู้ใช้กำลังดูจริง
• ตรวจ URL Inspection และ rendered HTML ทั้งหน้าต้น กลาง และท้าย
• ใช้ sitemap และ Merchant Center feed เป็นช่องทางเสริม ไม่ใช้แทน Internal Link
• ติดตามการจัดทำดัชนี Crawl Stats และ Server Log หลังเปิดใช้

Infinite Scroll SEO ที่ดีมี Pagination เป็นโครงสร้างพื้นฐาน และใช้ JavaScript ทำให้การโหลดต่อเนื่องพร้อมอัปเดต URL เมื่อสองชั้นนี้ทำงานสอดคล้องกัน ร้านออนไลน์ไม่ต้องเลือกระหว่าง UX ที่ลื่นกับการที่ Google ค้นพบสินค้าครบ