รู้จัก JavaScript ในแง่การทำ SEO พร้อมคำแนะนำในการปรับปรุง
ขั้นตอนแรกของการทำ SEO นั้น คือการที่คุณต้องมีเว็บไซต์ก่อน ซึ่งเว็บไซต์ก็มีอยู่หลายประเภทหลายรูปแบบ อาทิ เว็บไซต์ WordPress, เว็บไซต์ e-Commerce, เว็บไซต์ข่าว ฯลฯ ทุกองค์ประกอบและโครงสร้างในการสร้างเว็บไซต์ก็ส่งผลต่อผลลัพธ์ของการทำ SEO เช่นกัน ไม่เว้นแม้กระทั่งภาษาในการสร้างเว็บไซต์อย่าง HTML, CSS และ JavaScript ด้วย
สำหรับวันนี้ทาง ANGA จะมาชวนคุณมาทำความเข้าใจเกี่ยวกับ JavaScript SEO หรือการใช้ JavaScript ในด้านของการทำ SEO ให้มากขึ้น พร้อมทั้งแนะนำการปรับปรุงเว็บไซต์ด้วย JavaScript SEO เชิงเทคนิคที่คุณอาจไม่เคยรู้มาก่อน!
JavaScript SEO คืออะไร?
JavaScript SEO คือ การทำ SEO บนเว็บไซต์ที่ถูกสร้างขึ้นโดย JavaScript Frameworks และ JavaScript Libraries เพื่อให้ Google เข้ามาเก็บข้อมูลและจัดทำดัชนีได้ง่ายขึ้น, ทำให้เว็บไซต์แสดงผลได้ถูกต้อง, เป็นมิตรต่อผู้ใช้งาน, ตอบสนองความต้องการของผู้ใช้งานได้ดี, กระตุ้นอันดับเว็บไซต์ให้สูงขึ้น และเพิ่มจำนวนผู้เข้าชมบนเว็บไซต์ โดย JavaScript SEO นี้ เป็นส่วนหนึ่งของการทำ SEO เชิงเทคนิค (Technical SEO)
ปัญหาของ JavaScript SEO ที่อาจพบได้ และวิธีการแก้ไข
ถึงแม้ว่าการใช้ JavaScript จะดีกว่าการใช้ HTML แบบเดี่ยว ๆ ในหลายด้าน ไม่ว่าจะเป็นการใช้ระยะเวลาในการสร้างน้อยกว่า, มีขั้นตอนในการสร้างไม่ยุ่งยากซับซ้อนเท่า หรือ สามารถตอบสนองความต้องการของผู้ใช้งานได้มากกว่าก็ตาม แต่ JavaScript SEO ก็ยังมีข้อจำกัดหรือจุดด้อยบางประการอยู่เช่นเดียวกัน หากคุณใช้ JavaScript โดยไม่ระวัง หรือใช้ในปริมาณที่มากจนเกินไป อาจทำให้เว็บไซต์ของคุณพบกับปัญหาตามมาได้
ดังนั้น เราจะมากล่าวถึงปัญหาที่อาจเกิดขึ้นได้จาก JavaScript SEO พร้อมทั้งแนะนำวิธีการแก้ไขปัญหา เพื่อให้เกิดผลลัพธ์ที่ดีที่สุดตามมา ดังต่อไปนี้
การเก็บข้อมูลที่ไม่ครบถ้วน
ก่อนที่จะจัดอันดับเว็บไซต์หรือจัดทำดัชนีให้แก่เรา ทาง Google Bot จะรวบรวมข้อมูลของเว็บไซต์ที่สร้างด้วย JavaScript จาก Static HTML ที่ผ่านการเรนเดอร์มาก็จริง แต่ก็มีโอกาสที่จะเก็บข้อมูลมาไม่ครบถ้วนและไม่สำเร็จในทันทีได้ เนื่องจากในครั้งแรกที่ Google Bot เข้ามาตรวจสอบเว็บไซต์ของคุณ (Google Crawler) ข้อมูลอาจจะยังไม่พร้อมใช้งานทั้งหมด ทำให้ Google Bot ออกไปและกลับเข้ามาใหม่ เมื่อข้อมูลแสดงครบถ้วนหมดแล้ว แสดงว่าขั้นตอนการเก็บข้อมูลและจัดทำดัชนีของเว็บไซต์ที่สร้างด้วย JavaScript จะใช้เวลานานกว่าเว็บไซต์ที่สร้างด้วย HTML ทั่ว ๆ ไปนั่นเอง
ซึ่งสามารถแก้ไขได้ โดยการทำ Server Side Rendering เพื่อลดขั้นตอนการจัดทำดัชนีลง นั่นคือการให้ Server เรนเดอร์หน้าเว็บกับข้อมูลในครั้งแรกออกมาเป็น Static HTML ไว้ เมื่อ Google Bot เข้ามาเก็บข้อมูลที่หน้าเว็บไซต์ จะทำให้ได้ข้อมูลที่สมบูรณ์ครบถ้วนในครั้งเดียว ทีนี้คะแนน SEO ของเราก็จะไม่ร่วงแล้ว!
Meta Tags ทับซ้อนกัน
การเขียน Meta Title และ Meta Description ของหน้าเว็บไซต์แต่ละหน้าจะต้องเขียนให้แตกต่างกัน และไม่ควรซ้ำกับเว็บไซต์อื่น ๆ ด้วย แต่ปัญหาเรื่อง Meta Tags ซ้ำอาจจะเกิดขึ้นได้ เมื่อคุณมีการใช้ JavaScript มาเป็นส่วนเสริมในการทำเว็บไซต์ ซึ่งสิ่งนี้อาจจะทำให้เกิดปัญหาและทำให้ Google มองว่าเว็บไซต์ของคุณเป็นสแปมและไม่นำไปจัดอันดับได้
คุณสามารถตรวจสอบความซ้ำซ้อนของ Meta Title และ Meta Description ได้ที่เครื่องมือทำ SEO ที่ชื่อว่า Ahrefs (https://ahrefs.com) โดยเข้าไปที่เมนู Site Audit > คลิกที่ Duplicates ภายใต้หัวข้อ Reports บนแถบเมนูด้านซ้ายมือ ดังภาพประกอบด้านล่างนี้
Canonical Tags
Canonical Tags คือ Tag ที่จะทำให้ Google Bot ทราบว่าหน้าหลักของ URL นั้น ๆ คือหน้าไหน ซึ่งจะช่วยให้ Google สามารถนำข้อมูลจัดทำดัชนีได้อย่างถูกต้องตามที่เราต้องการ อีกทั้งยังช่วยลดปัญหาเรื่องเนื้อหาซ้ำ หรือ Duplicate Content ได้อีกด้วย
เมื่อหลายปีก่อนหน้านี้ ทาง Google ได้เอ่ยว่า Canonical Tags จะไม่ถูกนำมาประมวลผล หากเว็บไซต์ดังกล่าวที่ถูกปรับแต่งด้วย JavaScript จึงทำให้ Patrick Stox, Product Advisor & Technical SEO ของ Ahrefs ได้ออกมาทดสอบด้วยตนเองว่ามันจะจริงตามที่ Google ว่าไว้หรือไม่
โดยทาง Patrick Stox ได้ทำการทดสอบบนเว็บไซต์ส่วนตัวของตนเองและพบว่า เว็บไซต์ยังถูกนำไปประมวลผลตามปกติ ซึ่งถ้าคุณมีการทำ Canonical อยู่แล้ว และมีการเพิ่มแท็กด้วย JavaScript หมายความว่าคุณกำลังทำ Canonical ผ่านทั้งสองแท็ก ในกรณีแบบนี้ Google จะเป็นผู้พิจารณาว่าจะเลือกแท็กใดเป็น Canonical Tags ที่แท้จริงในหน้านั้น ๆ อย่างไรก็ตาม Patrick Stox ได้กล่าวทิ้งท้ายในเรื่องนี้ไว้ว่า “ทุกหน้าควรมี Canonical Tags ที่อ้างอิงตัวเอง”
การละเลย Alt Attribute
Alt Attribute หรือที่หลาย ๆ คนอาจจะเรียกว่า Alt Tag, Alt Description, Alt Image หรือ Alt Text คือ คำอธิบายรูปภาพ เพื่อให้ Google รับรู้ว่ารูปภาพนี้สื่อถึงอะไรและมีความหมายว่าอย่างไร โดยคำอธิบายรูปภาพนี้จะไม่ปรากฏบนหน้าเว็บไซต์ แต่จะแทรกอยู่ใน HTML Code ของเว็บไซต์แทน ซึ่งจะส่งผลดีต่อ SEO ในส่วนของ Image SEO เป็นหลัก
ปัญหาของ JavaScript SEO คือ นักพัฒนา JavaScript ส่วนใหญ่ มักจะละเลย Alt Attribute ไป โดยการปล่อยช่องว่างเอาไว้ ดังนั้น หากคุณกำลังทำ JavaScript SEO อยู่ล่ะก็ แนะนำให้ตรวจเช็กเรื่อง Alt Attribute ด้วยว่ามีส่วนไหนหายไปหรือไม่ โดยการเข้าไปที่ Ahrefs > Site Audit > Images เพื่อที่จะได้แก้ไขและทำให้ประสิทธิภาพของ SEO นั่นดีขึ้นกว่าที่เคยเป็นมา
เนื้อหาถูกปิดกั้น ไม่แสดงผลตามที่ต้องการ
ปัญหายอดนิยมของการทำ JavaScript SEO ที่คุณอาจไม่เคยสังเกต หากไม่ได้มีการเข้าไปทดลองใช้งาน นั่นก็คือเนื้อหาไม่ได้ถูกโหลดตามค่าเริ่มต้น และอาจถูกโหลดในภายหลังผ่านการกระทำของผู้ใช้งาน เช่น การคลิก ปัญหานี้จะส่งผลให้ผู้ใช้งานไม่ได้รับประสบการณ์ที่ดีที่สุดตามที่คุณตั้งใจไว้กลับไป ดังนั้น ขอแนะนำให้คุณทำการตรวจสอบและแก้ไขปัญหานี้โดยเร็วจะเป็นการดีที่สุด
คุณสามารถตรวจสอบปัญหานี้ได้สองวิธี วิธีแรกคือการนำ URL ไปตรวจสอบใน Google Search Console และวิธีที่สองคือการตรวจสอบที่ “Inspect” อย่างรวดเร็วและง่ายดาย เพียงแค่คุณคลิกขวาและกด Inspect จากนั้นก็คลิกที่แถบ Elements และค้นหาคำว่า “Canonicalization” หรือ “Canonical” หากพบว่ามีแท็กขึ้นดังภาพ แปลว่าเรียบร้อยแล้ว
URL ซ้อน ทำให้เนื้อหาซ้ำ
เมื่อคุณใช้ JavaScript อาจจะพบปัญหา URL ทับซ้อนกันหลาย URL แต่ตัวเนื้อหาเป็นเนื้อหาเดียวกันก็เป็นได้ ปัญหานี้จะทำให้ Google มองว่าเว็บไซต์ของคุณมีเนื้อหาซ้ำ (Duplicate Content) มากเกินไป จึงส่งผลต่อการแสดงผลการค้นหาที่ผิดเพี้ยน หรือถูกปิดกั้นไม่ให้แสดงผลเลยก็ได้เช่นกัน
ตัวอย่าง URL ที่ทับซ้อนกัน
website.com/abc
website.com/Abc
website.com/ABC
website.com/123
website.com/?id=123
การ Render ในฝั่ง Client & Server
รูปแบบการเขียนเว็บไซต์มีอยู่ 3 แบบคือ SSR, CSR และ SSG ทั้ง 3 รูปแบบนี้มีความแตกต่างกัน ดังนี้
SSR (Server Side Rendering)
SSR หรือ Server Side Rendering คือ การ Render หน้าเว็บไซต์บน Server แทนเบราว์เซอร์ (Browser) ทำให้ข้อมูลที่ Client ส่งคำขอเข้ามาถูก Render เรียบร้อยแล้ว สามารถนำไปแสดงผลได้ทันที จึงทำให้เว็บไซต์ที่ถูกเขียนด้วย SSR จะถูกแสดงผลออกมาเร็วที่สุด และเหมาะกับการทำ SEO มากที่สุด
CSR (Client Side Rendering)
CSR หรือ Client Side Rendering คือ หน้าเว็บไซต์จะถูก Render จากฝั่ง Client เมื่อ Client ส่งคำขอมาที่ Server แล้ว Server จะส่งโครงสร้างเว็บไซต์พื้นฐานและไฟล์ JavaScript มาให้ โดยที่ยังไม่มีการ Render เนื้อหาใด ๆ มาด้วย จากนั้น JavaScript จะนำไฟล์มา Render ข้อมูล และทำให้หน้าเว็บไซต์แสดงผลได้อย่างครบถ้วน แต่ไม่เหมาะกับการทำ SEO ดังนั้น เราจึงไม่แนะนำให้คุณเขียนเว็บไซต์ด้วย CSR
SSG (Static Site Generation)
SSG หรือ Static Site Generation มีความคล้ายคลึงกับ SSR อยู่มาก แต่จะแตกต่างกันที่ SSG มีการ Render HTML ไว้ล่วงหน้าตั้งแต่ขั้นตอนการเขียนเว็บไซต์ ไม่ใช้การ Render ตามคำขอของผู้ใช้งานเหมือน SSR รวมถึงไม่มีการ Render ที่ Server ด้วย เพราะเหตุนี้ จึงมีการโหลดหน้าเว็บไซต์ได้เร็วมาก และเหมาะกับเว็บไซต์ที่เน้นการให้ข้อมูล หรือต้องการทำ SEO ร่วมด้วย แต่อาจจะทำให้ขั้นตอนการสร้างเว็บไซต์มีความล่าช้า โดยเฉพาะกับเว็บไซต์ใหญ่ ๆ ที่มีข้อมูลจำนวนมาก
เลือก JavaScript Framework ที่ SEO-friendly
JavaScript Framework คือ ชุดคำสั่งที่รวมองค์ประกอบของโค้ดไว้ด้วยกันเป็นชุดเดียว ซึ่งจะช่วยให้คุณเขียนเว็บไซต์ได้สะดวก รวดเร็ว และมีประสิทธิภาพที่ดีขึ้น โดยที่คุณไม่ต้องปวดหัวกับการจัดการโค้ดแต่ละส่วนเลย
ซึ่ง JavaScript Framework ก็มีอยู่หลายตัว ทั้งเหมาะและไม่เหมาะกับการทำ SEO ในภายหลัง ซึ่งเราขอแนะนำให้คุณเลือกใช้ JavaScript Framework ที่ SEO-friendly อย่างเช่น React.js, Next.js, Vue.js หรือ Angular.js จะเป็นการดีที่สุด
บทสรุป JavaScript ทำ SEO
สรุปได้ว่า JavaScript SEO เป็นการทำ SEO บนเว็บไซต์ที่มีการสร้างด้วย JavaScript และอย่างที่เราเห็นกันว่า JavaScript ส่งผลต่อประสิทธิภาพของเว็บไซต์และการทำ SEO จริง แต่ทั้งนี้ คุณจะต้องเลือกใช้งาน JavaScript ให้เหมาะสม หากใช้งานมากเกินไปก็อาจส่งผลเสียต่อเว็บไซต์ได้เช่นกัน เนื่องจากจะทำให้ Google Crawler ทำความเข้าใจได้ยาก ใช้เวลาในการประมวลผลนาน หรืออาจไม่ประมวลผลบนหน้าเว็บไซต์นั้นเลยก็ได้เช่นกัน
อย่างไรก็ตาม ในบทความนี้ได้เอ่ยถึงปัญหาที่อาจเกิดขึ้นได้จาก JavaScript SEO และวิธีการแก้ไขปรับปรุงไปเป็นที่เรียบร้อยแล้ว หวังว่าผู้อ่านจะสามารถนำไปใช้ประโยชน์ได้ไม่มากก็น้อย สำหรับครั้งหน้าแองก้าจะมีเทคนิคดี ๆ อะไรมาฝากอีก รอติดตามอ่านกันได้เลย!