Alt Text สำคัญอย่างไร:เพิ่มประสิทธิภาพ SEO ทุกครั้งที่ใส่ภาพ

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

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

Alt Text คืออะไร?

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

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

ทำไม Alt Text ถึงสำคัญ?

1. เพื่อการเข้าถึงของผู้ใช้ทุกกลุ่ม (Accessibility)

Alt Text ช่วยให้ผู้ใช้ที่มีความบกพร่องทางการมองเห็นสามารถรับรู้เนื้อหาในภาพได้ผ่านโปรแกรม screen reader รวมถึงผู้ที่ใช้การเชื่อมต่อช้า ภาพไม่แสดง ก็ยังเข้าใจเนื้อหาได้อยู่ดี

ที่สำคัญ หากเว็บไซต์ไม่มี Alt Text ที่เหมาะสม อาจละเมิดกฎหมายด้านความเท่าเทียมในการเข้าถึง เช่นกฎหมาย ADA (Americans with Disabilities Act) หรือกฎหมายลักษณะเดียวกันในสหภาพยุโรป แคนาดา เกาหลีใต้ และออสเตรเลีย ซึ่งอาจนำไปสู่บทลงโทษทางกฎหมายได้

2. เพื่อประสิทธิภาพในการค้นหาของ SEO

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

การเขียน Alt Text ที่ดีควร:

• อธิบายภาพให้ชัดเจน กระชับ
• สอดคล้องกับเนื้อหาบนหน้านั้น
• ใส่คีย์เวิร์ดแบบพอดี ไม่ยัดเยียด

ตัวอย่างที่ควรหลีกเลี่ยง:

alt="ลูกแมวน่ารักกำลังเล่นไหมพรม ลูกแมวขนนุ่ม ลูกแมวขี้เล่น ภาพลูกแมวน่ารัก ลูกแมวขาย รูปลูกแมว"

ตัวอย่างที่ดีควรเป็น:

alt="ลูกแมวขนฟูนอนเล่นไหมพรมสีแดงบนพรมห้องนั่งเล่น"

ภาพแบบไหนที่ควร (หรือไม่ควร) มี Alt Text?

ไม่ใช่ทุกภาพต้องใส่ Alt Text เพราะหากใส่โดยไม่จำเป็น อาจทำให้ผู้ใช้ screen reader รู้สึกเกะกะได้ มาดูกันว่าแต่ละประเภทควรเขียนอย่างไร:

ภาพให้ข้อมูล (Informative images)

ภาพที่สื่อสารเนื้อหา เช่น ภาพประกอบบทความ ภาพผลิตภัณฑ์ ควรมีคำอธิบายสั้น ๆ ที่ช่วยให้เข้าใจสิ่งที่ภาพสื่อ

ตัวอย่าง:

alt="โลโก้ของบริการที่เชื่อมต่อกับ P2 ได้แก่ Crowdsignal, Figma, Twitter, GitHub, YouTube, Vimeo, Google Calendar และ Loom"

ภาพตกแต่ง (Decorative images)

ถ้าภาพมีไว้เพื่อความสวยงามเท่านั้น ไม่ต้องใส่คำอธิบาย ใช้แค่ alt="" เพื่อให้ screen reader ข้ามไปได้เลย

ภาพที่ทำหน้าที่เป็นปุ่มหรือลิงก์ (Functional images)

Alt Text ควรระบุ "สิ่งที่ปุ่มทำงาน" ไม่ใช่ลักษณะของภาพ

ตัวอย่าง:

alt="ดูวิดีโอเกี่ยวกับพฤติกรรมการจำศีลของผึ้งบน Vimeo"

ภาพที่มีข้อความ (Images of text)

Alt Text ควรระบุข้อความในภาพให้เหมือนกัน เช่น โลโก้หรือคำคม

ภาพซับซ้อน (Complex images)

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

กลุ่มภาพ (Groups of images)

หากภาพหลายภาพร่วมกันสื่อแนวคิดเดียวกัน ให้ใช้ Alt Text กับภาพหลักเพื่อครอบคลุมทั้งชุด เช่น ภาพขั้นตอนทำอาหาร

แผนที่ภาพ (Image maps)

ควรใส่ Alt Text ทั้งภาพหลักและจุดที่คลิกได้ เพื่อระบุว่าแต่ละจุดนำไปที่ไหน

หากไม่แน่ใจว่าภาพควรเขียนอย่างไร ดูได้ที่: W3 Images Tutorial (เว็บไซต์ภาษาอังกฤษ)

เคล็ดลับ: พยายามให้ Alt Text ไม่เกิน 140 ตัวอักษร เพื่อไม่ให้ยืดยาวเกินไปสำหรับผู้ใช้อุปกรณ์ช่วยอ่าน

เครื่องมือที่ช่วยจัดการ Alt Text ให้ครบ

Chrome Accessibility Report

มีให้ใช้ในเบราว์เซอร์ Chrome ทดสอบความสามารถในการเข้าถึงของหน้าเว็บได้รวดเร็ว

Alt Text Tools (จากทีม NerdPress)

ปลั๊กอินฟรี ใช้งานง่าย สร้างไฟล์ CSV แสดงภาพและ Alt Text ที่ใช้ในเว็บไซต์ พร้อมลิงก์ไปแก้ไขโพสต์นั้นได้โดยตรง

Equalize Digital Accessibility Checker

ปลั๊กอินแบบฟรี + เสียเงิน (freemium) ที่ช่วยวิเคราะห์ปัญหาการเข้าถึงมากกว่าแค่เรื่อง Alt Text เหมาะกับเว็บไซต์ที่ให้ความสำคัญกับการเข้าถึงอย่างจริงจัง

Equalize Digital ยังมีชุมชน Facebook และจัดมีตติ้งออนไลน์สำหรับนักพัฒนา WordPress และผู้ใช้งานทั่วไปที่สนใจเรื่องการออกแบบเว็บไซต์ให้ทุกคนใช้งานได้

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

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