alt text คืออะไร? วิธีเขียน alt text ภาษาไทยให้ดีต่อ SEO

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

บทความนี้เน้นที่ตัว alt text โดยตรง ได้แก่ ความหมาย ความต่างจาก title วิธีเขียนให้ดีทั้งภาษาไทยและภาษาอังกฤษ รูปไหนต้องมีหรือไม่ต้องมี ความยาวที่เหมาะสม และตำแหน่งที่ต้องใส่ใน WordPress กับ Shopify ส่วนเรื่องการทำให้รูปติดอันดับใน Google Image Search ทั้งระบบ เช่น ชื่อไฟล์ ขนาดไฟล์ และ sitemap รูปภาพ มีอธิบายแยกไว้ในบทความ SEO รูปภาพของเราอีกบทความหนึ่ง

alt text คืออะไร และทำงานอย่างไรในโค้ด

ในโค้ด HTML รูปภาพหนึ่งรูปเขียนด้วยแท็ก img ซึ่งมี attribute สองตัวที่สำคัญที่สุดคือ src ที่บอกตำแหน่งไฟล์ และ alt ที่บอกว่ารูปนั้นคืออะไร ตัวอย่างเช่น

<img src="tom-yum-goong.jpg" alt="ต้มยำกุ้งน้ำข้นในชามดินเผา โรยใบผักชีฝรั่ง">

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

• โปรแกรมอ่านหน้าจอ เช่น VoiceOver บน iPhone และ Mac, TalkBack บน Android หรือ NVDA บน Windows จะอ่าน alt ออกเสียงเมื่อเลื่อนมาถึงรูป
• เมื่อรูปโหลดไม่สำเร็จ เพราะลิงก์เสีย เน็ตช้า หรือผู้ใช้ปิดการแสดงรูป เบราว์เซอร์จะแสดงข้อความ alt ไว้ตรงตำแหน่งของรูปแทน
• เครื่องมือค้นหาอ่าน alt ร่วมกับข้อความรอบๆ รูปและการวิเคราะห์ภาพ เพื่อตัดสินว่ารูปนั้นเกี่ยวกับอะไร และควรแสดงในผลการค้นหาแบบไหน

ในด้านมาตรฐานการเข้าถึงเว็บ WCAG ข้อ 1.1.1 Non-text Content ระดับ A กำหนดให้เนื้อหาที่ไม่ใช่ข้อความทุกชิ้นต้องมีข้อความทางเลือกที่ทำหน้าที่เดียวกัน ระดับ A คือระดับพื้นฐานที่สุด หมายความว่าเว็บที่ไม่มี alt text ให้รูปที่มีความหมาย ไม่ผ่านเกณฑ์การเข้าถึงขั้นต่ำ

alt text กับ alt tag และ title ต่างกันอย่างไร

คำว่า alt tag เป็นคำที่คนใช้กันจนติดปาก แต่ในทางเทคนิคไม่ถูกต้อง alt ไม่ใช่แท็ก มันเป็น attribute ที่อยู่ข้างในแท็ก img ดังนั้นเมื่อมีคนพูดถึง alt tag, alt attribute หรือ alt text ส่วนใหญ่หมายถึงสิ่งเดียวกัน คือข้อความในช่อง alt

ส่วน title เป็น attribute อีกตัวหนึ่งที่ทำงานต่างกันชัดเจน

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

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

ทุกรูปต้องมี alt ไหม

คำตอบคือทุกแท็ก img ควรมี attribute alt เสมอ แต่ไม่ใช่ทุกรูปที่ต้องมีข้อความข้างใน หลักการแบ่งตามหน้าที่ของรูปมีดังนี้

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

ความต่างระหว่าง alt ว่างกับการไม่มี alt เลยสำคัญมาก ถ้าไม่ใส่ attribute alt เลย โปรแกรมอ่านหน้าจอบางตัวจะอ่านชื่อไฟล์แทน ผู้ใช้จึงอาจได้ยินอะไรอย่าง "IMG ขีดล่าง 4 5 8 2 จุด JPG" ซึ่งไม่มีประโยชน์และน่ารำคาญ alt="" จึงเป็นการตัดสินใจโดยตั้งใจว่ารูปนี้ไม่ต้องอ่าน ส่วนการไม่ใส่คือการลืม

