JavaScript SEO คืออะไร เว็บ React Next.js ต้องระวังอะไรบ้าง

JavaScript SEO คืออะไร ทำไมเว็บยุคนี้ต้องสนใจ

JavaScript SEO คือแนวทางทำให้เนื้อหาที่ต้องรัน JavaScript ก่อนถึงจะแสดงผล ยังคงถูก search engine เข้าใจ จัดทำดัชนี และจัดอันดับได้ถูกต้อง ไม่ต่างจากเนื้อหาที่อยู่ใน HTML ตั้งต้น

เมื่อสิบกว่าปีก่อนเว็บส่วนใหญ่ส่ง HTML ที่มีเนื้อหาครบมาจากเซิร์ฟเวอร์ทันที บอตอ่านโค้ดต้นฉบับก็เห็นเนื้อหาทั้งหมด แต่เว็บสมัยใหม่จำนวนมากใช้ client-side rendering ที่ส่ง HTML เปล่า ๆ มาก่อน แล้วให้ JavaScript ในเบราว์เซอร์ดึงข้อมูลและวาดหน้าเว็บทีหลัง วิธีนี้ให้ประสบการณ์ใช้งานที่ลื่นไหลกว่า แต่ทำให้ search engine ต้องทำงานเพิ่มอีกขั้นตอนก่อนจะเห็นเนื้อหาจริง

เว็บที่ใช้เฟรมเวิร์กอย่าง React, Vue หรือ Angular แบบ client-side ล้วน จึงมีความเสี่ยงด้าน SEO สูงกว่าเว็บ HTML ทั่วไปโดยธรรมชาติ ไม่ใช่เพราะเฟรมเวิร์กเหล่านี้ไม่ดี แต่เพราะวิธี render เนื้อหาต่างออกไป และต้องอาศัยการตั้งค่าที่ถูกต้องเพื่อปิดช่องว่างนี้

Googlebot เรนเดอร์ JavaScript ยังไง

Googlebot เรนเดอร์ JavaScript ได้จริง แต่ทำผ่านกระบวนการสองขั้นที่เรียกว่า two-wave indexing ซึ่งอาจทำให้เนื้อหาที่มาจาก JavaScript ถูกเข้าใจช้ากว่าเนื้อหาใน HTML ตั้งต้น

คลื่นแรกคือการ crawl แบบปกติ Googlebot ดึง HTML ต้นฉบับมาอ่านทันที เก็บลิงก์ที่เจอใน HTML ไปคิวเพื่อ crawl ต่อ และบันทึกข้อความที่มีอยู่แล้วไว้ก่อน ถ้าหน้านั้นพึ่ง JavaScript หนักมาก HTML ตั้งต้นอาจมีแค่โครงเปล่า ๆ กับแท็ก script

คลื่นที่สองคือการส่งหน้านั้นเข้าคิว render ด้วย Chromium เวอร์ชันที่ Google ใช้ภายใน (Web Rendering Service) เพื่อรัน JavaScript จริงแล้วดูผลลัพธ์ที่ได้ ขั้นตอนนี้ ใช้ทรัพยากรมากกว่าการ crawl ปกติ จึงไม่ได้เกิดขึ้นทันที และในเว็บที่มีหน้าจำนวนมากหรือเซิร์ฟเวอร์ตอบช้า คิว render อาจทิ้งช่วงเป็นชั่วโมงถึงหลายวันกว่าจะถึงคิวของหน้านั้น

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

• คลื่นแรก: อ่าน HTML ตั้งต้นและลิงก์ที่เจอทันที
• คลื่นที่สอง: ส่งเข้าคิว render ด้วย Chromium เพื่ออ่านผลลัพธ์หลังรัน JavaScript
• คิว render ใช้ทรัพยากรสูงกว่า อาจล่าช้ากว่าการ crawl ปกติมาก
• ลิงก์ที่สร้างด้วย JavaScript เท่านั้นทำให้การค้นพบหน้าใหม่ช้าลง

CSR SSR และ SSG ต่างกันยังไง แบบไหนดีต่อ SEO

