Alt Text คืออะไร เขียนคำอธิบายรูปอย่างไรให้เข้าถึงได้และช่วย SEO

มองเรื่องนี้ให้ครบก่อนลงมือจากคำที่คนค้นหา ไปสู่หน้าที่ช่วยตัดสินใจ

1. 01คำค้น
2. 02คำตอบ
3. 03หลักฐาน
4. 04ทางไปต่อ

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

Alt Text ช่วยอะไร

• Screen reader อ่านความหมายหรือหน้าที่ของภาพ
• ผู้ใช้ยังเข้าใจเมื่อภาพโหลดไม่สำเร็จหรือใช้การเชื่อมต่อช้า
• Google ใช้ Alt text ร่วมกับ Computer vision และเนื้อหารอบภาพเพื่อเข้าใจหัวข้อภาพ
• ภาพที่เป็นลิงก์ใช้ Alt เป็นส่วนหนึ่งของ Anchor text
• ทีมตรวจได้ว่าข้อมูลสำคัญไม่ได้อยู่ในภาพเพียงอย่างเดียว

Accessibility เป็นเป้าหมายหลัก SEO เป็นประโยชน์ร่วม ห้ามยัด Keyword จน Alt ไม่เป็นธรรมชาติ

เริ่มจากถามว่า “ถ้าเอาภาพออก ข้อมูลอะไรหาย”

ประเภทภาพ	วิธีเขียน
ให้ข้อมูล	อธิบายสารสำคัญที่ภาพเพิ่มให้บริบท
ตกแต่ง	ใช้ alt="" ให้ Screen reader ข้าม
ปุ่ม/ลิงก์	บอกการกระทำหรือปลายทาง ไม่บอกรูปร่างไอคอน
มีข้อความในภาพ	ส่งต่อข้อความนั้น หากข้อความเดียวกันมีอยู่ติดกันอาจใช้ Alt ว่าง
กราฟ/แผนภาพ	Alt สรุปสั้นและให้รายละเอียด/ข้อมูลเทียบเท่าในหน้า
ภาพหลายภาพสื่อเรื่องเดียว	อธิบายกลุ่มอย่างไม่ซ้ำทุกภาพ

วิธีเขียน Alt Text ทีละขั้น

1. อ่านหัวข้อและย่อหน้ารอบภาพก่อน
2. ระบุหน้าที่: ให้ข้อมูล ตกแต่ง ควบคุม หรือข้อมูลซับซ้อน
3. เขียนสิ่งสำคัญที่สุดก่อน
4. ใช้คำเฉพาะที่จำเป็นต่อความเข้าใจ
5. ตัดคำซ้ำกับ Caption/ข้อความข้างเคียง
6. ตรวจว่าแทนภาพในบริบทได้หรือไม่
7. อ่านหน้าโดยปิดภาพหรือใช้ Screen reader
8. อัปเดต Alt เมื่อเปลี่ยนภาพหรือหน้าที่

ตัวอย่างตามบริบท

ภาพและบริบท	Alt ที่เหมาะ	เหตุผล
Screenshot Search Console ในขั้นตอนตรวจ Index	รายงาน Page indexing แสดง URL สถานะ Not indexed และเหตุผล Crawled – currently not indexed	บอกข้อมูลที่ผู้ใช้ต้องหาในหน้าจอ
ภาพเดียวกันใน Banner ตกแต่ง	alt=""	หัวข้อข้างภาพให้ข้อมูลครบแล้ว
ไอคอนแว่นขยายเป็นปุ่ม	ค้นหา	บอกการทำงาน ไม่ใช่ “รูปแว่นขยาย”
โลโก้ลิงก์กลับหน้าแรก	AJLinkOfficial หน้าแรก	บอกชื่อและปลายทาง
กราฟยอดขายรายเดือน	ยอดขายเพิ่มจากมกราคมถึงมีนาคม แล้วลดลงในเมษายน รายละเอียดอยู่ในตารางถัดไป	สรุปแนวโน้มและชี้ข้อมูลเต็ม
ภาพสินค้าในหน้าสินค้า	กระเป๋าสะพายผ้าแคนวาสสีกรม ช่องหน้ามีซิป	บอกลักษณะที่มีผลต่อการเลือก

