วิธีการทำ JavaScript สำหรับ SEO

ปัจจุบันการทำเว็บไซต์เน้นไปในเรื่องการพัฒนา Front-End, JavaScript และ SEO เป็นหลัก โดย Moz ก็ถือว่าเป็นผู้เชี่ยวชาญด้าน SEO ในสายเทคนิคและเป็นผู้ที่ชื่นชอบการพัฒนาเว็บไซต์ในระดับเอเจนซีที่ได้รับรางวัล พวกเขาต้องการแบ่งปันมุมมองเกี่ยวกับ JavaScript สำหรับ SEO จากประสบการณ์ของพวกเขาเอง ซึ่งในบทความนี้ คุณจะได้เรียนรู้เกี่ยวกับวิธีเพิ่มประสิทธิภาพเว็บไซต์ที่ขับเคลื่อนด้วย JavaScript สำหรับการทำ SEO 

JavaScript สำหรับ SEO คืออะไร

JavaScript สำหรับ SEO เป็นเทคนิคการทำ SEO ที่เน้นการเพิ่มประสิทธิภาพเว็บไซต์ที่สร้างด้วย JavaScript เพื่อให้เอื้อต่อ Search Engine  ซึ่งส่วนใหญ่เกี่ยวข้องกับ

  • การปรับเนื้อหาผ่านการใช้ JavaScript สำหรับการรวบรวมข้อมูล การแสดงผล และการติดอันดับบน Google Search
  • การป้องกัน วินิจฉัย และแก้ไขปัญหาการติดอันดับสำหรับเว็บไซต์ และ/หรือ Web-App แบบหน้าเดียวที่สร้างขึ้นบน Framework JavaScript เช่น React, Angular และ Vue
  • ตรวจสอบให้แน่ใจว่า Search Engine สามารถค้นหาเว็บไซต์ของคุณเจอผ่านการเชื่อมโยงแนวทางปฏิบัติที่ดีที่สุด
  • ลดเวลาในการดาวน์โหลดหน้าเว็บไซต์สำหรับการเรียกใช้โค้ด JavaScript เพื่อเพิ่มประสบการณ์ให้ผู้ใช้งาน (UX)

JavaScript นั้นดีหรือไม่ดีสำหรับ SEO

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

JavaScript ส่งผลต่อ SEO อย่างไร

JavaScript นั้นส่งผลต่อ On-Page SEO และปัจจัยการจัดอันดับโดยตรง ซึ่งเกี่ยวข้องกับ SEO ดังนี้

  • เนื้อหาที่แสดงผล
  • ลิ้งก์
  • การโหลดรูปภาพ
  • เวลาในการโหลดเว็บไซต์
  • Meta data ต่างๆ

เว็บไซต์ที่มี JavaScript นั้นเป็นอย่างไร

เมื่อคุณพูดถึงเว็บไซต์ที่สร้างด้วย JavaScript มันจะไม่ได้หมายถึงแค่การเพิ่มเลเยอร์สำหรับการโต้ตอบระหว่าง JavaScript กับ HTML (เช่น เมื่อเพิ่มภาพเคลื่อนไหวของ JS ลงในหน้าเว็บแบบ Static) ในกรณีนี้ เว็บไซต์ที่ขับเคลื่อนด้วย JavaScript จะมีการแทรกเนื้อหาหลักลงใน DOM ผ่าน JavaScript

App Shell Model

Template นี้เรียกว่า App Shell และเป็นพื้นฐานสำหรับ Progressive Web Applications (PWAs) และในบทความนี้จะกล่าวถึงสิ่งนี้ต่อไป

วิธีเช็คว่าเว็บไซต์ไหนใช้ JavaScript

คุณสามารถตรวจสอบได้ว่า เว็บไซต์ใดสร้างบน Framework JavaScript โดยใช้เครื่องมือค้นหาเทคโนโลยี เช่น BuiltWith หรือ Wappalyzer หรือคุณสามารถ “Inspect Element” หรือ “View source” ใน Browser เพื่อหาชุดโค้ด JavaScript ได้ ซึ่งสิ่งที่มักจะพบคือ

การใช้ JavaScript สำหรับ SEO Content