ทั้งสามวิธีต่างกันที่ว่า HTML ที่มีเนื้อหาครบถูกสร้างขึ้นตอนไหน และ SSR กับ SSG ให้ผลด้าน SEO ที่มั่นใจได้กว่า CSR เพราะส่ง HTML ที่มีเนื้อหาจริงมาตั้งแต่ต้น ไม่ต้องรอ JavaScript รันก่อน

Client-Side Rendering (CSR) คือเบราว์เซอร์รับ HTML เปล่ากับไฟล์ JavaScript มาก่อน แล้วค่อยดึงข้อมูลและวาดหน้าเว็บฝั่ง client ทั้งหมด เหมาะกับแอปพลิเคชันที่ผู้ใช้ล็อกอินและใช้งานแบบโต้ตอบสูง แต่ไม่เหมาะกับหน้าที่ต้องพึ่งการค้นหาแบบออร์แกนิก เพราะต้องรอคิว render ของ Googlebot

Server-Side Rendering (SSR) คือเซิร์ฟเวอร์ประกอบ HTML ที่มีเนื้อหาครบไว้ก่อนส่งให้เบราว์เซอร์ทุกครั้งที่มีการร้องขอ ทำให้ทั้งผู้ใช้และบอตเห็นเนื้อหาทันทีโดยไม่ต้องรอ JavaScript รันก่อน เหมาะกับหน้าที่ข้อมูลเปลี่ยนบ่อยแต่ต้องการให้ติดอันดับได้

Static Site Generation (SSG) คือสร้าง HTML สำเร็จรูปไว้ล่วงหน้าตอน build แล้วนำไปวางบน CDN ทำให้โหลดเร็วที่สุดในสามแบบ และบอตเห็นเนื้อหาครบทันทีเช่นกัน เหมาะกับหน้าที่เนื้อหาไม่เปลี่ยนบ่อย เช่น บทความหรือหน้าบริการ

ปัญหาที่เจอบ่อยในเว็บ React และ Next.js

ปัญหาส่วนใหญ่ไม่ได้เกิดจากตัวเฟรมเวิร์ก แต่เกิดจากการตั้งค่าที่ปล่อยให้เนื้อหาหรือแท็ก SEO สำคัญพึ่งพา client-side rendering โดยไม่จำเป็น

Next.js เองรองรับทั้ง SSR และ SSG อยู่แล้วในตัว แต่ทีมพัฒนาต้องเลือกใช้ให้ถูกหน้า ปัญหาที่พบซ้ำ ๆ มีดังนี้

• เนื้อหาหลักที่โหลดหลังหน้าเสร็จแล้วเสี่ยงไม่ถูกจัดทำดัชนี
• title และ meta description ต้อง render จากเซิร์ฟเวอร์ ไม่ใช่เซ็ตด้วย JS ฝั่ง client เท่านั้น
• ลิงก์ภายในต้องเป็นแท็ก a ที่มี href จริง ไม่ใช่แค่ onClick
• เนื้อหาหลัง infinite scroll ควรมี URL แบบแบ่งหน้าควบคู่ไปด้วย

เนื้อหาหลักโหลดแบบ client-only

หน้าที่ใช้ useEffect ดึงข้อมูลมาแสดงหลังหน้าโหลดเสร็จแล้ว ทำให้ HTML ตั้งต้นไม่มีข้อความเนื้อหาอยู่เลย ถ้าคิว render ของ Googlebot ล่าช้าหรือ JavaScript พังบางส่วน เนื้อหานั้นอาจไม่ถูกจัดทำดัชนีเลย โดยเฉพาะหน้าสินค้าหรือบทความที่ต้องพึ่งการค้นหาแบบออร์แกนิกเป็นหลัก

แท็ก title และ meta description ถูกเซ็ตด้วย JavaScript ฝั่ง client

