Visual AIO วิธีตั้งชื่อไฟล์รูปและเขียน Alt Text ให้ AI ดึงไปแสดงผล

ร้านเฟอร์นิเจอร์ออนไลน์แห่งหนึ่งอัปโหลดรูปสินค้าขึ้นเว็บเดือนละสองร้อยกว่ารูป ทุกรูปถ่ายสวย แสงดี ตัดพื้นหลังเรียบร้อย แต่ชื่อไฟล์เป็น IMG_4821.jpg บ้าง final-final-2.png บ้าง และช่อง alt text ว่างเปล่าทั้งหมดเพราะทีมที่อัปโหลดไม่เคยรู้ว่าช่องนั้นมีไว้ทำอะไร พอมีคนถามผู้ช่วย AI ว่าโซฟาผ้าสามที่นั่งสีเทาสำหรับคอนโดควรเลือกแบบไหน ชื่อร้านนี้ไม่เคยถูกหยิบไปพูดถึง ทั้งที่มีสินค้าตรงสเปกอยู่ในสต็อก

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

Alt Text สำหรับ AI คืออะไร และต่างจาก alt text แบบเดิมตรงไหน

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

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

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

ตั้งชื่อไฟล์รูปอย่างไรให้เป็นคำใบ้แรกของบริบท

ชื่อไฟล์คือข้อมูลชุดแรกที่ระบบเห็นก่อนจะประมวลผลตัวภาพ หลักที่ใช้ได้กับเว็บไทยทุกประเภทคือใช้ตัวอักษรอังกฤษพิมพ์เล็ก คั่นคำด้วยขีดกลาง ยาวประมาณ 3-6 คำ และบรรยายสิ่งที่อยู่ในรูปจริงเรียงจากสิ่งที่กว้างที่สุดไปแคบที่สุด เช่น sofa-fabric-grey-3seat.jpg

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

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

สูตรเขียน alt text ที่ AI ดึงไปแสดงผลได้

สูตรที่ใช้ได้กับรูปเกือบทุกแบบคือ วัตถุหลัก + สิ่งที่วัตถุนั้นกำลังทำหรืออยู่ในสภาพไหน + บริบทที่ระบบเดาเองไม่ได้ ความยาวที่ทำงานได้จริงอยู่ราว 60-125 ตัวอักษร ซึ่งพอสำหรับหนึ่งประโยคที่อ่านรู้เรื่องโดยไม่ต้องย่อจนเหลือแต่คำโดด ๆ

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

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

รูปแต่ละประเภทต้องการ alt text คนละแบบ

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

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

ข้อความรอบรูปคือสิ่งที่ตัดสินว่ารูปนี้เกี่ยวกับอะไร

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

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

ไฟล์ ขนาด และโครงสร้างที่ทำให้รูปถูกเก็บเข้าระบบจริง

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

เมื่อรูปพร้อมทั้งชื่อไฟล์ alt text และเงื่อนไขทางเทคนิคแล้ว ขั้นต่อไปคือทำให้ระบบเจอรูปทั้งชุดได้เร็วขึ้นด้วยการประกาศรายการรูปไว้ในแผนผังเว็บ วิธีทำแบบละเอียดอยู่ใน วิธีทำ Image Sitemap ส่วนงานฝั่งวิดีโอซึ่งใช้หลักบริบทคล้ายกันแต่คนละเครื่องมือ อ่านต่อได้ที่ การทำ AIO สำหรับวิดีโอ

สิ่งที่ไม่ควรทำกับ alt text และชื่อไฟล์

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

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

ไล่ตรวจรูปทั้งเว็บด้วยลำดับงานที่ทำซ้ำได้

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

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

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