สำหรับตัวอย่างการใช้ JavaScript สำหรับ SEO Content นั้น เว็บไซต์สมัยใหม่จะถูกสร้างด้วย Framework JavaScript เช่น Angular, React และ Vue Framework ซึ่ง JavaScript สามารถช่วยให้นักพัฒนาสร้างและปรับขนาดเว็บแอปพลิเคชันที่สามารถโต้ตอบได้ และด้านล่างคือตัวอย่างโปรเจคเริ่มต้นที่ใช้ Angular.js ซึ่งเป็น Framework ที่สร้างโดย Google

และเมื่อคุณดูใน Browser คุณจะเห็นรูปภาพ เนื้อหา และลิงก์ ซึ่งคุณสามารถดูข้อมูลแบบเชิงลึกได้เพิ่มเติมดังรูปด้านล่าง

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

เรื่องนี้เป็นปัญหา SEO ที่อาจเกิดขึ้น เนื่องจากเนื้อหาใดๆก็ตามที่แสดงต่อผู้ใช้ แต่ไม่แสดงต่อ Bot ของ Search Engine นั้น จะทำให้ Bot ไม่สามารถเข้ามาดึงข้อมูลและเนื้อหาในเว็บไซต์ได้ และจะส่งผลต่อการแสดงผลในอันดับของ Google โดยตรง

นอกจากการแทรกเนื้อหาลงใน DOM แบบไดนามิกแล้ว JavaScript ยังสามารถทำงานกับลิงก์ต่างๆในเว็บไซต์ที่ Bot สามารถเข้ามาดึงข้อมูลได้อีกด้วย ซึ่ง Google นั้นใช้ Bot ในการค้นหาหน้าเว็บไซต์ต่างๆของคุณ

สำหรับแนวทางปฏิบัติที่ดีที่สุดนั้น Google แนะนำให้เชื่อมโยงหน้าเว็บโดยใช้แท็กแองเคอร์ HTML ที่มี Attribute <a href> รวมถึงคำอธิบายสำหรับการเชื่อม

อย่างไรก็ตาม Google ได้แนะนำว่า นักพัฒนาซอฟต์แวร์ไม่ควรพึ่งพาองค์ประกอบ HTML อื่นๆ เช่น div,  span หรือตัวจัดการเหตุการณ์ของ JS สำหรับการทำ Internal link เพราะลิงก์เหล่านี้เรียกว่าลิงก์ ” Pseudo link ” และโดยทั่วไป Bot จะข้ามลิงก์เหล่านี้ไป

อย่างไรก็ตาม ยังมีการศึกษาที่ค้นพบว่า GoogleBot นั้นสามารถเข้ามาอ่านลิ้งก์จาก JavaScript ได้  จากประสบการณ์ของทีมงาน Moz พบว่าการรักษาลิ้งก์ให้เป็นองค์ประกอบ HTML แบบคงที่นั้นเป็นแนวทางปฏิบัติที่ดีที่สุด

ปัญหา SEO ที่อาจเกิดขึ้นสำหรับส่วนนี้นั้น คือการที่ Search Engine ไม่สามารถเข้ามาอ่านข้อมูล และติดตามลิ้งก์ไปยังหน้าหลัก ซึ่งจะทำให้หน้าเว็บของคุณพลาด Internal link ที่มีค่า โดย Internal Link นั้นมีประโยชน์ในการช่วยให้ Search Engine เข้ามาอ่านข้อมูลเว็บไซต์ของคุณได้อย่างมีประสิทธิภาพมากขึ้น และเน้นหน้าที่สำคัญที่สุด ในกรณีที่แย่ที่สุดก็คือ หาก Internal Link ของคุณสร้างอย่างไม่ถูกต้อง Google อาจมีปัญหาในการอ่านข้อมูลในหน้าเว็บใหม่ที่ยังไม่อยู่ใน Sitemap

JavaScript SEO สำหรับการโหลดรูปภาพ

JavaScript ยังส่งผลต่อความสามารถในการเข้ามาอ่านข้อมูลรูปภาพที่ผ่านการโหลดแบบ Lazy Loading ได้อีกด้วย รูปข้างล่างเป็นตัวอย่าง ข้อมูลโค้ดนี้ใช้สำหรับการโหลดรูปภาพแบบ Lazy Loading ใน DOM ผ่าน JavaScript