ถ้าใช้ไลบรารีจัดการ head ฝั่ง client ล้วนโดยไม่มีการ render ฝั่งเซิร์ฟเวอร์ แท็ก title กับ meta description ที่เห็นใน HTML ตั้งต้นอาจเป็นค่า default เดียวกันทุกหน้า ทำให้ทุกหน้าแข่งกันเองในผลการค้นหาด้วยหัวข้อและคำอธิบายที่ซ้ำกัน Next.js เวอร์ชันปัจจุบันแก้ปัญหานี้ได้ด้วย Metadata API ที่ทำงานฝั่งเซิร์ฟเวอร์อยู่แล้ว จึงควรใช้แทนการเซ็ต document.title ด้วยมือ

ลิงก์ภายในไม่ใช่แท็ก a จริง

การทำให้ทั้งหน้าคลิกได้ด้วย onClick แล้วสั่งเปลี่ยนหน้าด้วย JavaScript โดยไม่มีแท็ก a ที่มี href จริงอยู่เบื้องหลัง ทำให้ Googlebot ตามลิงก์นั้นไปหน้าอื่นไม่ได้ในบางกรณี ควรใช้คอมโพเนนต์ Link ของ Next.js ซึ่งเรนเดอร์ออกมาเป็นแท็ก a ที่มี href จริงเสมอ

เนื้อหาสำคัญซ่อนอยู่หลัง infinite scroll หรือปุ่มโหลดเพิ่ม

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

ตรวจยังไงว่า Googlebot เห็นเนื้อหาจริงไหม

วิธีตรวจที่แม่นยำที่สุดคือดู HTML ที่ผ่านการ render แล้วผ่านเครื่องมือของ Google โดยตรง ไม่ใช่แค่ดูโค้ดต้นฉบับหรือดูด้วยตาในเบราว์เซอร์เฉย ๆ

ใช้ URL Inspection Tool ใน Google Search Console พิมพ์ URL ที่ต้องการตรวจ แล้วกด View Crawled Page เพื่อดู HTML และภาพหน้าจอที่ Googlebot render ได้จริง ถ้าเนื้อหาสำคัญไม่ปรากฏในผลลัพธ์นี้ แปลว่ามีปัญหาการ render ที่ต้องแก้

อีกวิธีคือเปิด DevTools ในเบราว์เซอร์ กด Inspect แล้วดูที่แท็บ Elements ซึ่งแสดง DOM หลังจาก JavaScript รันเสร็จแล้ว เทียบกับ View Page Source ที่แสดง HTML ต้นฉบับก่อนรัน JavaScript ถ้าเนื้อหาสำคัญมีอยู่ใน Elements แต่ไม่มีใน View Page Source เลย แสดงว่าเนื้อหานั้นต้องพึ่ง client-side rendering ทั้งหมด

การทดสอบปิด JavaScript ในเบราว์เซอร์แล้วโหลดหน้าเว็บใหม่ก็ช่วยให้เห็นภาพคร่าว ๆ ได้เร็ว ถ้าหน้าว่างเปล่าหรือเนื้อหาหลักหายไปเมื่อปิด JavaScript นั่นคือสัญญาณเตือนที่ชัดเจนว่าควรพิจารณาเปลี่ยนไปใช้ SSR หรือ SSG สำหรับหน้านั้น

• URL Inspection Tool ใน Search Console ดู HTML ที่ Googlebot render จริง
• เทียบ DevTools Elements กับ View Page Source เพื่อดูว่าเนื้อหาต้องพึ่ง JS แค่ไหน
• ทดสอบปิด JavaScript แล้วดูว่าเนื้อหาหลักยังอยู่ไหม
• หน้าที่พึ่ง client-side rendering ทั้งหมดควรพิจารณาเปลี่ยนเป็น SSR หรือ SSG

แนวทางแก้สำหรับเว็บที่สร้างด้วย Next.js

แนวทางหลักคือเลือกวิธี render ให้เหมาะกับแต่ละหน้า ไม่ใช่ใช้ client-side rendering ทั้งเว็บเพียงเพราะทำง่ายกว่าในตอนแรก

