ทำให้เว็บไซต์ JavaScript ของคุณเป็นมิตรกับ SEO ด้วยโซลูชั่นเหล่านี้

เผยแพร่แล้ว: 2022-01-19

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

เนื้อหา JavaScript ขึ้นอยู่กับวิธีที่เว็บไซต์ของคุณแสดงโค้ดเป็นอย่างมาก

ตัวอย่างเช่น ใน การแสดงผลฝั่ง เซิร์ฟเวอร์ เซิร์ฟเวอร์มีเนื้อหาของเว็บไซต์ เมื่อได้รับการร้องขอ เบราว์เซอร์จะได้รับ HTML ที่แสดงผลอย่างสมบูรณ์

อย่างไรก็ตาม ใน การแสดงผลฝั่งไคลเอ็นต์ JavaScript จะแสดงโดยเบราว์เซอร์โดยใช้ DOM

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

เทคนิคการเรนเดอร์ส่งผลต่อวิธีการเรนเดอร์ JS และด้วยเหตุนี้การจัดอันดับเพจ

เพื่อให้แน่ใจว่าโค้ด JS ของเว็บไซต์คุณแสดงผลทั้งหมด คุณควรปฏิบัติตามแนวทางปฏิบัติ JavaScript SEO ที่เหมาะสม แต่ก่อนอื่น ให้เราเข้าใจว่า JavaScript SEO คืออะไร

JavaScript SEO คืออะไร?

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

วิธีที่ Google ประมวลผลเนื้อหา JavaScript บนเพจ

นี่คือขั้นตอนที่ Googlebot ปฏิบัติตามเพื่อประมวลผล JavaScript:

  • ดึง URL จากคิวการรวบรวมข้อมูลผ่านคำขอ HTTP
  • ตรวจสอบไฟล์ robots.txt เพื่อหา URL ที่เว็บไซต์ไม่อนุญาตให้รวบรวมข้อมูล
  • ข้าม URL ที่ 'ไม่ได้รับอนุญาต' แยกวิเคราะห์การตอบสนองสำหรับ URL อื่น และเพิ่มลงในคิวการรวบรวมข้อมูล
  • จัดคิวหน้าสำหรับการแสดงผล ยกเว้นที่มีการทำเครื่องหมายว่าจะไม่จัดทำดัชนี
  • Chromium แสดงหน้า รัน JavaScript และจัดทำดัชนีหน้า
  • แยกวิเคราะห์ HTML ที่แสดงผลอีกครั้งสำหรับลิงก์
  • จัดคิว URL สำหรับการรวบรวมข้อมูล

Google จะไม่สร้างดัชนีเนื้อหา JavaScript เมื่อใด

google และ javascript

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

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

เนื่องจากควรอ่านโค้ด JavaScript ทุกบิต การใช้ JavaScript มากเกินไปอาจทำให้ความเร็วของเพจช้าลงหรือทำให้เกิดข้อผิดพลาดการหมดเวลา

เหตุใด JavaScript SEO จึงมีความสำคัญ

JavaScript SEO มีความสำคัญเนื่องจากมีผลต่อองค์ประกอบในหน้าและปัจจัยการจัดอันดับมากมายที่ Google (หรือเครื่องมือค้นหา) สแกนหา SEO:

องค์ประกอบในหน้า ปัญหา SEO ที่อาจเกิดขึ้น โซลูชัน SEO ที่เป็นไปได้
เนื้อหาที่แสดงผล เครื่องมือค้นหา (เช่น Google) ไม่สามารถแสดงหน้าเว็บของคุณได้หากทรัพยากรของหน้าถูกบล็อกในไฟล์ robots.txt ของเว็บไซต์ของคุณ นอกจากนี้ Google ไม่สามารถสร้างดัชนีหรือแสดงไฟล์ JS และ CSS ซึ่งถูกบล็อกหรือซ่อนอยู่ ลด JavaScript ในเนื้อหาหลักของหน้าโดยใช้วิธีการอื่นในการแสดงผลฝั่งไคลเอ็นต์ เช่น การแสดงผลฝั่งเซิร์ฟเวอร์ การแสดงผลแบบไดนามิก การแสดงผลแบบไฮบริด (การรวมฝั่งไคลเอ็นต์และฝั่งเซิร์ฟเวอร์)
ลิงค์ หากบางลิงก์เป็นลิงก์ภายในหรือ JavaScript สร้างลิงก์ไปยัง URL เมื่อผู้ใช้คลิกที่ลิงก์ Google จะไม่สามารถค้นพบลิงก์ดังกล่าวได้ ใช้ลิงก์สมอกับแอตทริบิวต์ href ซึ่งเป็นข้อความอธิบายสำหรับลิงก์ ลิงก์หลอกเช่นแท็ก <div> และ <span> ไม่ได้รับการรวบรวมข้อมูล
ข้อมูลเมตา เว้นแต่ไซต์จะใช้แพ็คเกจ Node.js เช่น vue-meta เครื่องมือค้นหาอาจรวบรวมข้อมูลเหมือนกันหรือแย่กว่านั้นคือไม่มีข้อมูลเมตาสำหรับการดูหรือหน้าแต่ละครั้ง ใช้แพ็คเกจ Node.js เช่น react-helmet, vue-meta, react-meta-tags
รูปภาพที่ขี้เกียจโหลด โปรแกรมรวบรวมข้อมูลของเครื่องมือค้นหาไม่เลือกเนื้อหาใด ๆ ที่ทำเครื่องหมายสำหรับการโหลดแบบ Lazy Loading เสิร์ชเอ็นจิ้นไม่สามารถเลื่อนดูเนื้อหาได้ ดังนั้นเนื้อหาบางส่วนจึงอาจไม่แสดงผล ใช้ IntersectionObserver API ซึ่งเข้าใจการ มองเห็น และ ตำแหน่ง ขององค์ประกอบ DOM เมื่อพร้อมใช้งาน คุณยังสามารถใช้คุณสมบัติการโหลดแบบ Lazy Loading ดั้งเดิมของเบราว์เซอร์ (Chrome)
เวลาในการโหลดหน้า หน้าที่มีเนื้อหา JavaScript จำนวนมากอาจโหลดช้า ซึ่งอาจส่งผลต่ออันดับการค้นหา เพิ่มโค้ด JS ที่สำคัญแบบอินไลน์และเลื่อนโค้ด JS ที่ไม่สำคัญออกไปจนกว่าจะแสดงผลเนื้อหาหลัก โดยลดโค้ด JS โดยรวมลง

