รูปสวยแต่ Google มองไม่เห็น? เคล็ดลับเขียน Alt Text ให้รูปขวดเซรั่มติดหน้าแรก Google Images เทคนิค SEO ง่ายๆ เพิ่มโอกาสการขายที่คนทำเว็บห้ามพลาด!
เคยสงสัยไหมคะ? ทำไมบางเว็บไซต์รูปสวยมาก ถ่ายสินค้ามาเป๊ะปัง แสงสตูดิโอจัดเต็ม แต่พอเราลองไปค้นหาใน Google Images กลับหาภาพเหล่านั้นไม่เจอเลย? หรือบางทีไปเจอแต่รูปของคู่แข่งที่ถ่ายด้วยมือถือบ้านๆ ซะงั้น
บอกเลยว่าปัญหานี้ไม่ได้อยู่ที่ "ความสวย" ของรูปค่ะ แต่อยู่ที่ "ภาษา" ที่เราคุยกับ Google ต่างหาก
ในฐานะคนที่คลุกคลีอยู่กับการทำเว็บไซต์และงานดีไซน์มานาน วันนี้อยากจะมาแชร์เทคนิคเล็กๆ ที่หลายคนชอบมองข้าม หรือบางทีก็ขี้เกียจทำ (สารภาพมาซะดีๆ นะคะ) นั่นก็คือเรื่องของ Alt Text ค่ะ
วันนี้เราจะเจาะลึกกันเลยว่า เจ้า Alt Text นี่มันสำคัญยังไง โดยเฉพาะกับธุรกิจที่ขาย "ความสวยงาม" อย่างพวกสกินแคร์ เครื่องสำอาง หรือ Packaging เชื่อเถอะค่ะว่า ถ้าคุณอ่านจบบทความนี้ แล้วกลับไปแก้เว็บไซต์ของคุณ ยอด Traffic จากการค้นหารูปภาพจะเพิ่มขึ้นแบบที่คุณต้องตกใจเลยล่ะค่ะ
Google ตาบอด... แต่ Google อ่านหนังสือออกนะ
ก่อนจะไปถึงวิธีทำ เราต้องปรับ Mindset กันนิดนึงค่ะ เราที่เป็นมนุษย์ เวลาเห็นรูปภาพ เรามองปุ๊บรู้ปั๊บว่า "อ๋อ นี่คือผู้หญิงถือน้ำตบผิวใส" หรือ "นี่คือกระปุกครีมสีทองหรูหรา" ใช่ไหมคะ
แต่สำหรับ Bot ของ Google (Googlebot) น้องเขาไม่ได้มองเห็นภาพเหมือนเราค่ะ น้องเขามองเห็นเป็นแค่ Code ภาษาต่างดาว เป็น Pixel เรียงตัวกัน ดังนั้น ต่อให้รูปสินค้าคุณสวยระดับรางวัลโลกตะลึง แต่ถ้าคุณไม่บอก Google ว่ารูปนี้คืออะไร Google ก็จะมองว่ามันเป็นแค่ "รูปภาพประกอบรูปหนึ่ง" ที่ไม่มีความหมาย
นี่แหละคือหน้าที่ของ Alt Text (Alternative Text) ค่ะ มันคือ "คำอธิบายรูปภาพ" ที่แทรกอยู่ใน Code หลังบ้าน เพื่อกระซิบกบอก Google ว่า "เฮ้! รูปนี้คือรูปอะไร เกี่ยวกับอะไร" พอ Google เข้าใจ Google ก็จะเอารูปเราไปจัดอันดับในการค้นหาได้ถูกต้องนั่นเอง
ทำไมสินค้าสวยงาม ถึงขาด Alt Text ไม่ได้?
ลองนึกภาพตามนะคะ พฤติกรรมของลูกค้าที่มองหาสินค้าแฟชั่น หรือความงาม ส่วนใหญ่เขาไม่ได้เริ่มจากการอ่านบทความยาวๆ เสมอไปค่ะ แต่เขาเริ่มจาก "การดูรูป"
เช่น ลูกค้าที่เป็นเจ้าของแบรนด์หน้าใหม่ กำลังมองหาไอเดียทำแพ็คเกจจิ้ง เขาอาจจะพิมพ์ค้นหาว่า "ไอเดียแพ็คเกจจิ้งมินิมอล" แล้วกดไปที่แท็บ ค้นหารูปภาพ (Images) ทันที
ถ้าเราเป็นคนรับทำเว็บ หรือเป็นโรงงานผลิต แล้วเรามีรูปผลงานสวยๆ แต่เราไม่ใส่ Alt Text อธิบายรูปนั้น Google ก็ไม่รู้จะเอาอะไรไปแมตช์กับคำค้นหาของลูกค้า โอกาสที่ลูกค้าจะเห็นงานดีไซน์ ขวดเซรั่ม สวยๆ ของเรา ก็กลายเป็นศูนย์ทันที... น่าเสียดายไหมคะ?
การทำ SEO รูปภาพ จึงไม่ใช่แค่เรื่องทางเทคนิค แต่มันคือการ "เปิดโอกาสการมองเห็น" ให้กับสินค้าที่ขายด้วยรูปลักษณ์ภายนอกโดยตรงเลยค่ะ
How-to : เขียน Alt Text ยังไง ให้ Google รัก และลูกค้าหลง
ทีนี้มาถึงภาคปฏิบัติกันบ้างค่ะ การเขียน Alt Text ไม่ใช่แค่การยัดๆ คำลงไปนะคะ มันมีศิลปะของมันอยู่ เดี๋ยวจะสรุปเป็นข้อๆ ให้เอาไปทำตามได้เลยค่ะ
1. จงอธิบายสิ่งที่เห็น ไม่ใช่สิ่งที่อยากขาย (มากเกินไป)
หลักการพื้นฐานคือ "ถ้าคนตาบอดมาฟังคำอธิบายนี้ เขาจะจินตนาการภาพออกไหม?"
- แย่ : ใส่แค่รหัสสินค้า เช่น IMG_55420.jpg (Google งงตาแตกค่ะ)
- สแปม : รับผลิตครีม โรงงานครีม ครีมหน้าขาว ครีมราคาถูก (อันนี้ Google เกลียดค่ะ โดนมองว่าเป็น Spam แน่นอน)
- ดี : ขวดดรอปเปอร์สีชา ทรงกลม สำหรับใส่ผลิตภัณฑ์บำรุงผิว (ชัดเจน เห็นภาพ)
2. ใส่ Keyword อย่างเป็นธรรมชาติ
แน่นอนว่าเราทำ SEO เราก็ต้องใส่คีย์เวิร์ดที่เราอยากติดอันดับลงไปด้วย แต่อย่าลืมว่าต้องให้ดูเป็นธรรมชาติที่สุดค่ะ สมมติว่ารูปนั้นเป็นรูป Packaging สีชมพูพาสเทล
- ลองเขียนแบบนี้ : "ตัวอย่างงานออกแบบ ขวดเซรั่ม สีชมพูพาสเทล ทรงเหลี่ยม สไตล์เกาหลี" เห็นไหมคะ? มีคีย์เวิร์ดครบ แต่รูปประโยคอ่านรู้เรื่อง เป็นการอธิบายลักษณะของภาพจริงๆ ไม่ใช่การตะโกนขายของใส่หน้า Google
3. สั้น กระชับ ได้ใจความ
ความยาวที่แนะนำคือไม่ควรเกิน 125 ตัวอักษรค่ะ (ภาษาอังกฤษนะ ภาษาไทยก็กะประมาณ 1-2 ประโยคสั้นๆ) เพราะถ้าเขียนยาวเป็นเรียงความ Google อาจจะตัดทิ้ง หรือให้ความสำคัญน้อยลง เอาแค่เนื้อๆ เน้นๆ ก็พอค่ะ
เทคนิคเสริม : ไม่ใช่แค่ Alt Text แต่ชื่อไฟล์ก็สำคัญ!
อันนี้แถมให้นะคะ เป็นจุดตายที่หลายคนตกม้าตายตอนจบ คืออุตส่าห์เขียน Alt Text ดีมาก แต่ชื่อไฟล์รูปยังเป็น DCIM001.jpg หรือ Untitled-1.png อยู่เลย
จำไว้นะคะ Google อ่านชื่อไฟล์ (File Name) ก่อนจะอ่าน Alt Text ด้วยซ้ำ! ดังนั้น ก่อนจะอัปโหลดรูปขึ้นเว็บ รบกวนเปลี่ยนชื่อไฟล์ให้สื่อความหมาย และคั่นคำด้วยเครื่องหมายขีดกลาง (-) เสมอค่ะ
- ตัวอย่างการตั้งชื่อไฟล์ที่ดี : luxury-gold-serum-bottle-design.jpg
- ตัวอย่างภาษาไทย (ทับศัพท์ได้จะดีกว่า แต่ถ้าจะใช้ไทยก็พอไหว) : design-**ขวดเซรั่ม**-hologram.jpg
การทำแบบนี้จะช่วยย้ำกับ Google อีกแรงว่า รูปนี้เกี่ยวกับอะไร ยิ่งชื่อไฟล์ตรงกับ Alt Text และตรงกับเนื้อหาบทความด้วยแล้ว คะแนน SEO ของหน้านั้นจะพุ่งปรี๊ดเลยค่ะ
เรื่องของขนาดภาพ (Size) ความชัดที่แลกมาด้วยความช้า?
อีกเรื่องที่อยากเตือนคือเรื่อง File Size ค่ะ เข้าใจค่ะว่าเราอยากโชว์ดีเทลงาน อยากให้เห็นความแวววาวของวัสดุ แต่ถ้ารูปใหญ่เกินไป เช่น ไฟล์ละ 5MB กว่าเว็บจะโหลดเสร็จ ลูกค้ากดปิดหนีไปเว็บคู่แข่งแล้วค่ะ
สำหรับเว็บสมัยใหม่ แนะนำให้บีบอัดไฟล์ภาพให้เล็กที่สุดเท่าที่จะทำได้โดยที่ตายังมองเห็นว่าชัด (ปกติจะไม่เกิน 200-300KB สำหรับรูปใหญ่) หรือถ้าจะให้ล้ำกว่านั้น ลองใช้สกุลไฟล์แบบ WebP ดูค่ะ ไฟล์เล็กกว่า JPG เยอะมาก แต่ชัดเท่าเดิม ช่วยให้เว็บโหลดไว Google ก็จะปลื้มเว็บเรามากขึ้นไปอีก
เว็บไซต์ที่ดี คือเว็บไซต์ที่สื่อสารได้รอบด้าน
การทำเว็บไซต์ในปีนี้ มันไม่ใช่แค่เรื่องของความสวยงามที่ตามองเห็นอย่างเดียวแล้วนะคะ แต่มันคือเรื่องของ "โครงสร้างข้อมูล" ที่อยู่เบื้องหลัง
การที่เราใส่ใจรายละเอียดเล็กๆ อย่าง Alt Text หรือการตั้งชื่อไฟล์ มันแสดงให้เห็นถึงความ "คราฟต์" ในการทำงานค่ะ มันเหมือนการที่เราบรรจงจัดวาง ขวดเซรั่ม ลงบนชั้นวางอย่างประณีต เพื่อให้ลูกค้า (และ Google) หามันเจอได้ง่ายที่สุด
ถ้าคุณเป็นเจ้าของแบรนด์ หรือเจ้าของเว็บ ลองกลับไปเช็คหลังบ้านดูนะคะว่ารูปภาพสินค้าของคุณ มี Alt Text ครบหรือยัง? หรือถ้าคุณเป็นดีไซเนอร์ ลองเพิ่มบริการนี้เข้าไปในงานของคุณดูค่ะ รับรองว่าลูกค้าจะประทับใจที่คุณใส่ใจในสิ่งที่เขามองไม่เห็น แต่สร้างมูลค่ามหาศาลให้กับธุรกิจเขา
สุดท้ายนี้... อย่าลืมนะคะว่า "สวยแต่รูป จูบไม่หอม" ใช้กับ Google ไม่ได้ ถ้าอยากให้เว็บปัง รูปต้องสวย และต้อง "พูดรู้เรื่อง" กับ Bot ด้วยค่ะ!
หวังว่าเทคนิคที่เอามาแชร์วันนี้จะเป็นประโยชน์นะคะ ไว้รอบหน้าจะมาแชร์เทคนิค UX/UI สำหรับเว็บสกินแคร์กันบ้าง รับรองว่าเข้มข้นไม่แพ้กัน รอติดตามได้เลยค่ะ!