หน้าเว็บของคุณอาจติดอันดับ 1 บน Google แต่ยังคง "ล่องหน" สำหรับ ChatGPT

ตัวรวบรวมข้อมูล (crawler) ของ Google จะรัน JavaScript ของคุณ ดึง HTML ที่เรนเดอร์แล้วเข้าสู่ดัชนี และสามารถจัดอันดับเว็บไซต์ที่เรนเดอร์ฝั่งไคลเอนต์ (client-side rendered) ให้อยู่ในหน้าแรกของผลการค้นหาได้ แต่ในทางกลับกัน เมื่อมีการสอบถามผ่าน ChatGPT หรือการค้นหาด้วย AI ของ Bing หน้าเว็บเดียวกันนี้กลับหายไป เพราะบอทที่ขับเคลื่อนบริการเหล่านั้นไม่เคยรัน JavaScript เลย ผลลัพธ์ที่ได้คือเว็บไซต์ที่ติดอันดับสูง แต่ไม่มีผู้ช่วย AI คนไหนสามารถดึงข้อมูลขึ้นมาแสดงได้

ทำไม AI Crawlers ถึงมองไม่เห็นเนื้อหาของคุณ

บอท AI สองตัวที่ถูกใช้งานอย่างแพร่หลายที่สุด ได้แก่ GPTBot ของ OpenAI และ ClaudeBot ของ Anthropic ไม่มีการเรนเดอร์ JavaScript เลย ผลการศึกษาเมื่อเดือนธันวาคม 2024 โดย Vercel และ MERJ แสดงให้เห็นว่าบอททั้งสองเพียงแค่ดาวน์โหลด HTML ดิบและไฟล์ JavaScript ที่เชื่อมโยงอยู่ จากนั้นก็หยุดทำงาน สคริปต์จะไม่ถูกรัน ดังนั้นบอทจึงเห็นเพียงแค่โครงร่างที่ว่างเปล่าเท่านั้น

ในทางตรงกันข้าม Googlebot จะจัดคิวหน้าเว็บ รันสคริปต์ และทำดัชนี DOM ที่ได้จากการรันนั้น ความแตกต่างพื้นฐานนี้หมายความว่าเว็บไซต์ที่สร้างด้วยเฟรมเวิร์กฝั่งไคลเอนต์ล้วนๆ (เช่น React, Vue และอื่นๆ) อาจมองเห็นได้อย่างสมบูรณ์ใน Google แต่กลับเป็นหน้าว่างเปล่าสำหรับการค้นหาที่ขับเคลื่อนด้วย AI

Google vs. AI: ช่องว่างของการเรนเดอร์

Google ลงทุนในการทำ headless rendering มาอย่างยาวนาน บอทของ Google สามารถประมวลผลแอปพลิเคชันแบบหน้าเดียว (single-page applications) ที่ซับซ้อน ทำการ hydrate และดึงข้อมูลโครงสร้าง (structured data) ที่ปรากฏขึ้นหลังจากการโหลดเริ่มต้นได้ อย่างไรก็ตาม AI crawlers ยังคงอยู่ในโหมด "ดาวน์โหลดอย่างเดียว" พวกมันอาจจะอ่าน JSON-LD ที่ถูกฉีดผ่านเครื่องมืออย่าง react-helmet ได้ แต่ก็ต่อเมื่อมาร์กอัปนั้นปรากฏอยู่ใน HTML ดิบเท่านั้น

เครื่องมือสำหรับนักพัฒนาอาจทำให้เข้าใจผิดได้ แผง Elements ใน Chrome จะแสดงหน้าเว็บ หลังจาก JavaScript รันแล้ว ซึ่งทำให้เกิดความเข้าใจผิดว่ามาร์กอัปนั้นเป็นส่วนหนึ่งของซอร์สโค้ด การใช้ “view-source” (หรือ curl โดยไม่ผ่านเบราว์เซอร์) จะเผยให้เห็นสิ่งที่บอทได้รับจริงๆ หากเนื้อหาหรือข้อมูลโครงสร้างหายไปจากตรงนั้น AI crawlers ก็จะไม่มีวันมองเห็นมัน

ปัญหานี้แสดงออกมาอย่างไร

เว็บไซต์ React ทั่วไปที่พึ่งพาการเรนเดอร์ฝั่งไคลเอนต์จะติดอันดับสูงบน Google สำหรับคำค้นหาอย่างเช่น “best coffee maker” หรือ “how to fix a leaky faucet” แต่ผู้ใช้ที่ถาม ChatGPT ว่า “What are the best coffee makers?” จะได้รับคำตอบที่ไม่มีเว็บไซต์นั้นรวมอยู่ด้วยเลย ช่องว่างแบบเดียวกันนี้ยังเกิดขึ้นกับ AI ของ Bing ซึ่งให้บริการคำสั่งผ่านเอเจนต์ (agent queries) ประมาณ 92% ของ ChatGPT เนื่องจากขีดความสามารถในการเรนเดอร์ JavaScript ของ Bing นั้นมีจำกัด เว็บไซต์ที่เป็น client-side เท่านั้นจึงอาจล่องหนได้ทั้งในบริการค้นหาด้วย AI รายใหญ่ทั้งสองราย

ปัญหานี้เป็นปัญหาที่เงียบเชียบ แดชบอร์ด SEO ที่ติดตามอันดับบน Google จะรายงานว่าอยู่ในตำแหน่งที่ดี ในขณะที่ทราฟฟิกของเว็บไซต์ที่มาจากผู้ช่วย AI ยังคงเป็นศูนย์ ความคลาดเคลื่อนนี้สามารถทำให้ธุรกิจสูญเสียส่วนแบ่งของทราฟฟิกจากการค้นพบ (discovery traffic) ที่เพิ่มขึ้นเรื่อยๆ โดยเฉพาะอย่างยิ่งเมื่อผู้ใช้หันมาใช้การโต้ตอบผ่านอินเทอร์เฟซแบบสนทนา (conversational interfaces) เพื่อหาคำตอบที่รวดเร็วมากขึ้น

