เว็บทำด้วยรูปทั้งหน้า สาเหตุที่ AI มองไม่เห็นร้านคุณ

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

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

แต่พอคุณลองถามผู้ช่วย AI ว่าร้านแบบคุณแถวบ้านมีที่ไหนน่าไปบ้าง ชื่อร้านคุณไม่โผล่มาเลย ทั้งที่เว็บก็มี ข้อมูลก็ครบ เพียงแต่ไม่มีใครเอ่ยถึง

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

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

เรื่องนี้ไม่เกี่ยวกับว่าเว็บสวยหรือไม่สวย แต่เกี่ยวกับสิ่งที่ซ่อนอยู่หลังความสวยนั้น

กลไกเบื้องหลัง เว็บที่คนอ่านออก แต่เครื่องอ่านไม่ออก

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

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

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

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

แปลว่าคุณฝากความหวังไว้กับสิ่งที่ไม่แน่นอน แทนที่จะพิมพ์ข้อมูลลงไปเป็นตัวอักษรตรง ๆ ซึ่งทุกระบบอ่านได้แน่นอนอยู่แล้ว

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

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

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

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

ตรวจร้านตัวเอง เว็บคุณเข้าข่ายนี้หรือเปล่า

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

ถ้าผ่านห้าข้อแรกแต่ยังไม่มั่นใจ ให้ใช้ข้อสุดท้ายเป็นการเช็กซ้ำอีกชั้นหนึ่ง

ถ้าตกตั้งแต่สามข้อแรก แปลว่าเว็บของคุณเข้าข่ายที่ AI มองไม่เห็นเนื้อหาจริง ๆ ไม่ใช่แค่ทฤษฎี และเป็นเรื่องที่ควรแก้ก่อนเรื่องอื่น เพราะต่อให้เนื้อหาดีแค่ไหน ถ้าระบบอ่านไม่ออก ก็เหมือนไม่มีอยู่

ขั้นตอนที่ทำเองได้ ไม่ต้องรื้อเว็บทั้งเว็บ

หนึ่ง แปลงข้อมูลสำคัญให้เป็นตัวหนังสือจริง

ใช้เวลาประมาณสามถึงสี่ชั่วโมง ต้องมีสิทธิ์เข้าไปแก้เนื้อหาในระบบเว็บ หรือมีช่างเว็บที่แก้ให้ได้เร็ว

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

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

ดูยังไงว่าได้ผล ลองกลับไปทำตามข้อทดสอบแรเงาข้อความอีกครั้งหลังแก้เสร็จ ถ้าตอนนี้แรเงาชื่อร้านและที่อยู่ได้แล้ว ถือว่าผ่านขั้นนี้

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

ใช้เวลาประมาณสองชั่วโมงสำหรับเว็บขนาดกลาง ต้องมีรายชื่อภาพทั้งหมดที่ใช้อยู่ในเว็บ

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

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

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

สาม ทำหน้าคำถามที่พบบ่อยเป็นตัวหนังสือล้วน

ใช้เวลาประมาณสามชั่วโมง ต้องมีสมุดจดคำถามที่ลูกค้าถามบ่อยทางแชทหรือหน้าร้าน

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

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

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

สี่ ใส่ข้อความลงในกูเกิลแมปและเฟซบุ๊กให้ครบ ไม่ใช่แค่รูป

ใช้เวลาประมาณหนึ่งชั่วโมง ไม่ต้องพึ่งช่างเว็บ ทำเองได้ผ่านมือถือ

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

ให้เข้าไปกรอกทุกช่องที่เป็นข้อความจริงให้ครบ โดยเฉพาะช่องเวลาทำการและช่องคำอธิบายร้าน อย่าปล่อยให้ภาพทำหน้าที่แทนข้อความในช่องเหล่านี้

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

ห้า ทำสารบัญตัวหนังสือสำหรับเมนูหรือแคตตาล็อกสินค้า

ใช้เวลาประมาณสี่ถึงห้าชั่วโมง ขึ้นกับจำนวนสินค้าหรือรายการเมนู

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

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

ดูยังไงว่าได้ผล ลองถามผู้ช่วย AI ว่าร้านคุณมีเมนูหรือสินค้าอะไรบ้าง ถ้าตอบชื่อสินค้าที่ถูกต้องออกมาได้ แปลว่าเวอร์ชันตัวหนังสือถูกอ่านแล้ว

อะไรที่ยังไม่ต้องรีบทำ

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

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

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

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

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

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

เริ่มตรงไหนอาทิตย์นี้

ถ้ามีเวลาว่างแค่สามชั่วโมงในสัปดาห์นี้ ให้ทำสองอย่างก่อน

อย่างแรก ใช้สิบนาทีทำข้อทดสอบแรเงาข้อความตามตารางข้างบน จดไว้ว่าตกข้อไหนบ้าง

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

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