คู่มือทำ JavaScript SEO ให้ Google Render หน้าเว็บได้อย่างถูกต้อง

คู่มือทำ JavaScript SEO ให้ Google Render หน้าเว็บได้อย่างถูกต้อง

ปัจจุบันเว็บไซต์สมัยใหม่มักถูกพัฒนาด้วย JavaScript Framework ยอดนิยมอย่าง React, Vue หรือ Angular เพื่อสร้างประสบการณ์การใช้งาน ที่ลื่นไหล รวดเร็ว และมีการตอบสนองที่ดีเยี่ยมเหมือนแอปพลิเคชัน แต่ฝันร้ายของคนทำเว็บคือ เมื่อปล่อยเว็บขึ้นออนไลน์แล้วกลับพบว่า Google หาเว็บไม่เจอ หรือ Index หน้าเว็บเป็นหน้าเปล่าๆ ทั้งที่เราใส่เนื้อหาไปแน่นเอี๊ยด ปัญหานี้เกิดจากสิ่งที่เรียกว่า JavaScript Rendering ค่ะ เพราะธรรมชาติของ Googlebot นั้นชอบอ่าน HTML แบบดั้งเดิมมากกว่า JavaScript ที่ซับซ้อน บทความนี้จะพาเจาะลึกวิธีปรับแต่งเว็บไซต์ JavaScript ให้เป็นมิตรกับ Google เพื่อให้อันดับของคุณพุ่งทะยานสมกับเทคโนโลยีที่เลือกใช้ค่ะ

ทำไม Google ถึงไม่พบ เมื่อเจอ JavaScript

ทำไม Google ถึงไม่พบ เมื่อเจอ JavaScript

เพื่อให้เข้าใจวิธีแก้ ต้องเข้าใจต้นตอก่อนค่ะ โดยปกติการแสดงผลของเว็บไซต์ JavaScript Frameworks จะเป็นแบบ Client-Side Rendering 

หมายความว่า เมื่อบอทเข้ามาที่เว็บ ครั้งแรกสิ่งที่มันได้รับคือ ไฟล์ HTML เปล่าๆ ที่มีแค่โครงสร้างพื้นฐาน ส่วนเนื้อหา รูปภาพ และลิงก์ต่างๆ จะยังไม่โผล่มา จนกว่า Browser จะโหลดไฟล์ JavaScript มาประมวลผลเสร็จสิ้น

ปัญหาก็คือ Googlebot มีทรัพยากรและเวลาจำกัด บางครั้งมันอาจจะขี้เกียจรอโหลด JavaScript หรือโหลดไม่สำเร็จ ทำให้มันสรุปไปเลยว่า หน้านี้ไม่มีเนื้อหาอะไรเลย และไม่จัดอันดับให้นั่นเองค่ะ

เข้าใจกระบวนการ Two-Wave Indexing ของ Google

เข้าใจกระบวนการ Two-Wave Indexing ของ Google

Google มีกระบวนการเก็บข้อมูลเว็บไซต์ JavaScript เป็น 2 รอบ ซึ่งทำให้ SEO ของเราช้ากว่าเว็บปกติ

  1. Wave 1 Crawl ทันที บอทเข้ามาเก็บข้อมูล HTML เบื้องต้น ถ้าเว็บคุณเป็น CSR ล้วนๆ บอทจะเห็นแค่หน้าว่างๆ และผ่านไป
  2. Wave 2 Render เมื่อว่าง Google จะส่งหน้าเว็บของคุณเข้าไปในคิว Rendering Queue เพื่อรอประมวลผล JavaScript ซึ่งขั้นตอนนี้อาจใช้เวลาหลายชั่วโมง หรือหลายสัปดาห์หลังจากรอบแรก

ช่องว่างของเวลาตรงนี้แหละค่ะ ที่ทำให้เว็บ JavaScript เสียเปรียบเว็บ HTML ธรรมดา โดยเฉพาะเว็บข่าวหรือเว็บ E-commerce ที่ต้องการความสดใหม่

ทางแก้ที่ 1 เปลี่ยนมาใช้ Server-Side Rendering

นี่คือวิธีที่ Google แนะนำและเป็นมิตรกับ SEO ที่สุดค่ะ