เขียน alt text ภาษาไทยอย่างไรให้ดีต่อ SEO และการเข้าถึง

alt text ที่ดีตอบคำถามเดียว คือถ้าคุณต้องอธิบายรูปนี้ให้คนที่มองไม่เห็นฟังในประโยคเดียว คุณจะพูดว่าอะไร แนวทางที่ใช้ได้จริงมีดังนี้

1. เขียนเป็นภาษาเดียวกับหน้าเว็บ หน้าภาษาไทยใช้ alt ภาษาไทย หน้าภาษาอังกฤษใช้ alt ภาษาอังกฤษ โปรแกรมอ่านหน้าจอเลือกเสียงอ่านตามภาษาที่ประกาศไว้ในหน้า ถ้าหน้าเป็นภาษาไทยแต่ alt เป็นภาษาอังกฤษ เสียงอ่านอาจออกเสียงผิด
2. เริ่มจากสิ่งที่สำคัญที่สุดในภาพ บอกว่าภาพคืออะไรก่อน แล้วค่อยเพิ่มรายละเอียดที่ช่วยแยกภาพนี้ออกจากภาพอื่น เช่น สี วัสดุ มุมมอง หรือการกระทำ
3. เขียนตามบริบทของหน้า รูปเดียวกันอาจต้องใช้ alt ต่างกันตามหน้าที่วาง รูปเชฟกำลังผัดกะเพราในหน้าเมนูอาหาร ควรเน้นตัวเมนู แต่ในหน้ารับสมัครพนักงานครัว ควรเน้นที่คนและงานที่ทำ
4. ไม่ต้องขึ้นต้นด้วย "รูปภาพของ" หรือ "ภาพ" โปรแกรมอ่านหน้าจอบอกผู้ใช้อยู่แล้วว่านี่คือรูป การเขียนซ้ำทำให้ได้ยินคำว่ารูปสองครั้ง ยกเว้นเมื่อประเภทของภาพเป็นข้อมูลสำคัญ เช่น "ภาพวาดสีน้ำ" หรือ "ภาพหน้าจอ"
5. ใช้คำที่คนค้นหาจริง เมื่อมันอธิบายภาพได้ตรง ถ้ารูปคือรองเท้าวิ่งรุ่นหนึ่ง การเขียนชื่อรุ่นและสีลงไปทั้งตรงกับภาพและตรงกับสิ่งที่คนพิมพ์ค้นหา ไม่จำเป็นต้องยัดคำค้นหาเพิ่ม
6. ไม่ใส่ข้อมูลที่ไม่มีในภาพ เช่น ราคา โปรโมชั่น หรือคำโฆษณาที่ภาพไม่ได้แสดง สิ่งเหล่านั้นควรอยู่ในเนื้อหาของหน้า

ตัวอย่างเทียบให้เห็นความต่าง สมมติรูปสินค้าในร้านออนไลน์เป็นกระเป๋าผ้าทอมือสีคราม

• alt ที่อ่อน: "กระเป๋า"
• alt ที่ยัดคำ: "กระเป๋า กระเป๋าผ้า กระเป๋าผ้าราคาถูก กระเป๋าผ้าทอมือ ซื้อกระเป๋าออนไลน์"
• alt ที่ดี: "กระเป๋าสะพายผ้าฝ้ายทอมือย้อมคราม สายหนังสีน้ำตาล"

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

alt text ควรยาวเท่าไร

มาตรฐาน HTML และ WCAG ไม่ได้กำหนดจำนวนตัวอักษรสูงสุดของ alt ไว้ ตัวเลขประมาณ 125 ตัวอักษรที่เห็นในหลายคู่มือเป็นแนวปฏิบัติที่ส่งต่อกันมา ไม่ใช่กฎ สิ่งที่ควรยึดคือความกระชับ ส่วนใหญ่แล้วประโยคเดียวหรือวลีเดียวก็พอ เพราะผู้ใช้โปรแกรมอ่านหน้าจอต้องฟังทุกคำ และหยุดกลางคำบรรยายยาวๆ ได้ยาก

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

ใส่คีย์เวิร์ดใน alt ได้แค่ไหนก่อนเป็น keyword stuffing

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

