วิธีใช้ตัวตรวจสอบความถูกต้องของ W3C เพื่อปรับปรุง SEO

ในฐานะนักพัฒนาเว็บ คุณจะต้องตรวจสอบให้แน่ใจว่าโค้ดของคุณสะอาด ถูกต้อง และเข้าถึงได้ นอกจากนี้ยังช่วยเพิ่มประสิทธิภาพกลไกค้นหา (SEO) ของคุณได้อีกด้วย โชคดีที่คุณสามารถใช้ตัวตรวจสอบความถูกต้องของ W3C เพื่อให้แน่ใจว่างานของคุณเป็นไปตามมาตรฐาน

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

การตรวจสอบ W3C คืออะไร?

W3C ย่อมาจาก World Wide Web Consortium และเป็นองค์กรระหว่างประเทศที่ดูแลมาตรฐานการเข้ารหัสทั่วทั้งเว็บ มีบริการตรวจสอบเพื่อช่วยคุณตรวจสอบว่าโค้ด HTML และ CSS ของคุณถูกต้องและปราศจากข้อผิดพลาด

โปรแกรมตรวจสอบ CSS เรียกว่า Jigsaw และจะตรวจสอบเนื้อหาของคุณกับมาตรฐานเว็บ W3C

โปรแกรมตรวจสอบ HTML ทำงานในลักษณะที่คล้ายกันมาก ตรวจสอบความถูกต้องของมาร์กอัปของเอกสารเว็บในรูปแบบ HTML, XHTML, SMIL, MathML เป็นต้น

ด้วยการปฏิบัติตามมาตรฐานเว็บเหล่านี้ คุณสามารถมั่นใจได้ว่าเนื้อหาของคุณเป็นมิตรกับผู้ใช้และเข้าถึงได้ เครื่องมือเหล่านี้จะช่วยคุณตรวจสอบความเข้ากันได้ข้ามแพลตฟอร์มของงานของคุณ สร้างประสบการณ์ผู้ใช้ (UX) ที่ดีขึ้น ในทางกลับกัน อาจปรับปรุงคะแนน Core Web Vitals และเพิ่ม SEO ของคุณ

วิธีตรวจสอบรหัสโดยใช้ W3C

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

ตรวจสอบโค้ด HTML

มาเริ่มกันที่เครื่องมือตรวจสอบ HTML คุณสามารถป้อน URI ของเอกสารที่คุณต้องการตรวจสอบ อัปโหลดไฟล์ที่มีรหัสของคุณ หรือป้อนมาร์กอัปที่คุณต้องการตรวจสอบลงในฟิลด์ที่ให้มา:

เมื่อคุณส่งเพจหรือเอกสารของคุณเพื่อตรวจสอบแล้ว โปรแกรมตรวจสอบจะสร้างรายการข้อผิดพลาดและคำเตือนทั้งหมดที่เชื่อมโยงกับโค้ด HTML:

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

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

โปรดทราบว่าหากหน้าของคุณมี JavaScript หรือ CSS โปรแกรมตรวจสอบ HTML จะไม่ตรวจสอบ สำหรับสิ่งนี้ คุณจะต้องใช้เครื่องมือ W3C Jigsaw สำหรับ CSS (ซึ่งเราจะกล่าวถึงในอีกสักครู่) หรือ JSHINT สำหรับ Javascript

ตรวจสอบ CSS

เครื่องมือตรวจสอบ CSS ทำงานในลักษณะเดียวกัน เมื่อคุณส่ง URI เอกสาร หรือมาร์กอัปเพื่อตรวจสอบ คุณจะได้รับหน้าที่มีข้อผิดพลาดและคำเตือน:

อย่างที่คุณเห็น ผลลัพธ์ของทั้ง CSS และ HTML นั้นค่อนข้างละเอียด มาสำรวจวิธีตีความกัน

วิธีตีความผลลัพธ์ของตัวตรวจสอบความถูกต้อง

ดังที่เราได้เห็นแล้ว ผู้ตรวจสอบความถูกต้องสร้างผลลัพธ์ที่แตกต่างกันสองแบบ: ข้อผิดพลาดและคำเตือน คุณมักจะเพิกเฉยต่อคำเตือนได้ เนื่องจากไม่ได้เน้นย้ำถึงปัญหาร้ายแรงใดๆ อย่างไรก็ตาม การเผยแพร่เนื้อหาที่ปราศจากข้อผิดพลาดถือเป็นแนวทางปฏิบัติที่ดี

ทั้งข้อผิดพลาดและคำเตือนแสดงหมายเลขบรรทัดที่มีปัญหาของคุณ พวกเขายังให้คำแนะนำเกี่ยวกับวิธีการแก้ไขปัญหา:

หากคุณคลิกลิงก์ที่มีข้อผิดพลาดหรือคำเตือน (เช่น จากบรรทัดที่ 1 คอลัมน์ 16 ถึงบรรทัดที่ 2 คอลัมน์ที่ 16) โปรแกรมตรวจสอบจะเน้นบรรทัดที่เกี่ยวข้องในโค้ด:

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

ข้อผิดพลาดในการตรวจสอบ W3C ทั่วไป

ทั้งตัวตรวจสอบ CSS และ HTML จะเน้นข้อผิดพลาดในโค้ดของคุณ ปัญหาที่พบบ่อยที่สุดบางส่วน ได้แก่ :

• องค์ประกอบที่ไม่เปิดเผย การเพิ่มองค์ประกอบใหม่ในหน้าต้องมีแท็กเปิดและปิด เมื่อคุณได้รับข้อผิดพลาดนี้ แสดงว่าคุณยังไม่ได้รวมแท็กปิด นี่เป็นปัญหาทั่วไปเมื่อทำงานกับกริด
• ไม่มีแท็ก alt ทุกภาพต้องมีแท็ก alt ที่จะแสดงหากไม่สามารถโหลดกราฟิกได้ มันอธิบายรูปภาพและโปรแกรมอ่านหน้าจอจะอ่านออกมา การเพิ่มแท็ก alt เป็นข้อกำหนดในการเข้าถึงที่จำเป็น
• การใช้แท็กหัวเรื่องไม่ถูกต้อง ปัญหา CSS นี้เกิดขึ้นเมื่อนักพัฒนาใช้แท็ก <h> เป็นลักษณะแบบอักษรสำหรับหัวข้อย่อยเฉพาะ แท็กได้รับการออกแบบสำหรับการนำทางมากกว่าวัตถุประสงค์เชิงโวหาร ดังนั้นหัวข้อย่อยที่ไม่ใช่การนำทางควรกำหนดขนาดโดยใช้แอตทริบิวต์ font:size=#

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

นี่คือตัวอย่างหนึ่งของข้อผิดพลาดในการแยกวิเคราะห์:

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

วิธีแก้ไขข้อผิดพลาดทั่วไป

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

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

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

บทสรุป

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

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

คุณมีคำถามใด ๆ เกี่ยวกับการใช้ตัวตรวจสอบความถูกต้องของ W3C หรือไม่? แจ้งให้เราทราบในส่วนความคิดเห็นด้านล่าง!

ภาพเด่นโดย Chaosamran_Studio / shutterstock.com