SSR คือการย้ายกระบวนการประมวลผลหน้าเว็บไปทำที่ ฝั่งเซิร์ฟเวอร์ แทนฝั่งผู้ใช้ เมื่อบอท หรือคน เข้ามาที่เว็บ เซิร์ฟเวอร์จะส่งไฟล์ HTML ที่มีเนื้อหาครบถ้วนสมบูรณ์กลับไปให้ทันที ทำให้ Googlebot เห็นเนื้อหา 100% ตั้งแต่วินาทีแรกโดยไม่ต้องรอคิว Render

  • เครื่องมือแนะนำ หากใช้ React ให้ใช้ Next.js หรือหากใช้ Vue ให้ใช้ Nuxt.js ในการทำ SSR ค่ะ

ทางแก้ที่ 2 ใช้ Static Site Generation 

สำหรับเว็บไซต์ที่ไม่ค่อยมีการเปลี่ยนเนื้อหาบ่อยๆ เช่น หน้า Landing Page, บล็อก, หรือหน้า Corporate การใช้ SSG คือทางเลือกที่ดีที่สุด

SSG คือการ สร้างหน้าเว็บเตรียมรอไว้เลย ตั้งแต่ตอน Build เว็บไซต์ ผลลัพธ์ที่ได้คือไฟล์ HTML ล้วนๆ ที่โหลดเร็วมากและ Google รักที่สุด เพราะไม่ต้องประมวลผลอะไรทั้งสิ้น แค่หยิบมาวางก็จบ

สิ่งต้องห้ามและสิ่งที่ต้องทำในการเขียนโค้ด

สิ่งต้องห้ามและสิ่งที่ต้องทำในการเขียนโค้ด

นอกจากการเลือกวิธีการ Render แล้ว การเขียนโค้ดภายในก็สำคัญมากค่ะ

  • อย่าใช้ onclick ในการทำลิงก์ Googlebot จะตามลิงก์ได้ดีที่สุดผ่าน HTML Tag มาตรฐานอย่าง <a href=”…”> เท่านั้น หากคุณใช้ปุ่ม Button ที่สั่งงานด้วย JavaScript Event บอทอาจจะไปต่อไม่ได้และไม่เก็บข้อมูลหน้าปลายทาง
  • จัดการ Meta Tags ให้ดี เว็บแบบ Single Page Application มักมีปัญหา Title และ Description ไม่เปลี่ยนตามหน้าเนื้อหา คุณต้องใช้ Library เช่น react-helmet หรือ next/head เพื่อ Inject ข้อมูล Meta Tags ให้ตรงกับหน้านั้นๆ เพื่อให้ Google นำไปแสดงผลได้ถูกต้อง
  • ระวัง Lazy Loading การโหลดรูปภาพหรือเนื้อหาเมื่อเลื่อนหน้าจอลงมา เป็นเรื่องดี แต่ต้องมั่นใจว่า Googlebot สามารถมองเห็นเนื้อหานั้นได้โดยไม่ต้อง จำลองการเลื่อนเมาส์ เพราะบอทไม่ได้เลื่อนหน้าจอเหมือนคนค่ะ

ต้องทดสอบให้ชัวร์ว่า Google เห็นสิ่งที่เราเห็น

การทำ JavaScript SEO ไม่ใช่แค่เรื่องของการเขียนโค้ดให้ทำงานได้ แต่คือการเขียนโค้ดให้ สื่อสารรู้เรื่อง กับ Search Engine

วิธีตรวจสอบที่ดีที่สุดว่าเว็บของคุณผ่านเกณฑ์หรือไม่ คือการใช้เครื่องมือ URL Inspection ใน Google Search Console แล้วกดปุ่ม View Crawled Page เพื่อดูว่า HTML ที่ Google เห็นนั้น มีเนื้อหาครบถ้วนเหมือนที่เราเห็นบนหน้าจอหรือไม่

หากคุณปรับแก้จน Google สามารถ Render หน้าเว็บได้อย่างสมบูรณ์แล้ว ไม่ว่าเว็บจะสร้างด้วยเทคโนโลยีที่ซับซ้อนแค่ไหน คุณก็สามารถติดอันดับหน้าแรกได้ไม่ต่างจากเว็บทั่วไปเลยค่ะ

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *


ติดต่อ "แว่นTalk"