Technical SEO

JavaScript Rendering คืออะไร

JavaScript Rendering คือวิธีและจังหวะที่เนื้อหาของหน้าเว็บถูกสร้างขึ้น ไม่ว่าจะเป็นบนเซิร์ฟเวอร์ก่อนส่งมอบ (SSR/SSG) หรือในเบราว์เซอร์หลังโหลด (CSR)

เรื่องนี้สำคัญต่อ SEO เพราะ crawler จำนวนมาก รวมถึง AI crawler ส่วนใหญ่ ไม่สามารถประมวลผล JavaScript ฝั่งเบราว์เซอร์ได้อย่างน่าเชื่อถือ ดังนั้นเนื้อหาที่ถูก render เฉพาะในเบราว์เซอร์อาจกลายเป็นสิ่งที่มองไม่เห็นสำหรับพวกมัน การ render ฝั่งเซิร์ฟเวอร์หรือทำ pre-render ให้กับเนื้อหาสำคัญจะช่วยให้ crawl ได้ นี่คือหนึ่งในสาเหตุแฝงที่พบบ่อยที่สุดของการสูญเสียทราฟฟิก organic และการมองเห็นบน AI search

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

ตัวอย่าง

เปิดหน้าสินค้าที่ทำด้วย React แล้วปิด JavaScript โหลดใหม่ เหลือแค่ header เปล่ากับ div ขาว ๆ ความว่างนั้นคือสิ่งที่ crawler ที่ไม่เรนเดอร์ได้รับ รวมถึงบอท AI ส่วนใหญ่ Googlebot เรนเดอร์ให้ในรอบสองอีกหลายวันถัดมา พอย้ายการเรนเดอร์ไปฝั่งเซิร์ฟเวอร์ เนื้อหาสินค้าอยู่ใน HTML ดิบครบ และอาการ index ช้าหายไป

คำถามที่พบบ่อย

Server-side rendering ดีกว่าสำหรับ SEO ไหม
สำหรับเนื้อหาที่ต้องถูกค้นเจอ ดีกว่า HTML ที่เรนเดอร์จากเซิร์ฟเวอร์พร้อมใช้ทันทีสำหรับ crawler ทุกตัว ขณะที่การเรนเดอร์ฝั่ง client ต้องรอ crawler รัน JavaScript ซึ่ง Googlebot ทำแบบล่าช้า และบอท AI จำนวนมากไม่ทำเลย ควรเรนเดอร์เนื้อหาหลักและลิงก์จากฝั่งเซิร์ฟเวอร์
จะตรวจได้อย่างไรว่า crawler เห็นอะไรจริง ๆ
ลองเปิดหน้าโดยปิด JavaScript หรือใช้เครื่องมือ URL Inspection ใน Search Console เพื่อดู HTML ที่เรนเดอร์แล้ว ถ้าหัวข้อ เนื้อหา และลิงก์ภายในหายไปจากผลลัพธ์นั้น เท่ากับมันมองไม่เห็นสำหรับ crawler ทุกตัวที่ไม่เรนเดอร์

คำศัพท์ที่เกี่ยวข้อง

กำลังทำเรื่อง JavaScript Rendering อยู่ใช่ไหม? ดูว่าการออกแบบเว็บไซต์ของเราช่วยคุณได้อย่างไร

ดูการออกแบบเว็บไซต์