หน้าเนื้อหาที่ต้องพึ่งการค้นหาแบบออร์แกนิกเป็นหลัก เช่น บทความ หน้าบริการ หรือหน้าสินค้า ควรใช้ Static Site Generation เมื่อเนื้อหาไม่เปลี่ยนบ่อย หรือ Server-Side Rendering เมื่อข้อมูลต้องอัปเดตแบบเรียลไทม์ ทั้งสองแบบทำให้ HTML ตั้งต้นมีเนื้อหาครบตั้งแต่การร้องขอครั้งแรก

ใช้ Metadata API ของ Next.js ในการกำหนด title, description และ Open Graph tags แทนการเซ็ตด้วย JavaScript ฝั่ง client เพราะ API นี้ทำงานตอน render ฝั่งเซิร์ฟเวอร์ ทำให้แท็กเหล่านี้ปรากฏใน HTML ตั้งต้นเสมอ ซึ่งเป็นพื้นฐานเดียวกับหลักการเขียน title และ meta description ที่ดีตามที่อธิบายไว้ใน คู่มือเขียน Title และ Meta Description

ส่วนที่ต้องโต้ตอบสูงและไม่จำเป็นต่อ SEO เช่น ระบบตะกร้าสินค้า แดชบอร์ดหลังบ้าน หรือฟีเจอร์ที่ต้องล็อกอินก่อนใช้งาน ยังใช้ client-side rendering ได้ตามปกติ เพราะไม่ต้องการให้บอตจัดทำดัชนีอยู่แล้ว การเลือกวิธี render แบบผสมผสานตามหน้าจึงเป็นแนวทางที่คุ้มค่ากว่าการใช้แบบเดียวทั้งเว็บ

สุดท้ายอย่าลืมพื้นฐานที่ยังจำเป็นเสมอไม่ว่าจะ render แบบไหน ทั้งความเร็วในการโหลดที่วัดผ่าน Core Web Vitals และการแสดงผลบนมือถือให้ครบตาม Mobile-First Indexing เพราะ Googlebot ใช้เวอร์ชันมือถือเป็นหลักในการประเมินเว็บทุกเว็บแล้ว

• เลือก SSG หรือ SSR สำหรับหน้าที่ต้องพึ่งการค้นหาแบบออร์แกนิก
• ใช้ Metadata API แทนการเซ็ต title/description ด้วย JavaScript ฝั่ง client
• ใช้คอมโพเนนต์ Link ให้ลิงก์ภายในเป็นแท็ก a ที่มี href จริง
• หน้าที่ไม่ต้องการให้ติดอันดับ เช่น แดชบอร์ดหลังล็อกอิน ยังใช้ client-side rendering ได้
• ตรวจ Core Web Vitals และการแสดงผลมือถือควบคู่ไปด้วยเสมอ

เช็กลิสต์ JavaScript SEO ก่อนปล่อยเว็บจริง

ก่อนเปิดใช้งานหน้าเว็บใหม่หรือย้ายเฟรมเวิร์ก ควรไล่ตรวจตามรายการนี้เพื่อลดความเสี่ยงที่เนื้อหาจะไม่ถูกจัดทำดัชนี

รายการนี้เน้นเฉพาะจุดที่เกี่ยวกับ JavaScript โดยตรง ส่วนพื้นฐาน Technical SEO อื่น เช่น sitemap, robots.txt และโครงสร้าง URL ยังต้องตรวจตาม Technical SEO Checklist ควบคู่กันไปด้วย

• เนื้อหาหลักของหน้าปรากฏใน View Page Source โดยไม่ต้องรอ JavaScript รัน
• แท็ก title, meta description และ canonical มาจากการ render ฝั่งเซิร์ฟเวอร์
• ลิงก์ภายในทุกจุดเป็นแท็ก a ที่มี href จริง ตามได้โดยไม่ต้องคลิก
• หน้ารายการที่มีการโหลดเพิ่มมี URL แบบแบ่งหน้าให้บอตไล่เก็บได้ครบ
• ทดสอบผ่าน URL Inspection Tool แล้วเห็นเนื้อหาครบตรงกับที่ผู้ใช้เห็นจริง
• ทดสอบปิด JavaScript แล้วเนื้อหาหลักยังอ่านได้