แนวทางปฏิบัติที่ดีที่สุดสำหรับ JavaScript SEO

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

เพิ่มลิงค์และรูปภาพตามมาตรฐานเว็บที่กำหนด

เพิ่มลิงก์ทั้งหมดโดยใช้แท็ก ahref แทน onclick , #pageurl หรือ window.location.href='/page-url Google สามารถรวบรวมข้อมูลลิงก์และติดตามได้อย่างง่ายดาย

 <a href=”http://geekflare.com”>Welcome to Geek world</a>

วิธีเดียวกัน เพิ่มรูปภาพโดยใช้แท็ก img src ไม่ใช่แท็ก img data-src :

 <img src=”myimg.png” />

ชอบการแสดงผลฝั่งเซิร์ฟเวอร์

ตรวจสอบให้แน่ใจว่าเนื้อหาเว็บไซต์ของคุณพร้อมใช้งานบนเซิร์ฟเวอร์นอกเหนือจากเบราว์เซอร์ของผู้ใช้

ตรวจสอบให้แน่ใจว่า HTML ที่แสดงผลของคุณมีเนื้อหาสำคัญทั้งหมดที่คุณต้องการแสดง

HTML ที่แสดงผลควรมีชื่อที่ถูกต้อง เมตาโรบ็อต คำอธิบายเมตา รูปภาพ ข้อมูลที่มีโครงสร้าง และแท็กบัญญัติ

ทำให้เว็บไซต์ JavaScript ของคุณเป็นมิตรกับ SEO

รหัสจาวาสคริปต์

ในการทดสอบการใช้งาน JavaScript SEO บนหน้าเว็บของคุณ คุณสามารถทำตามขั้นตอนด้านล่าง:

  • รู้ว่าเว็บไซต์ของคุณใช้ JavaScript มากแค่ไหน: สำหรับสิ่งนี้ คุณสามารถปิดการใช้งาน JavaScript บนเบราว์เซอร์ของคุณ หากคุณไม่เห็นเนื้อหามากนัก แสดงว่าเว็บไซต์ของคุณอาศัย JavaScript เป็นส่วนใหญ่
  • ตรวจสอบว่า Googlebot ได้รับเนื้อหาและแท็กที่สำคัญทั้งหมดหรือไม่: คุณสามารถใช้เครื่องมือทดสอบที่เหมาะกับอุปกรณ์เคลื่อนที่ของ Google หรือเครื่องมือทดสอบผลการค้นหาที่เป็นสื่อสมบูรณ์เพื่อตรวจสอบว่า Googlebot ใช้ HTML ดิบเพื่อแสดงเนื้อหาอย่างไร
  • คุณยังสามารถใช้ส่วนขยายของ Chrome เช่น ดูแหล่งที่มาที่แสดงผล เพื่อทำความเข้าใจว่า JavaScript เปลี่ยนแปลงหน้าอย่างไรและเปรียบเทียบ HTML ต้นทางกับหน้าที่แสดง
  • คุณสามารถตรวจสอบแท็กที่สำคัญ (ชื่อ คำอธิบายเมตา ฯลฯ) บน HTML ที่แสดงผลได้โดยใช้ส่วนขยาย SEO Pro Chrome

บทสรุป

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

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

คุณอาจตรวจสอบวิธีที่ดีที่สุดในการลดเวลาในการโหลดเว็บไซต์