SEO รูปภาพสินค้า: ตั้งชื่อไฟล์ ใส่ alt และบีบอัดภาพให้ร้านโหลดไว

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

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

SEO รูปภาพสินค้าคือการทำอะไรบ้าง

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

ทำไมภาพสินค้าถึงเป็นตัวถ่วงความเร็วอันดับหนึ่ง

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

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

ตั้งชื่อไฟล์รูปให้บอกว่าเป็นสินค้าอะไร

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

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

เขียน alt ให้บรรยายสินค้าจริง ไม่ใช่ช่องใส่คีย์เวิร์ด

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

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

เลือกฟอร์แมตและขนาดภาพให้เหมาะกับแต่ละหน้า

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

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

lazy loading ใช้ตรงไหน และห้ามใช้ตรงไหน

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

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

สินค้าหนึ่งชิ้นควรมีภาพอะไรบ้าง

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

1. 1ภาพหลักบนพื้นหลังเรียบ เห็นสินค้าเต็มตัวชัดเจน ใช้เป็นภาพที่แสดงในหน้าหมวดหมู่ด้วย
2. 2ภาพมุมอื่นอย่างน้อยสองมุม เช่น ด้านหลังและด้านข้าง สำหรับสินค้าที่รูปทรงมีผลกับการตัดสินใจ
3. 3ภาพเทียบขนาดกับของที่คนคุ้นเคย เพราะคำถามเรื่องขนาดเป็นคำถามที่เข้ามาทางแชทมากที่สุด
4. 4ภาพใช้งานจริงที่มีคนหรือสถานที่ประกอบ เพื่อให้เห็นว่าสินค้าอยู่ในชีวิตจริงแล้วเป็นอย่างไร
5. 5ภาพระยะใกล้ของจุดที่คนกังวล เช่น รอยเย็บ วัสดุ ขั้วต่อ หรือปุ่มควบคุม
6. 6ภาพสิ่งที่ได้รับในกล่อง เพื่อลดคำถามซ้ำและลดการเปลี่ยนคืนจากความเข้าใจผิด

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

Google Images พาลูกค้าเข้าร้านได้อย่างไร

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

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

ถ้าอยากเข้าใจภาพรวมว่า Google อ่านสื่อในหน้าเว็บอย่างไรทั้งภาพและวิดีโอ อ่านต่อได้ที่ Image SEO และ Video SEO

ข้อผิดพลาดที่พบบ่อย

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

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

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

สรุป

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