Alt text: คำอธิบายภาพเพื่อ SEO และการเข้าถึง

Alt text คืออะไร?

Alt text เป็นข้อความสั้นที่ใส่ในแอตทริบิวต์ alt ของแท็ก <img> เพื่ออธิบายเนื้อหาหรือหน้าที่ของภาพในหน้า HTML ตัวอย่างโค้ด: <img src="/images/product.jpg" alt="รองเท้าวิ่งสีดำพร้อมพื้นรองเท้ายาง">

ทำไม alt text จึงสำคัญสำหรับ SEO

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

Alt text ทำงานอย่างไร

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

ประเภทของ alt text

ภาพเชิงบรรยาย — อธิบายเนื้อหาของภาพอย่างชัดเจน (เช่น “ผู้หญิงกำลังวิ่งบนเส้นทางเท้าในสวน”)

ภาพเชิงหน้าที่ — เมื่อตัวภาพทำหน้าที่เชิงโต้ตอบ เช่น เป็นลิงก์ ควรอธิบายหน้าที่หรือปลายทาง (เช่น “ไปที่หน้ารายละเอียดรองเท้าวิ่ง”)

ภาพตกแต่ง — หากภาพเป็นเพียงองค์ประกอบตกแต่งและไม่มีข้อมูลสำคัญ ให้ใช้ alt="" และพิจารณาเพิ่ม role="presentation" หรือ aria-hidden เมื่อเหมาะสม

เริ่มต้นกับ alt text

แนวทางปฏิบัติพื้นฐานเมื่อเขียน alt text:

- เขียนให้กระชับและมีข้อมูลเชิงบริบทที่จำเป็นต่อความเข้าใจของภาพ

- หลีกเลี่ยงการยัดคีย์เวิร์ดหรือการซ้ำข้อความเดิม ๆ ในภาพหลายภาพ

- หากภาพเป็นลิงก์ ให้ alt อธิบายจุดหมายของลิงก์ไม่ใช่แค่ลักษณะภาพ

- สำหรับภาพตกแต่ง ให้ใช้ alt="" เพื่อไม่รบกวนผู้ใช้สกรีนรีดเดอร์

ข้อผิดพลาดทั่วไปกับ alt text

1) ใช้ชื่อไฟล์แทนคำอธิบาย — เช่น alt="IMG_1234.jpg" ให้เขียนคำอธิบายที่มีความหมายแทน 2) ยัดคีย์เวิร์ดหรือเขียนยาวเกินความจำเป็น 3) ลืมใส่ alt สำหรับภาพที่มีข้อมูลสำคัญ 4) ใส่ alt เมื่อภาพเป็นเพียงการตกแต่ง (ควรเป็น alt="") 5) ไม่อัพเดต alt เมื่อเนื้อหาภาพเปลี่ยน

Alt text ตรวจสอบ: รายการตรวจสอบทางเทคนิค

**HTML ไฟล์** — ที่ไหนตรวจสอบ — ผ่านเมื่อ element <img> มีแอตทริบิวต์ alt ที่เหมาะสม

**Mobile parity** — ที่ไหนตรวจสอบ — ตรวจสอบใน Chrome DevTools (Device toolbar) หรือด้วย Googlebot Smartphone; ผ่านเมื่อ alt ปรากฏในเวอร์ชันมือถือของหน้าตามที่ผู้ใช้เห็น

**Accessibility** — ที่ไหนตรวจสอบ — ทดสอบด้วยสกรีนรีดเดอร์ (NVDA, VoiceOver) หรือเครื่องมือตรวจสอบเช่น axe/Lighthouse; ผ่านเมื่อสกรีนรีดเดอร์อ่าน alt อย่างที่ตั้งใจ

**Indexing signal** — ที่ไหนตรวจสอบ — สำหรับหน้าที่คุณเป็นเจ้าของ ใช้ Google Search Console URL Inspection; ผ่านเมื่อหน้าและภาพถูกจัดทำดัชนีตามความคาดหมาย (GSC ใช้ได้เฉพาะโดเมนที่คุณเป็นเจ้าของ)

คำสั่งเครื่องมือที่เป็นประโยชน์

curl เพื่อดู HTML ที่เซิร์ฟเวอร์ส่งกลับ: ใช้ curl -A "Mozilla/5.0" https://example.com/page เพื่อดึง HTML เต็มๆ (อย่าใช้ -I หากต้องดู body) Chrome DevTools Elements เพื่อดู DOM ที่เรนเดอร์แล้ว Lighthouse หรือ axe เพื่อประเมินการเข้าถึง Google Search Console URL Inspection สำหรับตรวจสถานะการจัดทำดัชนีของหน้า (เฉพาะโดเมนตัวเอง)

หมายเหตุ: Google ใช้เวอร์ชันมือถือเป็นฐานหลักสำหรับการครอว์ลิงและการจัดทำดัชนี; ตั้งแต่กรกฎาคม 2024 Googlebot Smartphone ถูกใช้เป็นค่าเริ่มต้น ดังนั้นให้ตรวจว่า alt text มีในเวอร์ชันมือถือด้วย

อ่านคู่มือ Technical SEO

คำถามที่พบบ่อย

SEO ทางเทคนิคเป็นส่วนหนึ่งของการเติบโตแบบออร์แกนิก การสร้างอำนาจเชิงหัวข้อต้องการลิงก์คุณภาพจากแหล่งที่เกี่ยวข้อง: สร้างความน่าเชื่อถือด้วย backlinks คุณภาพ