วิธีปรับแต่งรูปภาพเพื่อเพิ่ม SEO

การปรับแต่งด้านเทคนิค

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

ใช้ฟอร์แมต WebP หรือ AVIF แทน JPG ดั้งเดิมเมื่อเป็นไปได้ ระบุขนาด `width` และ `height` ใน HTML เสมอเพื่อป้องกัน Cumulative Layout Shift (CLS) ซึ่งเป็นอีกหนึ่งใน Core Web Vitals และใช้ lazy loading สำหรับรูปภาพที่อยู่ต่ำกว่า fold

การตั้งชื่อไฟล์ที่ถูกต้องสำคัญมาก

ชื่อไฟล์รูปภาพเป็นสัญญาณที่ Google ใช้เพื่อเข้าใจเนื้อหา ใช้ชื่อที่อธิบายเนื้อหาจริงๆ และคั่นคำด้วยขีดกลาง (-) เช่น `รองเท้า-วิ่ง-Nike-สีแดง.jpg` แทน `IMG_4521.jpg`

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

แนวทางการเขียน Alt Text

Alt text หรือ alternative text คือข้อความที่อธิบายรูปภาพให้กับ Google และผู้ที่ใช้ screen reader เขียนให้ชัดเจน กระชับ และสื่อความหมายของรูปได้ครบถ้วนภายใน 125 ตัวอักษร

ใส่คีย์เวิร์ดที่เกี่ยวข้องอย่างเป็นธรรมชาติ แต่อย่าเขียน alt text เพื่อยัดคีย์เวิร์ดเท่านั้น เขียนเหมือนกับที่คุณจะอธิบายรูปให้คนตาบอดเข้าใจ รูปภาพตกแต่งที่ไม่มีความหมายควรมี alt text ว่างเปล่า (`alt=""`)

Core Web Vitals และรูปภาพ

Largest Contentful Paint (LCP) มักถูก triggered โดยรูปภาพหลักของหน้า ปรับแต่งรูปภาพ hero image ให้โหลดเร็วที่สุดและใช้ `fetchpriority="high"` เพื่อบอกเบราว์เซอร์ให้โหลดก่อน

Cumulative Layout Shift (CLS) เกิดขึ้นเมื่อรูปภาพโหลดแล้วดันเนื้อหาอื่นให้เลื่อน แก้ไขได้ง่ายๆ ด้วยการกำหนด `width` และ `height` attribute ให้ทุกรูปภาพใน HTML หรือใช้ CSS `aspect-ratio`

Image Sitemap

Image sitemap ช่วยให้ Google ค้นพบรูปภาพทั้งหมดในเว็บไซต์ได้ง่ายขึ้น โดยเฉพาะรูปภาพที่โหลดผ่าน JavaScript ซึ่ง Google อาจพลาดในการ crawl ปกติ

เพิ่มข้อมูลรูปภาพใน sitemap.xml ของคุณ ระบุ URL ของรูปภาพ คำอธิบาย และคำบรรยาย สิ่งเหล่านี้ช่วยให้รูปภาพของคุณปรากฏในผลการค้นหารูปภาพของ Google และนำ traffic เพิ่มเติมมาสู่เว็บไซต์

วิธีทำใน 3 ขั้นตอน

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