ทำ SEO ให้รูปภาพ ตั้งแต่ชื่อไฟล์ถึง alt text

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

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

สิ่งที่ต้องเตรียม

• สิทธิ์แก้ไขเนื้อหาและอัปโหลดไฟล์
• Google Search Console

ขั้นตอนที่ 1: ตั้งชื่อไฟล์ให้สื่อความ

ชื่อไฟล์เป็นสัญญาณแรกที่ Google ใช้เข้าใจว่ารูปคืออะไร

# ไม่ดี
IMG_20260925_143022.jpg
DSC0042.png
screenshot-1.png

# ดี
cloud-server-rack-datacenter-bangkok.jpg
mysql-replication-diagram.png
plesk-ssl-settings-screen.png

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

เรื่องภาษาไทยในชื่อไฟล์ ใช้ได้แต่จะถูกเข้ารหัสใน URL ทำให้อ่านยากและบางระบบจัดการผิดพลาด แนะนำให้ใช้ภาษาอังกฤษในชื่อไฟล์แล้วใส่ภาษาไทยใน alt text แทน

# เปลี่ยนชื่อไฟล์จำนวนมาก
cd /var/www/example.com/wp-content/uploads/2026/09
for f in IMG_*.jpg; do
  echo "$f"   # ตรวจก่อนเปลี่ยนจริง
done

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

ขั้นตอนที่ 2: เขียน alt text ที่ถูกต้อง

alt text คือคำอธิบายสำหรับคนที่มองไม่เห็นรูป ทั้งผู้ใช้โปรแกรมอ่านหน้าจอและเครื่องมือค้นหา

<!-- ไม่ดี ไม่ได้อธิบายอะไร -->
<img src="server.jpg" alt="รูปภาพ">
<img src="server.jpg" alt="">

<!-- ไม่ดี ยัดคำค้นหา -->
<img src="server.jpg" alt="cloud server เช่า server ราคาถูก server ไทย vps">

<!-- ดี อธิบายสิ่งที่เห็นจริง -->
<img src="server.jpg" alt="ตู้แร็คเซิร์ฟเวอร์ในศูนย์ข้อมูลกรุงเทพฯ พร้อมไฟสถานะสีเขียว">

หลักการเขียน

• อธิบายสิ่งที่เห็นในรูป ไม่ใช่สิ่งที่อยากให้ค้นเจอ
• ยาวประมาณ 60-125 ตัวอักษร
• ไม่ต้องขึ้นต้นด้วย "รูปภาพของ" เพราะโปรแกรมอ่านหน้าจอบอกอยู่แล้วว่าเป็นรูป
• สำหรับรูปที่เป็นลิงก์ ให้อธิบายปลายทางของลิงก์แทนเนื้อหาในรูป
• รูปตกแต่งที่ไม่มีความหมาย ใส่ alt="" เพื่อให้โปรแกรมอ่านหน้าจอข้ามไป การไม่ใส่แอตทริบิวต์เลยต่างจากการใส่ค่าว่าง

ตรวจว่ามีรูปไหนขาด alt

curl -sL https://example.com/blog/article/ | grep -oP '<img[^>]*>' | grep -v 'alt='

ขั้นตอนที่ 3: ใส่คำบรรยายและข้อความรอบรูป

Google ใช้ข้อความรอบ ๆ รูปประกอบการเข้าใจด้วย โดยเฉพาะ <figcaption>

<figure>
  <img src="mysql-replication-diagram.png"
       alt="แผนผังการทำงานของ MySQL Replication แบบ Master-Replica"
       width="1200" height="675" loading="lazy" decoding="async">
  <figcaption>
    เครื่องหลักส่ง Binary Log ไปยังเครื่องสำรองอย่างต่อเนื่อง
    ทำให้ข้อมูลทั้งสองฝั่งตรงกันภายในเสี้ยววินาที
  </figcaption>
</figure>

ขั้นตอนที่ 4: ระบุขนาดและใช้ lazy loading

<img src="photo.jpg" alt="คำอธิบาย"
     width="1200" height="800"
     loading="lazy" decoding="async">

การระบุ width และ height ป้องกันหน้าเว็บกระโดดระหว่างโหลด ซึ่งมีผลต่อคะแนน CLS โดยตรง

ข้อยกเว้นสำคัญ รูปแรกที่ผู้ใช้เห็นทันทีเมื่อเปิดหน้าห้ามใส่ loading="lazy" เพราะทำให้คะแนน LCP แย่ลง ให้ใส่ fetchpriority="high" แทน

<img src="hero.jpg" alt="ภาพหลักของหน้า"
     width="1600" height="900"
     fetchpriority="high" decoding="async">

ขั้นตอนที่ 5: ส่งรูปให้เหมาะกับขนาดหน้าจอ

<img src="product-800.jpg"
     srcset="product-400.jpg 400w,
             product-800.jpg 800w,
             product-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
     alt="เสื้อยืดคอกลมสีขาว รุ่นคอตตอน 100%"
     width="800" height="1000" loading="lazy">

WordPress สร้าง srcset ให้อัตโนมัติจากขนาดที่ลงทะเบียนไว้ ตรวจว่าทำงาน

curl -sL https://example.com/product/ | grep -o 'srcset="[^"]*"' | head -3

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>https://example.com/product/tshirt/</loc>
    <image:image>
      <image:loc>https://example.com/images/tshirt-white-front.jpg</image:loc>
      <image:title>เสื้อยืดคอกลมสีขาว ด้านหน้า</image:title>
    </image:image>
    <image:image>
      <image:loc>https://example.com/images/tshirt-white-back.jpg</image:loc>
      <image:title>เสื้อยืดคอกลมสีขาว ด้านหลัง</image:title>
    </image:image>
  </url>
</urlset>

curl -s https://example.com/sitemap.xml | grep -c 'image:loc'

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "เสื้อยืดคอกลมสีขาว",
  "image": [
    "https://example.com/images/tshirt-white-front.jpg",
    "https://example.com/images/tshirt-white-back.jpg"
  ],
  "offers": {
    "@type": "Offer",
    "price": "590",
    "priceCurrency": "THB",
    "availability": "https://schema.org/InStock"
  }
}
</script>

site:example.com

curl -sI https://example.com/images/photo.jpg | grep -i robots
curl -s https://example.com/robots.txt | grep -i uploads