หลักตัดสินง่ายๆ คือ

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

ใส่ alt text ใน WordPress และ Shopify ตรงไหน

WordPress มีสองที่หลัก ที่แรกคือคลังสื่อ (Media Library) เมื่อคลิกที่รูป จะมีช่อง Alternative Text อยู่ด้านขวา ค่าที่ใส่ตรงนี้จะเป็นค่าเริ่มต้นเมื่อแทรกรูปนั้นลงในหน้าใหม่ ที่ที่สองคือในตัวแก้ไขบล็อก เมื่อคลิกบล็อกรูปภาพ จะมีช่อง Alternative text ในแถบตั้งค่าด้านข้าง ข้อควรรู้คือ การแก้ alt ในคลังสื่อภายหลัง มักไม่ย้อนไปเปลี่ยนรูปที่แทรกไว้ในหน้าเก่าแล้ว ต้องเข้าไปแก้ในแต่ละหน้า ส่วนรูปที่แสดงผ่านธีมหรือปลั๊กอินสร้างหน้า อาจดึง alt จากคลังสื่อหรือมีช่องของตัวเอง ให้ตรวจผลจริงในหน้าเว็บ

Shopify สำหรับรูปสินค้า ให้เข้าไปที่หน้าสินค้าในระบบหลังบ้าน คลิกที่รูปในส่วนสื่อ (Media) แล้วเลือกเพิ่มหรือแก้ไข alt text สำหรับรูปในบทความบล็อกหรือหน้าเพจ ให้คลิกรูปในตัวแก้ไขข้อความแล้วแก้ข้อความทางเลือก ส่วนรูปในส่วนต่างๆ ของธีม เช่น แบนเนอร์หน้าแรก ขึ้นอยู่กับธีมว่าเปิดช่อง alt ให้หรือไม่ บางธีมใช้ alt จากคลังไฟล์ บางธีมไม่ส่ง alt ออกไปเลย

ไม่ว่าจะใช้ระบบไหน วิธีตรวจที่แน่นอนที่สุดคือคลิกขวาที่รูปบนหน้าเว็บจริง เลือกตรวจสอบ (Inspect) แล้วดูว่าในแท็ก img มี alt และข้อความตรงตามที่ตั้งใจหรือไม่

ตารางสรุป: ประเภทรูปและ alt ที่ควรใส่

alt text บนเว็บไซต์ภาษาไทย: เรื่องที่ควรรู้

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

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

คำถามที่พบบ่อยเกี่ยวกับ alt text

alt text ช่วยให้ติดอันดับ Google ได้จริงไหม

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

ถ้าใส่ alt ว่างให้รูปตกแต่ง จะเสียคะแนน SEO ไหม

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

alt text กับชื่อไฟล์รูปต้องเหมือนกันไหม

ไม่จำเป็น ชื่อไฟล์ควรสั้นและสื่อความหมาย ไม่ใช่ชื่อทั่วไปอย่าง image1.jpg และ Google แนะนำให้แปลชื่อไฟล์ด้วยเมื่อทำรูปหลายภาษา ส่วน alt ควรเป็นประโยคบรรยายภาพในภาษาของหน้านั้น ทั้งสองอย่างควรพูดถึงเรื่องเดียวกัน แต่ไม่ต้องเป็นข้อความเดียวกัน

ใช้ AI สร้าง alt text อัตโนมัติได้ไหม

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

alt text เป็นงานเล็กที่ทำซ้ำได้ทุกครั้งที่อัปโหลดรูป แต่บนเว็บที่มีรูปหลายพันรูป การตามแก้ย้อนหลังต้องมีระบบ ถ้าต้องการให้ตรวจว่ารูปบนเว็บไซต์ขาด alt หรือใส่ผิดรูปแบบตรงไหนบ้าง ดู บริการตรวจ SEO เว็บไซต์ (SEO Audit) สำหรับร้านค้าออนไลน์ที่มีรูปสินค้าจำนวนมาก ดูได้ที่ บริการ SEO สำหรับ E-commerce และ SEO สำหรับ Shopify หรือถ้าต้องการวางแผน SEO ทั้งเว็บไซต์ ดู บริการ SEO