GoogleBot รองรับการโหลดแบบ Lazy Loading แต่ไม่สามารถ “เลื่อน” เหมือนที่ผู้ใช้ทั่วไปทำเมื่อเข้าชมเว็บไซต์ได้ โดย GoogleBot จะปรับขนาดวิวพอร์ตเสมือนให้ยาวขึ้นเมื่อต้องรวบรวมข้อมูลเนื้อหาเว็บ ดังนั้น โปรแกรมสำหรับเหตุการณ์ “เลื่อน” จะไม่ถูกทริกเกอร์และโปรแกรมรวบรวมข้อมูลจะไม่แสดงผลเนื้อหา

นี่คือตัวอย่างโค้ดที่เป็นมิตรกับ SEO มากขึ้น

ชุดโค้ดนี้แสดงว่า IntersectionObserver API ได้ทำงาน เมื่อมีองค์ประกอบที่สังเกตได้ปรากฏให้เห็น ซึ่งโค้ดนี้จะมีความยืดหยุ่นและมีประสิทธิภาพมากกว่า และรองรับโดย GoogleBot รุ่นใหม่ โดยโค้ดนี้สามารถใช้ได้จากวิธีที่ GoogleBot ปรับขนาดวิวพอร์ตเพื่อ “ดู” เนื้อหาของคุณ (ดูด้านล่าง)

คุณยังสามารถใช้การโหลดแบบเนทีฟในเบราว์เซอร์ได้ ซึ่ง Google Chrome รองรับฟีเจอร์นี้ แต่ว่ายังคงเป็นฟีเจอร์ทดลองอยู่ กรณีที่เลวร้ายที่สุด คือ GoogleBot จะละเว้นและรูปภาพทั้งหมดจะโหลดต่อไป

Native Lazy Loading ใน Google Chrome

ปัญหา SEO ที่อาจเกิดขึ้น: เช่นเดียวกับเนื้อหาหลักที่ไม่ได้โหลด สิ่งสำคัญคือต้องตรวจสอบให้แน่ใจว่า Google สามารถ “ดู” เนื้อหาทั้งหมดบนหน้าเว็บรวมไปถึงรูปภาพด้วย ตัวอย่างเช่น ในเว็บไซต์อีคอมเมิร์ซที่มีรายการสินค้าหลายแถว รูปภาพที่โหลดแบบ Lazy Loading สามารถให้ประสบการณ์ผู้ใช้ที่รวดเร็วยิ่งขึ้นสำหรับทั้งผู้ใช้และ Bot

JavaScript SEO สำหรับการโหลดเนื้อหา

JavaScript นั้นยังสามารถส่งผลต่อเวลาในการโหลดหน้าเว็บ ซึ่งเป็นปัจจัยการจัดอันดับต้นๆจาก Google ที่ให้ความสำคัญสำหรับการโหลดข้อมูลแบบมือถือเป็นหลัก ซึ่งหมายความว่าหน้าเว็บที่ช้าอาจส่งผลต่อการจัดอันดับใน Google ได้ ซึ่งคุณสามารถช่วยนักพัฒนาแก้ปัญหานี้ได้โดย

  • ย่อขนาด JavaScript
  • ลดการโหลด JavaScript ที่ไม่สำคัญออกไปจนกว่าจะแสดงผลเนื้อหาหลักใน DOM
  • Inlining JavaScript ที่สำคัญ
  • ให้บริการ JavaScript ใน Payloads ที่มีขนาดเล็กลง

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

JavaScript SEO สำหรับ Meta Data

สิ่งสำคัญที่ควรทราบอีกอย่างคือ SPA ที่ใช้แพ็คเกจเราเตอร์ เช่น React-Router หรือ Vue-Router ต้องใช้ขั้นตอนพิเศษบางอย่างเพื่อจัดการกับสิ่งต่างๆ เช่น การเปลี่ยน Meta tag เมื่อเกิดการเปลี่ยนหน้า ซึ่งโดยปกติ Node.js เช่น Vue-Meta หรือ React-Meta-Tags จะจัดการสิ่งเหล่านี้ให้