สิ่งที่ไม่ควรเขียน

• alt="image", alt="photo" หรือชื่อไฟล์
• “รูปภาพของ…” ทุกภาพ เพราะ Screen reader แจ้งประเภท Element อยู่แล้ว
• Keyword ซ้ำ เช่น “รับทำ SEO SEO กรุงเทพ SEO ราคาถูก”
• คำบรรยายยาวทุกสิ่งที่ไม่เกี่ยวกับหน้าที่ภาพ
• Caption ซ้ำทั้งประโยคโดยไม่มีข้อมูลเพิ่ม
• Alt ว่างกับภาพที่เป็นปุ่มหรือมีข้อมูลสำคัญ
• ใส่ URL/เครดิตแทนความหมายภาพ

ภาพซับซ้อนต้องมีมากกว่า Alt

W3C แนะนำว่าเมื่อคำอธิบายสั้นไม่สามารถส่งต่อข้อมูลได้ครบ เช่น กราฟ Diagram แผนที่ หรือ Infographic ให้ใช้ Alt สั้นเพื่อระบุภาพและมี Long description หรือข้อมูลเทียบเท่าในหน้า

1. Alt บอกประเภทและข้อสรุปสำคัญ
2. Caption บอกบริบท/ช่วงเวลา/หน่วย
3. ย่อหน้าหรือตารางส่งต่อค่าที่จำเป็น
4. แหล่งข้อมูลและวิธีคำนวณปรากฏเป็นข้อความ
5. สีไม่ใช่วิธีเดียวในการแยกชุดข้อมูล

Screenshot Tutorial ควรเขียนอย่างไร

บอกสิ่งที่ผู้ใช้ต้องหาและตำแหน่งสัมพันธ์กับหน้าจอ ไม่ต้องไล่ทุกเมนู:

• “หน้า Settings ของ Meta Business Suite เปิดเมนู People ทางซ้ายและปุ่ม Add people ด้านขวาบน”
• “หน้า Export ของ CapCut เลือก Resolution 1080p และ Frame rate 30fps”
• “Google Search Console เมนู URL inspection แสดงสถานะ URL is on Google”

หาก UI เปลี่ยน ต้องอัปเดตภาพ Alt และขั้นตอนพร้อมกัน และอย่าใส่ข้อมูลบัญชี/บุคคลใน Screenshot

Alt Text กับ Caption และ Title ต่างกันอย่างไร

ส่วน	ใครเห็น	หน้าที่
Alt	Assistive technology/เมื่อภาพไม่แสดง	แทนความหมายหรือหน้าที่
Caption	ทุกคน	เพิ่มบริบท เครดิต หน่วย หรือคำอธิบาย
Filename	URL/ระบบ	จัดการไฟล์และให้สัญญาณเบาแก่ Search
Title attribute	อาจแสดง Tooltip บางกรณี	ไม่ใช้แทน Alt และไม่ควรพึ่งเป็นข้อมูลสำคัญ

ใส่ Alt Text ใน WordPress

1. เปิด Media Library หรือเลือก Image block
2. เลือกภาพที่ต้องการ
3. กรอกช่อง Alternative Text ตามหน้าที่ในหน้านั้น
4. ตรวจ Caption แยกหากต้องมีข้อมูลที่เห็นทุกคน
5. Update บทความและตรวจ HTML ว่ามี alt
6. เปิดหน้าจริงด้วย Keyboard/Screen reader

ภาพเดียวกันอาจต้องใช้ Alt ต่างกันเมื่อบริบทต่างกัน WordPress เก็บ Alt ระดับ Media แต่ทีมต้องตรวจการใช้จริงในแต่ละหน้า อย่าคัด Alt เดียวไปทุกบริบทโดยอัตโนมัติ

ระบบงานสำหรับเว็บไซต์ที่มีภาพจำนวนมาก

