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

เว็บไซต์สมัยใหม่ส่วนใหญ่มี 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 สำหรับการรวบรวมข้อมูล

แก้ไขข้อผิดพลาด Sea of Thieves ไม่ดาวน์โหลด

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 ซึ่งเป็นข้อความอธิบายสำหรับลิงก์ ลิงก์หลอกเช่นแท็ก

และ ไม่ได้รับการรวบรวมข้อมูล
ข้อมูลเมตา
เว้นแต่ไซต์จะใช้แพ็คเกจ 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

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

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

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

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

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

<img src=”myimg.png” />

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

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

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

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