มุมมองในระดับเราเตอร์คืออะไร?  นี่คือวิธีการเชื่อมโยงไปยัง “หน้า” ต่างๆของแอปพลิเคชันหน้าเดียวใน React ซึ่งมีห้าขั้นตอน ดังนี้

  1. เมื่อผู้ใช้เยี่ยมชมเว็บไซต์ React คำขอ GET จะถูกส่งไปยังเซิร์ฟเวอร์สำหรับไฟล์ ./index.html
  2. จากนั้นเซิร์ฟเวอร์จะส่งหน้า index.html ไปยังผู้ใช้งาน ซึ่งมีสคริปต์เพื่อเปิดใช้ React และ React Router
  3. จากนั้นโหลดแอปพลิเคชันเว็บบนฝั่งผู้ใช้งาน
  4. หากผู้ใช้คลิกลิ้งก์เพื่อไปยังหน้าใหม่ (www.abc.com/example) คำขอจะถูกส่งไปยังเซิร์ฟเวอร์สำหรับ URL ใหม่
  5. React Router จะสกัดกั้นคำขอก่อนที่จะถึงเซิร์ฟเวอร์และจัดการการเปลี่ยนแปลงของหน้าเอง สิ่งนี้ทำได้โดยการอัปเดตส่วนประกอบ React ที่แสดงผลในเครื่องและเปลี่ยน URL ฝั่งผู้ใช้งาน

กล่าวอีกนัยหนึ่งเมื่อผู้ใช้หรือ Bot ติดตามลิงก์ไปยัง URL บนเว็บไซต์ที่ทำด้วย React พวกเขาจะไม่ได้รับไฟล์ HTML หลายไฟล์ แต่องค์ประกอบ React (เช่น ส่วนหัว ส่วนท้าย และเนื้อหาเนื้อหา) ที่โฮสต์บนไฟล์ ./index.html นั้นได้รับการจัดระเบียบใหม่เพื่อแสดงเนื้อหาที่แตกต่างกัน นี่คือเหตุผลที่เรียกว่า Single Page Applications

ปัญหา SEO ที่อาจเกิดขึ้น: สิ่งสำคัญคือต้องใช้แพ็คเกจ เช่น React Helmet เพื่อให้แน่ใจว่าผู้ใช้จะได้รับข้อมูล Meta Data ที่ไม่ซ้ำกันสำหรับแต่ละหน้าหรือ “การดู” เมื่อเรียกดู SPA มิฉะนั้นเครื่องมือค้นหาอาจรวบรวมข้อมูล Meta data เดียวกันสำหรับทุกหน้า หรือแย่กว่านั้น ไม่มีเลย

Google จัดการกับ JavaScript อย่างไร

เพื่อให้เข้าใจว่า JavaScript ส่งผลต่อ SEO อย่างไร เราต้องเข้าใจว่าเกิดอะไรขึ้นเมื่อ GoogleBot เข้ามาอ่านข้อมูลหน้าเว็บ

  • อ่านข้อมูล
  • แสดงผลข้อมูล
  • ตำแหน่งในการแสดงผล

อันดับแรก GoogleBot จะรวบรวมข้อมูล URL ในแต่ละหน้า พร้อมส่งคำขอ GET ไปยังเซิร์ฟเวอร์ โดยทั่วไปจะใช้ User-Agent สำหรับอุปกรณ์พกพา จากนั้นเซิร์ฟเวอร์จะส่ง HTML ออกไป

จากนั้น Google จะตัดสินใจว่าทรัพยากรใดที่จำเป็นในการแสดงเนื้อหาของหน้าเว็บ โดยปกติจะเป็นข้อมูลเฉพาะ HTML เท่านั้น ไม่ใช่ไฟล์ CSS 

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

นี่คือเหตุผลที่ Google พยายามเลื่อนการแสดงผล JavaScript ออกไปในภายหลัง ทรัพยากรที่ไม่ได้ดำเนินการจะถูกจัดคิวเพื่อประมวลผลโดย Google Web Rendering Services (WRS) เมื่อมีทรัพยากรการคำนวณ

สุดท้าย Google จะจัดทำดัชนี HTML ที่แสดงผลหลังจากเรียกใช้ JavaScript

กระบวนการรวบรวมข้อมูล แสดงผล และจัดทำอันดับของ Google

กล่าวอีกนัยหนึ่ง Google ทำการรวบรวมข้อมูลและจัดทำดัชนีเนื้อหาในสองรอบ

  1. รอบแรกของการจัดอันดับ หรือการรวบรวมข้อมูลทันทีใน HTML ที่ส่งโดยเว็บเซิร์ฟเวอร์
  2. รอบสองของการจัดดัชนี หรือเลื่อนการอ่านข้อมูลบางส่วนออกไป ที่แสดงผ่าน JavaScript

วิธีการจัดอันดับของ Google : Google I/O’18