สิ่งที่นักพัฒนากำลังทำผิดพลาด

หลายทีมทึกทักเอาเองว่าถ้า Google อ่านหน้าเว็บได้ บอทตัวไหนก็อ่านได้เช่นกัน พวกเขามักจะ:

  • พึ่งพา react-helmet หรือไลบรารีที่คล้ายกันในการฉีด JSON-LD หลังจากหน้าเว็บโหลดเสร็จ โดยเชื่อว่ามาร์กอัปนั้น "มีอยู่แล้ว"
  • ทดสอบเฉพาะในมุมมอง Elements ของเบราว์เซอร์ ไม่ได้ทดสอบในซอร์สโค้ดดิบ
  • ข้ามการตรวจสอบด้วย curl แบบง่ายๆ ทำให้พลาดความจริงที่ว่าหัวข้อข่าวหรือวลีสำคัญไม่เคยปรากฏใน HTTP response เริ่มต้นเลย

แนวทางปฏิบัติเหล่านี้สร้างภาพลวงตาว่า SEO ยังดีอยู่ ในขณะที่ทำให้เว็บไซต์ "ตาบอด" ต่อการค้นหาด้วย AI

วิธีแก้ไข

วิธีแก้ไขคือการส่งเนื้อหาจริงผ่าน HTTP response แรก มี 3 แนวทางที่พิสูจน์แล้วว่าได้ผล:

  • Server-Side Rendering (SSR) – เซิร์ฟเวอร์จะรัน JavaScript, เรนเดอร์ HTML ทั้งหมด และส่งไปยังไคลเอนต์ หน้าเว็บจะมาถึงในสภาพที่มีข้อมูลครบถ้วนแล้ว
  • Static Generation – ในขั้นตอนการ build เฟรมเวิร์กจะสร้างไฟล์ HTML แบบสแตติกที่รวมเนื้อหาทั้งหมดไว้ ไม่จำเป็นต้องมีการเรนเดอร์ในขณะรัน (runtime)
  • Prerendering – บริการ middleware จะเรนเดอร์หน้าเว็บหนึ่งครั้ง แคชผลลัพธ์ไว้ และส่ง snapshot แบบสแตติกให้กับ crawler

เฟรมเวิร์กอย่าง Next.js (React) และ Nuxt (Vue) มีการรองรับเทคนิคเหล่านี้ในตัว การเปลี่ยนจาก client-side bundle ล้วนๆ มาเป็นวิธีใดวิธีหนึ่งข้างต้น จะช่วยให้มั่นใจได้ว่าทั้ง Googlebot และ AI crawlers จะเห็นเนื้อหาแบบเดียวกัน

การทดสอบความถูกต้องแบบรวดเร็ว:

curl -s https://yourpage.com | grep "your headline text"

หากคำสั่งไม่คืนค่าใดๆ แสดงว่าหัวข้อข่าวไม่ได้อยู่ใน HTML ดิบ และบอท AI จะมองไม่เห็นมัน

สิ่งที่ต้องจับตามอง

สถานะปัจจุบันคือความไม่สอดคล้องกันอย่างชัดเจน: เครื่องมือเรนเดอร์ของ Google นั้นล้ำสมัย แต่ AI crawlers ยังไม่เป็นเช่นนั้น ผลการศึกษาที่เปิดเผยช่องว่างนี้เพิ่งผ่านมาเพียงไม่กี่เดือน และทั้ง OpenAI และ Anthropic ต่างก็ส่งสัญญาณว่าสนใจที่จะปรับปรุงกระบวนการทำดัชนี (indexing pipelines) ของตน อย่างไรก็ตาม ยังไม่มีแผนงาน (roadmap) สาธารณะใดที่รับประกันว่าการรัน JavaScript แบบเต็มรูปแบบจะถูกเพิ่มเข้ามาในเร็วๆ นี้

ในขณะเดียวกัน ต้นทุนของการละเลยปัญหานี้ได้เปลี่ยนรูปแบบไป เมื่อสิบปีก่อน ผลกระทบคือการที่ Google ทำการ indexing ได้ช้าลง แต่ในปัจจุบัน มันคือการถูกตัดออกจากช่องทางการค้นพบที่เติบโตเร็วที่สุด นั่นคือการค้นหาที่ขับเคลื่อนด้วย AI (AI-driven search) บริษัทที่พึ่งพา organic traffic ควรตรวจสอบหน้าเว็บของตนด้วยเครื่องมือตรวจสอบ raw-source, นำ SSR หรือ static generation มาใช้ในจุดที่ทำได้ และคอยติดตามรายงานการทำ indexing สำหรับ AI โดยเฉพาะเมื่อมีข้อมูลออกมา

บทสรุป: เว็บไซต์ที่ดูสมบูรณ์แบบในการจัดอันดับของ Google อาจกลายเป็นสิ่งที่มองไม่เห็นสำหรับ ChatGPT และ Bing AI หากเว็บไซต์นั้นพึ่งพาเพียงแค่ client-side rendering เท่านั้น การส่งเนื้อหาผ่าน HTML เริ่มต้น—ไม่ว่าจะเป็นผ่าน SSR, static generation หรือ prerendering—จะช่วยปิดช่องว่างนี้และช่วยรักษาโอกาสในการถูกค้นพบทั้งในการค้นหาแบบดั้งเดิมและการค้นหาด้วย AI