1. กำหนด Owner ของภาพและ Accessibility review
2. เพิ่มประเภทภาพ/หน้าที่ใน Brief
3. บังคับให้ผู้เขียนเลือก Informative/Decorative/Functional/Complex
4. ใช้ Automation ตรวจ Alt หาย ชื่อไฟล์ทั่วไป และ Alt ซ้ำจำนวนมาก
5. ให้คนตรวจความหมาย ไม่ใช้ AI สร้างแล้วเผยแพร่ทันที
6. สุ่มทดสอบ Screen reader ทุก Release
7. ติดตาม Page template ที่สร้าง Alt ผิดซ้ำ
8. แก้ที่ Component ก่อนแก้ทีละหน้า

ใช้ AI ช่วยเขียน Alt ได้ไหม

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

• ภาพ
• หัวข้อและย่อหน้ารอบภาพ
• งานที่ผู้ใช้กำลังทำ
• ประเภทภาพและข้อมูลที่ต้องส่งต่อ
• คำเฉพาะที่ยืนยันแล้ว

ห้ามให้ AI เดาเชื้อชาติ สุขภาพ อายุ หรือข้อมูลอ่อนไหวจากรูปลักษณ์

ตรวจ SEO ของรูปภาพร่วมกัน

• Filename สั้นและอธิบายภาพ
• วางภาพใกล้ข้อความที่เกี่ยวข้อง
• Alt เป็นธรรมชาติและตรงบริบท
• ขนาด/Format เหมาะและไม่ทำให้ Core Web Vitals เสีย
• Width/height ช่วยลด Layout shift
• ภาพสำคัญ Crawl ได้และไม่ได้ซ่อนหลัง Interaction ที่ Search เข้าไม่ถึง
• Caption/Structured data ตรงกับเนื้อหาที่มองเห็น
• ไม่ใช้ภาพแทนข้อความหลัก

Checklist ก่อนเผยแพร่

• ภาพทุกภาพถูกจัดประเภทตามหน้าที่
• ภาพให้ข้อมูลมี Alt ที่ส่งต่อสารสำคัญ
• ภาพตกแต่งใช้ alt="" ไม่ลบ Attribute
• ภาพลิงก์/ปุ่มบอกการทำงาน
• กราฟมีข้อมูลเทียบเท่าในข้อความ/ตาราง
• ไม่มี Keyword stuffing/ชื่อไฟล์/คำว่า image
• ไม่ซ้ำ Caption โดยไม่จำเป็น
• เปลี่ยนภาพแล้วอัปเดต Alt
• ทดสอบ Keyboard/Screen reader/ปิดภาพ
• มือถือไม่มีข้อความหรือภาพล้น

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

Alt Text ควรยาวกี่ตัวอักษร

ไม่มีจำนวนตายตัว ให้สั้นที่สุดที่ส่งต่อหน้าที่ได้ หากต้องอธิบายยาวให้ใช้ข้อความหรือ Long description ในหน้า

ภาพทุกภาพต้องมีคำอธิบายหรือไม่

Element img ควรมี Alt attribute แต่ภาพตกแต่งใช้ค่า Alt ว่าง เพื่อให้ Assistive technology ข้าม

ใส่ Keyword ใน Alt ได้ไหม

ใส่เมื่อคำนั้นอธิบายภาพตามธรรมชาติ Google แนะนำให้เขียนข้อมูลที่มีประโยชน์และตรงบริบท ไม่ยัด Keyword

แหล่งอ้างอิง

• W3C WAI: Alt Decision Tree
• W3C WAI: Images Tutorial
• W3C: Understanding WCAG 2.2 Non-text Content
• Google Search Central: Image SEO best practices

อ่านต่อ: ทำความเข้าใจ SEO สำหรับธุรกิจ, ตรวจ Internal Link และอ่าน วิธีใช้ Google Search Console

ผู้เขียน: อาจารย์หลิง ณิชชา ทัตพงษ์พฤธา ผู้ก่อตั้ง AJLinkOfficial และบริษัท อินดิจิทัล จำกัด เรียบเรียงเรื่อง AI และ Digital Marketing ให้เชื่อมกับการตัดสินใจและการทำงานของธุรกิจ