สิ่งสำคัญที่สุดคือเนื้อหาที่ต้องใช้ JavaScript ในการแสดงผลอาจพบกับความล่าช้าในการรวบรวมข้อมูลและจัดอันดับโดย Google ซึ่งใช้เวลาหลายวันหรือหลายสัปดาห์ ตัวอย่างเช่น ในอดีต GoogleBot ใช้งานเครื่องมือแสดงผล Chrome 41 ที่ล้าสมัย อย่างไรก็ตาม Google ได้พยายามปรับปรุงระบบการรวบรวมข้อมูลเว็บในช่วงไม่กี่ปีที่ผ่านมา และเร็วๆ นี้ GoogleBot ได้ทำการอัพเกรด เบราว์เซอร์ Chromium แบบ Headless รุ่นล่าสุดที่มีความเสถียรในเดือนพฤษภาคม 2019 ซึ่งหมายความว่าระบบการรวบรวมข้อมูลเว็บของพวกเขาอยู่ในสถานะ เข้ากันได้กับ ECMAScript 6 (ES6) ขึ้นไป หรือ JavaScript เวอร์ชันล่าสุดอย่างสมบูรณ์ ดังนั้นหาก GoogleBot สามารถเรียกใช้ JavaScript ได้ เหตุใดเราจึงยังกังวลเกี่ยวกับปัญหาการจัดอันดับ

คำตอบสั้นๆคืองบประมาณในการรวบรวมข้อมูล นี่เป็นแนวคิดที่ Google ได้ทำการจำกัดจำนวนครั้งที่พวกเขาจะเข้าไปรวบรวมข้อมูลเว็บไซต์ได้บ่อยแค่ไหน เนื่องจากทรัพยากรในการอ่านข้อมูลมีจำนวนจำกัด คุณน่าจะทราบอยู่แล้วว่า Google เลื่อนการเรียกอ่านข้อมูลที่ใช้ JavaScript ในภายหลังเพื่อประหยัดงบประมาณการรวบรวมข้อมูล

แม้ว่าความล่าช้าระหว่างการรวบรวมข้อมูลและการแสดงผลจะลดลง แต่ก็ไม่มีการรับประกันว่า Google จะรันโค้ด JavaScript ที่รอคิวอยู่ในคิวของ Web Rendering Services หรือไม่

ต่อไปนี้คือสาเหตุบางประการที่ Google อาจไม่เคยเรียกใช้โค้ด JavaScript ของคุณเลย

  • ถูกบล็อกใน robots.txt
  • หมดเวลาในการอ่านข้อมูล
  • เกิดข้อผิดพลาด

ดังนั้น JavaScript มีโอกาสที่จะทำให้เกิดปัญหา SEO เมื่อเนื้อหาหลักอาศัย JavaScript แต่ไม่ได้แสดงผลโดย Google

การนำไปใช้จริง JavaScript SEO สำหรับ E-Commerce

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

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

วิธีการทดสอบและตรวจสอบปัญหาของ JavaScript SEO 

ต่อไปนี้คือขั้นตอนที่คุณสามารถทำได้ในเชิงรุกเพื่อวินิจฉัยปัญหา JavaScript SEO ที่อาจเกิดขึ้น:

  1. แสดงภาพหน้าเว็บ Google Webmaster ซึ่งช่วยให้คุณสามารถดูหน้าเว็บจากมุมมองของ Google
  2. ใช้ Site search เพื่อตรวจสอบอันดับของ Google ตรวจสอบให้แน่ใจว่าเนื้อหา JavaScript ทั้งหมดของคุณได้รับแสดงผลอย่างถูกต้องโดยการตรวจสอบ Google ด้วยตนเอง
  3. แก้ไขข้อบกพร่องโดยใช้เครื่องมือพัฒนาของ Chrome เปรียบเทียบ และเปรียบเทียบสิ่งที่ Google “เห็น” (ซอร์สโค้ด) กับสิ่งที่ผู้ใช้เห็น (โค้ดที่แสดงผล) โดยตรวจดูให้แน่ใจว่าสอดคล้องกัน

นอกจากนี้ยังมีเครื่องมือและปลั๊กอินของบุคคลที่สามที่มีประโยชน์ซึ่งคุณสามารถใช้ได้ 

Google Webmaster Tools

วิธีที่ดีที่สุดในการพิจารณาว่า Google กำลังประสบปัญหาทางเทคนิคในการพยายามแสดงหน้าเว็บของคุณหรือไม่ คือการทดสอบหน้าเว็บของคุณโดยใช้ Google Webmaster Tools เช่น

การทดสอบความเหมาะสมกับมือถือของ Google

เป้าหมายในการทำสิ่งเหล่านี้คือการเปรียบเทียบเนื้อหาของคุณที่มองเห็นได้ในเบราว์เซอร์ของคุณ และมองหาความคลาดเคลื่อนในสิ่งที่แสดงผ่านเครื่องมือ โดยเครื่องมือ Google Webmaster ทั้งสองนี้ใช้เครื่องมือแสดงผล Chromium แบบ Evergreen เหมือนกับ Google ซึ่งหมายความว่าพวกเขาสามารถให้ภาพที่ถูกต้องแก่คุณในสิ่งที่ GoogleBot “เห็น” จริงๆ เมื่อรวบรวมข้อมูลเว็บไซต์ของคุณ

นอกจากนี้ยังมีเครื่องมือ SEO ด้านเทคนิคของบริษัทอื่น เช่น เครื่องมือดึงข้อมูลและแสดงผลของ Merkle เว็บแอปพลิเคชันนี้แตกต่างจากเครื่องมือของ Google ตรงที่ให้ผู้ใช้ได้ภาพหน้าจอขนาดเต็มของหน้าเว็บทั้งหน้า

Site: Search Operator

หากคุณไม่แน่ใจว่า Google จัดอันดับเว็บไซต์ที่ใช้ JavaScript อย่างไร คุณสามารถตรวจสอบอย่างรวดเร็วโดยใช้โอเปอเรเตอร์การค้นหา Site: ใน Google

เพียงคัดลอกและวางเนื้อหาใดๆ ที่คุณไม่แน่ใจว่า Google กำลังจัดทำดัชนีหลังจากโอเปอเรเตอร์ Site: และชื่อโดเมนของคุณ จากนั้นกดปุ่ม Enter  หากคุณพบหน้าเว็บของคุณในผลการค้นหา ถือว่า Google สามารถรวบรวมข้อมูล แสดงผล และจัดทำดัชนีเนื้อหาของคุณได้ แต่หากไม่แสดง นั่นหมายความว่าเนื้อหา JavaScript ของคุณอาจต้องการความช่วยเหลือในการมองเห็น

นี่คือสิ่งที่ดูเหมือนใน Google SERP

Chrome Dev Tools

อีกวิธีหนึ่งที่คุณสามารถใช้ทดสอบและแก้ปัญหา JavaScript SEO ได้คือฟังก์ชันในตัวของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่มีอยู่ในเว็บเบราว์เซอร์ Chrome

คลิกขวาที่ใดก็ได้บนหน้าเว็บเพื่อแสดงเมนูตัวเลือก จากนั้นคลิก “ดูแหล่งที่มา” เพื่อดูเอกสาร HTML แบบคงที่ในแท็บใหม่ คุณยังสามารถคลิก “ตรวจสอบองค์ประกอบ” หลังจากคลิกขวาเพื่อดูเนื้อหาที่โหลดจริงใน DOM รวมถึง JavaScript

ตรวจสอบองค์ประกอบ

เปรียบเทียบการแสดงผลทั้งสองแบบนี้เพื่อดูว่าเนื้อหาหลักใดถูกโหลดใน DOM แต่ไม่ใช่การฮาร์ดโค้ดในซอร์ส นอกจากนี้ยังมีส่วนขยาย Chrome ของบุคคลที่สามที่สามารถช่วยทำเช่นนี้ได้ เช่น ปลั๊กอิน Web Developer โดย Chris Pederick หรือปลั๊กอิน View Rendered Source โดย Jon Hogg

วิธีการแก้ปัญหาการแสดงผลผ่าน JavaScript

หลังจากวินิจฉัยปัญหาการแสดงผล JavaScript คุณสามารถแก้ไขปัญหา JavaScript SEO ด้วยการใช้ Universal JavaScript หรือที่เรียกว่า “Isomorphic” JavaScript

Universal หรือ Isomorphic ในที่นี้หมายถึงแอปพลิเคชัน JavaScript ที่สามารถทำงานบนเซิร์ฟเวอร์หรือฝั่งผู้ใช้งานได้ มีการใช้งาน JavaScript ที่แตกต่างกันสองสามแบบที่เป็นมิตรกับ Search engine มากกว่าการแสดงผลฝั่งผู้ใช้งาน เพื่อหลีกเลี่ยงการลดโหลด JavaScript ให้กับทั้งผู้ใช้และระบบรวบรวมข้อมูล

  1. การเรนเดอร์ฝั่งเซิร์ฟเวอร์ (SSR) ซึ่งหมายความว่า JavaScript ถูกประมวลผลบนเซิร์ฟเวอร์สำหรับแต่ละคำขอ วิธีหนึ่งในการใช้ SSR คือการใช้ไลบรารี Node.js เช่น Puppeteer อย่างไรก็ตาม สิ่งนี้จะใช้ทรัพยากรอย่างมากกับเซิร์ฟเวอร์
  2. การเรนเดอร์แบบไฮบริด นี่เป็นการผสมผสานระหว่างการแสดงผลฝั่งเซิร์ฟเวอร์และฝั่งผู้ใช้งาน โดยเนื้อหาหลักจะแสดงฝั่งเซิร์ฟเวอร์ก่อนที่จะส่งไปยังฝั่งผู้ใช้งาน ทรัพยากรส่วนอื่นจะถูกโอนไปยังผู้ใ้ช้งาน
  3. การเรนเดอร์แบบไดนามิก ในการแก้ปัญหาชั่วคราวนี้ เซิร์ฟเวอร์จะตรวจหาตัวแทนผู้ใช้ของผู้ใช้งานที่ส่งคำขอ จากนั้นจะส่งเนื้อหา JavaScript ที่แสดงผลล่วงหน้าไปยัง Search engine นอกจากนี้ ตัวแทนผู้ใช้รายอื่นจะต้องแสดงเนื้อหาในผู้ใช้งาน ตัวอย่างเช่น Google Webmasters แนะนำโซลูชันโอเพนซอร์ซยอดนิยมที่เรียกว่า Renderton สำหรับการนำการแสดงผลแบบไดนามิก
  4. การสร้าง Static Regeneration แบบเพิ่มหน่วย หรือการอัปเดตเนื้อหาแบบคงที่หลังจากไซต์ถูกโหลดแล้ว ซึ่งสามารถทำได้ด้วย Framework เช่น Next.js สำหรับ React หรือ Nuxt.js สำหรับ Vue โดย Framework เหล่านี้มีกระบวนการสร้างและเตรียมเนื้อหาไว้ล่วงหน้าก่อนที่จะแสดงผลแอปพลิเคชันด้วย JavaScript ของคุณ ซึ่งวิธีนี้ทำให้เว็บไซต์ของคุณสามารถได้รับประโยชน์ SEO ทั้งหมดจากการเรนเดอร์ฝั่งเซิร์ฟเวอร์ 

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

หมายเหตุ สำหรับเว็บไซต์ที่สร้างบนระบบจัดการเนื้อหา (CMS) ที่แสดงเนื้อหาส่วนใหญ่ล่วงหน้าอยู่แล้ว เช่น WordPress หรือ Shopify โดยทั่วไปจะไม่เป็นปัญหา

สรุป

วิธีนี้ช่วยบอกถึงหลักการทำ JavaScript เพื่อ SEO ให้มีประสิทธิภาพสูงที่สุด นอกจากนี้การปรับเว็บไซต์ด้วย JavaScript นั้นเป็นเรื่องที่ซับซ้อนและต้องใช้เวลาในการศึกษา ทาง Moz แนะนำให้ศึกษาข้อมูลจาก Google โดยตรง และคู่มือการแก้ไขปัญหา สำหรับการทำ JavaScript เพื่อ SEO

Credit: Link

สวัสดี เราชื่อ พีค มีความสนใจเรื่อง SEO มาตั้งแต่ตอนอายุ 20 สมัยเข้ามหาลัยใหม่ๆ เนื่องจากเราเรียนบริหารธุรกิจ จึงได้เรียนเกี่ยวกับการตลาดออนไลน์ และมองว่า SEO คือหนึ่งในศาสตร์และศิลป์ที่มีความอ่อนไหว น่าสนใจ และดูมีอะไรในตัวของมันเองดี คนที่ทำต้องรอคอยเป็น เหมือนฝึกให้เรารู้จักที่จะรอคอยได้ ก็เลยศึกษา ทดลอง มาโดยตลอด มันสนุกมากนะ ได้เห็นกราฟวิ่งขึ้นวิ่งลง เติบโตไปเรื่อยๆ เปรียบเสมือนกับชีวิตที่มีสีสัน มีจังหวะที่คอยสลับไปมานั่นเอง