Contact
Line : comsiam
Image Alt Text คือ ข้อความทางเลือกที่ใช้อธิบายรูปภาพใน HTML โดยกำหนดผ่าน alt Attribute ของ <img> Tag
ตัวอย่าง
<img src="keyword-research-chart.jpg" alt="กราฟแสดงขั้นตอนการทำ Keyword Research">
ข้อความ
กราฟแสดงขั้นตอนการทำ Keyword Research
คือ Alt Text
Alt Text มีหน้าที่สำคัญหลายอย่าง เช่น
- ช่วยผู้ใช้ Screen Reader เข้าใจรูปภาพ
- แสดงข้อความแทนเมื่อรูปโหลดไม่ได้ในบางสถานการณ์
- ช่วยให้ระบบเข้าใจเนื้อหาและหน้าที่ของรูปภาพ
- สนับสนุน Image SEO
- ช่วยเชื่อมความหมายของภาพกับเนื้อหารอบข้าง
แต่สิ่งสำคัญมากคือ
Alt Text ไม่ใช่พื้นที่สำหรับใส่ Keyword ให้มากที่สุด
ตัวอย่างที่ไม่ควรทำ
alt="SEO รับทำ SEO SEO Google บริษัท SEO รับทำ SEO ราคาถูก"
ถึงแม้รูปจะเกี่ยวกับ SEO ก็ไม่ได้หมายความว่าควรยัด Keywords ทั้งหมดลง Alt Text
แนวทางที่เหมาะสมคือ
ดูภาพ → เข้าใจหน้าที่ของภาพในบริบท → อธิบายเฉพาะสิ่งที่จำเป็น
ไม่ใช่
หา Keyword → เอา Keyword ไปใส่ Alt Text ทุกภาพ
Alt Text ย่อมาจากอะไร
Alt ย่อมาจาก
Alternative
Text หมายถึง
ข้อความ
ดังนั้น Alternative Text หมายถึง
ข้อความทางเลือกของรูปภาพ
ใช้เมื่อผู้ใช้ไม่สามารถรับข้อมูลจากภาพโดยตรง
Alt Attribute คืออะไร
Alt Text ถูกกำหนดผ่าน alt Attribute
ตัวอย่าง
<img src="seo-audit.jpg" alt="หน้าจอรายงาน SEO Audit ของเว็บไซต์">
alt คือ Attribute
ข้อความภายในคือ Alt Text
Image Alt Text สำคัญกับ SEO อย่างไร
① ช่วยอธิบายเนื้อหาของภาพ
Search Systems ไม่ควรถูกคาดหวังว่าจะตีความทุกภาพได้เหมือนมนุษย์ในทุกบริบท
Alt Text ช่วยเพิ่มคำอธิบายว่า
ภาพนี้มีความหมายอะไรในหน้า
② มีประโยชน์ต่อ Image Search
รูปภาพที่มี
- Filename เหมาะสม
- Alt Text ที่ตรงภาพ
- Context รอบภาพ
- Page Content ที่เกี่ยวข้อง
มีโครงสร้างข้อมูลที่ชัดกว่าภาพที่ไม่มีคำอธิบายเลย
แต่ Alt Text อย่างเดียวไม่ได้รับประกันอันดับใน Image Search
③ ช่วย Accessibility
นี่คือวัตถุประสงค์สำคัญมากของ Alt Text
ผู้ใช้ที่ใช้ Screen Reader สามารถรับคำอธิบายของภาพผ่าน Alt Text
ดังนั้น Alt Text ที่เขียนดีควรมีประโยชน์ต่อคนก่อน
④ ช่วยเมื่อรูปภาพโหลดไม่ได้
ในบาง Browser หรือสถานการณ์ที่ Image ไม่สามารถแสดงได้ ข้อความ Alternative อาจช่วยอธิบายสิ่งที่ควรปรากฏ
⑤ ช่วยสร้าง Context ร่วมกับข้อความรอบภาพ
ภาพ + Caption + Alt Text + เนื้อหารอบข้าง สามารถช่วยสร้างความหมายของ Section ได้ชัดขึ้น
Alt Text เป็น Ranking Factor ไหม
ไม่ควรมองว่า
ใส่ Keyword ใน Alt Text = Ranking สูงขึ้น
หรือ
ทุกภาพต้องมี Primary Keyword
Alt Text เป็นองค์ประกอบหนึ่งของ Image Accessibility และ Image Understanding
แต่ Ranking ของหน้าเว็บยังขึ้นกับหลายเรื่อง เช่น
- Search Intent
- Content Quality
- Internal Links
- Technical SEO
- Authority
- User Experience
ดังนั้นอย่าใช้ Alt Text เป็น Keyword Density Tool
Alt Text กับ Image SEO คืออะไร
Image SEO คือการปรับรูปภาพให้เหมาะต่อ
- Search Discovery
- Page Performance
- Accessibility
- User Experience
องค์ประกอบอาจรวมถึง
- Alt Text
- Filename
- File Size
- Image Dimensions
- Responsive Images
- Context
- Caption
- Structured Data ในบางกรณี
Alt Text เป็นเพียงหนึ่งส่วนของ Image SEO
ทุกภาพต้องมี Alt Text ไหม
ทุก <img> ควรได้รับการพิจารณาว่าต้องมี Alt แบบใด แต่ไม่ได้หมายความว่าทุกภาพต้องมีคำอธิบายยาว ๆ
ภาพสามารถแบ่งคร่าว ๆ เป็น
- Informative Image
- Functional Image
- Decorative Image
- Complex Image
แต่ละประเภทควรจัด Alt ต่างกัน
Informative Image คืออะไร
เป็นภาพที่มีข้อมูลหรือความหมายต่อเนื้อหา
ตัวอย่าง
- Screenshot ขั้นตอน
- ภาพสินค้า
- ภาพสถานที่
- Diagram
- ภาพบุคคลที่เกี่ยวกับบทความ
ควรมี Alt Text ที่อธิบายข้อมูลสำคัญของภาพ
Functional Image คืออะไร
คือภาพที่ทำหน้าที่เป็น
- ปุ่ม
- ลิงก์
- Control
เช่นไอคอน Search ที่เป็นปุ่ม
Alt ควรอธิบาย หน้าที่
เช่น
alt="ค้นหา"
ดีกว่า
alt="รูปแว่นขยาย"
เพราะผู้ใช้ต้องรู้ว่ากดแล้วทำอะไร
Decorative Image คืออะไร
เป็นภาพตกแต่งที่ไม่ได้เพิ่มข้อมูลสำคัญ
เช่น
- ลายพื้นหลัง
- เส้นตกแต่ง
- รูปทรง Decoration
ในหลายกรณีควรใช้ Empty Alt
<img src="decorative-line.png" alt="">
เพื่อให้ Screen Reader ข้ามภาพนั้น
Decorative Image ต้องใส่ Keyword ไหม
ไม่
ถ้าภาพไม่มีข้อมูล ผู้ใช้ Screen Reader ไม่ได้ประโยชน์จากคำอธิบายที่ยัด Keyword
Alt ว่างอาจถูกต้องกว่าการเขียนคำ SEO
Complex Image คืออะไร
เป็นภาพที่มีข้อมูลจำนวนมาก เช่น
- Chart
- Graph
- Infographic
- Diagram ซับซ้อน
- ตารางในรูป
Alt Text ควรให้ Summary ที่ช่วยเข้าใจภาพ
แต่รายละเอียดทั้งหมดอาจต้องอธิบายในข้อความรอบภาพหรือ Caption เพิ่มเติม
Alt Text สำหรับกราฟควรเขียนอย่างไร
ตัวอย่าง
ภาพกราฟ Organic Traffic เพิ่มจาก 10,000 เป็น 18,000 Sessions
Alt Text อาจเป็น
กราฟ Organic Traffic เพิ่มจาก 10,000 เป็น 18,000 Sessions ระหว่างเดือนมกราคมถึงมิถุนายน
ดีกว่า
กราฟ SEO
เพราะบอกสาระของภาพ
Alt Text สำหรับ Screenshot ควรเขียนอย่างไร
ถ้า Screenshot ใช้สอนขั้นตอน
ตัวอย่าง
หน้าจอ Google Search Console เมนู Performance แสดง Queries และ Clicks
ไม่จำเป็นต้องบรรยายทุก Pixel
เลือกข้อมูลที่เกี่ยวกับจุดประสงค์ของ Screenshot
Alt Text สำหรับภาพสินค้าควรเขียนอย่างไร
ตัวอย่าง Product:
รองเท้าวิ่งผู้ชาย Nike รุ่น X สีดำ
Alt อาจเป็น
รองเท้าวิ่งผู้ชาย Nike รุ่น X สีดำ มุมด้านข้าง
ถ้ามุมภาพมีความสำคัญ
ไม่ต้องเขียน
ซื้อรองเท้าวิ่ง Nike ราคาถูก รองเท้าวิ่งดีที่สุด
Alt Text สำหรับภาพบุคคล
หาก Identity มีความสำคัญต่อเนื้อหา สามารถอธิบายชื่อหรือบทบาท
ตัวอย่าง
John Smith ผู้ก่อตั้งบริษัท X กล่าวบนเวทีงาน Y
แต่ต้องดูว่าข้อมูลใดจำเป็นต่อ Context
Alt Text สำหรับโลโก้
ถ้าโลโก้สื่อ Brand และเป็น Link กลับ Homepage
Alt อาจใช้ชื่อ Brand
เช่น
alt="comsiam"
ไม่จำเป็นต้องใช้
alt="comsiam รับทำ SEO Backlink เว็บไซต์อันดับหนึ่ง"
Alt Text สำหรับไอคอน
ถ้าไอคอนเป็นเพียง Decoration
ใช้ Alt ว่าง
ถ้าไอคอนเป็น Button
Alt ควรสื่อ Function
เช่น
- เปิดเมนู
- ปิดหน้าต่าง
- ค้นหา
Alt Text กับ Caption ต่างกันอย่างไร
Alt Text
อยู่ใน HTML และมีประโยชน์ต่อ Accessibility และการอธิบายภาพ
Caption
เป็นข้อความที่ผู้ใช้ทั่วไปเห็นใต้หรือใกล้รูป
ตัวอย่าง
Caption:
ตัวอย่างรายงาน Performance ใน Google Search Console
Caption ไม่จำเป็นต้องเหมือน Alt Text ทุกคำ
Alt Text กับ Image Title ต่างกันอย่างไร
Image Title Attribute ไม่ใช่สิ่งเดียวกับ Alt Text
ตัวอย่าง
<img src="seo.jpg" alt="กราฟ SEO Traffic" title="SEO Traffic Report">
Alt มีวัตถุประสงค์ด้าน Alternative Description
Title อาจแสดง Tooltip ในบางบริบท
ไม่ควรใช้ Title แทน Alt
Alt Text กับ Filename ต่างกันอย่างไร
Filename คือชื่อไฟล์
ตัวอย่าง
keyword-research-chart.jpg
Alt Text คือคำอธิบายภาพ
กราฟขั้นตอนการทำ Keyword Research
ทั้งสองควรมีความสัมพันธ์กับภาพ แต่ไม่จำเป็นต้องเหมือนกัน
Alt Text ต้องเหมือน Filename ไหม
ไม่
Filename มักสั้น
Alt สามารถอธิบาย Context เพิ่มได้
ตัวอย่าง
Filename:
fivem-high-ping.jpg
Alt:
หน้าจอ FiveM แสดงค่า Ping สูงกว่า 150 ms
แบบนี้เหมาะกว่า Copy Filename ตรง ๆ
Alt Text ต้องมี Keyword ไหม
ไม่จำเป็น
หาก Keyword เป็นส่วนหนึ่งของสิ่งที่ภาพแสดงจริง ก็ใส่ได้ตามธรรมชาติ
ตัวอย่างบทความ Keyword Research และภาพเป็น Diagram กระบวนการ Keyword Research
Alt:
แผนภาพขั้นตอน Keyword Research ตั้งแต่หา Seed Keyword ถึง Keyword Mapping
เหมาะ
แต่ไม่ต้องยัดคำ
SEO, Google, Ranking, Keyword Tool
ทั้งหมดลงไป
Primary Keyword ต้องอยู่ Alt Text ทุกภาพไหม
ไม่
นี่เป็นข้อผิดพลาดที่พบบ่อยมาก
ถ้าบทความมี 20 รูป แล้วทุก Alt เขียน
Keyword Research…
ซ้ำทั้งหมด แม้บางภาพเป็น
- Search Console
- Spreadsheet
- SERP
- Chart
ก็ไม่เป็นประโยชน์
แต่ละภาพควรมี Alt ตามภาพนั้น
Keyword Stuffing ใน Alt Text คืออะไร
ตัวอย่าง
alt="SEO SEO Google รับทำ SEO บริษัท SEO SEO Ranking SEO Service"
ไม่มีประโยชน์ต่อผู้ใช้
ควรเขียน
alt="กราฟแสดง Organic Traffic หลังปรับ SEO"
เมื่อภาพแสดงสิ่งนั้นจริง
Alt Text ต้องยาวกี่ตัวอักษร
ไม่มีจำนวนตายตัวที่ใช้ได้กับทุกภาพ
หลักคือ
สั้นพอที่จะไม่เยิ่นเย้อ แต่ละเอียดพอที่จะสื่อข้อมูลสำคัญ
ไม่ควรตั้งเป้าว่า
- ต้อง 100 ตัวอักษร
- ห้ามเกิน 125 ตัวอักษรเสมอ
ให้ดูประเภทของภาพและ Context
Alt Text ยาวเกินไปมีปัญหาไหม
อาจทำให้ Screen Reader Experience ไม่ดี
ถ้าต้องบรรยาย Diagram ยาวมาก ควรใช้
- Alt สรุป
- Detailed Text รอบภาพ
แทนการยัดทุกข้อมูลลง Attribute เดียว
Alt Text สั้นเกินไปมีปัญหาไหม
ตัวอย่าง
alt="ภาพ"
แทบไม่บอกอะไร
หรือ
alt="SEO"
ถ้าภาพเป็นกราฟละเอียด
ควรเพิ่มข้อมูลที่สำคัญ
ควรเริ่ม Alt Text ด้วยคำว่า “รูปภาพของ” ไหม
โดยทั่วไปไม่จำเป็น
Screen Reader สามารถรู้ว่า Element เป็น Image อยู่แล้วในหลายบริบท
ตัวอย่าง
แทน
รูปภาพของกราฟ SEO
ใช้
กราฟ Organic Traffic รายเดือน
กระชับกว่า
Alt Text ควรเขียนเป็นประโยคไหม
ไม่จำเป็นต้องเป็นประโยคเต็มทุกครั้ง
สามารถเป็น Phrase ที่ชัด
เช่น
หน้าจอ WordPress Permalink Settings
หรือ
iPhone สีดำ มุมด้านหลัง
Alt Text ใส่เครื่องหมายจุดได้ไหม
ได้
ถ้าเป็นประโยคหรือคำอธิบายที่สมบูรณ์
ไม่ได้มีข้อห้าม SEO
Alt Text ใช้ภาษาไทยได้ไหม
ได้
เว็บไซต์ภาษาไทยสามารถใช้ Alt ภาษาไทยตาม Content
ตัวอย่าง
หน้าจอมือถือแสดงข้อความไม่มีสัญญาณ
เหมาะกับผู้อ่านไทย
Alt Text ภาษาอังกฤษดีกว่าไหม
ไม่ใช่กฎ
ควรใช้ภาษาที่เหมาะกับ Page และ Audience
บทความไทยไม่จำเป็นต้องบังคับ Alt เป็นอังกฤษ
Alt Text กับ Search Intent
Alt ควรอธิบายภาพ ไม่ใช่ Search Intent ทั้งหน้า
ถ้า Page เรื่อง
“มือถือชาร์จไม่เข้า”
ภาพหนึ่งเป็นพอร์ต USB-C มีฝุ่น
Alt:
พอร์ต USB-C ของมือถือมีฝุ่นสะสมบริเวณช่องชาร์จ
ดีกว่า
มือถือชาร์จไม่เข้า วิธีแก้มือถือชาร์จไม่เข้า
Alt Text กับ Semantic SEO
Alt สามารถช่วยอธิบาย Entity หรือ Object ในภาพตามจริง
แต่ไม่ควรเพิ่ม Semantic Terms ที่ภาพไม่ได้แสดง
Alt Text กับ Entity SEO
ภาพของบุคคล ผลิตภัณฑ์ หรือสถานที่สามารถระบุ Entity เมื่อเกี่ยวข้อง
ตัวอย่าง
หน้า Settings ของ WordPress รุ่นปัจจุบัน
ตามบริบท
แต่ไม่ควรยัด Entities หลายชื่อ
Alt Text กับ Image Search
ถ้าต้องการให้ภาพมีโอกาสถูกเข้าใจใน Image Search ควรดูภาพรวม
- Alt
- Filename
- Page Topic
- Surrounding Text
- Image Quality
- Crawlability
ไม่ใช่ Alt Text อย่างเดียว
Alt Text กับ Google Images
ไม่ควรคิดว่าใส่ Keyword 10 คำใน Alt แล้วจะขึ้นอันดับ
Image Search ยังพิจารณาบริบทของหน้าและองค์ประกอบอื่น
ดังนั้น Alt ที่ตรงภาพดีที่สุด
Alt Text กับ WebP
ไม่เกี่ยวกับ Format โดยตรง
ไฟล์ JPG, PNG, WebP, AVIF ก็สามารถมี Alt ผ่าน HTML ได้เหมือนกัน
Alt Text กับ Lazy Loading
Lazy Loading เป็นเรื่อง Performance
Alt Text ยังควรมีอยู่ตามปกติ
ตัวอย่าง
<img src="image.webp" loading="lazy" alt="กราฟ Organic Traffic">
ทั้งสอง Attribute ทำหน้าที่ต่างกัน
Alt Text กับ Responsive Images
srcset สามารถมีหลายขนาดภาพ
แต่ <img> ยังมี Alt เดียวสำหรับเนื้อหาภาพเดียวกัน
ไม่ต้องเขียน Alt แยกทุก Resolution
Alt Text กับ Image Compression
Compression ลดขนาดไฟล์
Alt Text เพิ่มคำอธิบาย
เป็นคนละเรื่อง
Image SEO ที่ดีควรดูทั้งสอง
Alt Text กับ Page Speed
ข้อความ Alt มีขนาดเล็กมากและไม่ใช่ปัญหา Page Speed หลัก
อย่าตัด Alt เพื่อทำเว็บเร็วขึ้น
ควร Optimize
- File Size
- Dimensions
- Lazy Loading
- Format
แทน
Alt Text กับ Core Web Vitals
Alt Text ไม่ได้ทำให้ LCP, INP หรือ CLS ดีขึ้นโดยตรง
แต่การกำหนด Dimensions ของภาพอาจเกี่ยวกับ CLS
อย่าสับสนสองเรื่อง
Alt Text กับ Width และ Height
ควรกำหนด Image Dimensions เมื่อเหมาะ เพื่อช่วย Layout Stability
ตัวอย่าง
<img src="seo-chart.webp"
width="1200"
height="800"
alt="กราฟ Organic Traffic">
Alt และ Dimensions ทำคนละหน้าที่
Alt Text กับ CSS Background Image
Background Image ใน CSS ไม่มี alt Attribute แบบ <img>
ดังนั้นถ้าภาพมีข้อมูลสำคัญ ไม่ควรใช้ Background Image อย่างเดียวจนผู้ใช้ Accessibility ไม่ได้รับข้อมูล
Decorative Background สามารถใช้ CSS ได้เหมาะกว่า
Alt Text กับ SVG
SVG ที่ใช้ผ่าน <img> สามารถมี Alt ได้
ถ้า Inline SVG ต้องจัด Accessibility ตามโครงสร้างของ SVG
หลักสำคัญคือผู้ใช้ต้องเข้าถึงความหมายที่จำเป็น
Alt Text กับ Icon Fonts
ไอคอนจาก Font ควรจัด Accessibility ให้เหมาะ และไม่ควรให้ Screen Reader อ่าน Character แปลก ๆ โดยไม่มี Context
Alt Text กับ Emoji
Emoji ไม่ใช่ Image Alt Text ในกรณี Text Emoji
Screen Reader อาจอ่านชื่อ Emoji ตามระบบ
ไม่ควรใช้ Emoji แทนข้อมูลที่จำเป็นอย่างเดียว
Alt Text กับ Link Image
ถ้าภาพเป็นลิงก์
Alt ควรช่วยอธิบาย Purpose ของลิงก์
ตัวอย่าง Logo:
<a href="/">
<img src="logo.png" alt="comsiam">
</a>
เหมาะกว่า Keyword-heavy Alt
Alt Text กับ Anchor Text
เมื่อภาพเป็นลิงก์ Alt สามารถมีบทบาทคล้ายข้อความอธิบายลิงก์
ดังนั้นควรยิ่งหลีกเลี่ยง Keyword Stuffing
Alt Text กับ Internal Links
ภาพที่ Link ไปหน้าอื่นในเว็บเป็น Internal Link ได้
เช่น Product Card
Alt ควรอธิบายภาพ/ปลายทางตาม Context ไม่ใช่ใช้เพื่อปั้น Anchor Text
Alt Text กับ External Links
ถ้ารูปเป็น Link ออกเว็บไซต์อื่น ก็เป็น External Link
Alt ยังควรอธิบาย Function หรือภาพ
Alt Text กับ Backlink
ถ้าเว็บไซต์ภายนอกใช้ภาพเป็นลิงก์กลับมายังหน้าเรา ข้อมูล Alternative ของภาพอาจช่วย Context ของลิงก์ แต่ไม่ควรออกแบบ Image Backlinks เพื่อยัด Keywords
หากเว็บไซต์ต้องการ สร้าง Backlink คุณภาพ ควรให้ความสำคัญกับคุณภาพของเว็บไซต์ต้นทาง ความเกี่ยวข้องของหน้า และบริบทของการอ้างอิงมากกว่าพยายามควบคุม Alt Text หรือ Keyword-rich Image Anchors เพราะลิงก์ที่ดีควรมีเหตุผลทางเนื้อหาจริง
Alt Text กับ Logo Backlink
บางเว็บไซต์ Link กลับผ่านโลโก้หรือ Badge
Alt ที่ใช้ Brand Name เป็นธรรมชาติ
ไม่ควรใช้
best seo backlink cheap seo company
เป็น Logo Alt
Alt Text กับ Infographic Backlink
Infographic อาจได้รับ Backlinks หากมีข้อมูลที่คนอยากอ้าง
Alt ควรอธิบาย Infographic
ไม่ใช่ Keyword Anchor ที่พยายามควบคุม Link Profile
Alt Text กับ WordPress
WordPress Media Library มีช่อง
Alternative Text
สามารถใส่ Alt ของภาพได้
แต่ต้องเข้าใจว่า Alt ควรสัมพันธ์กับการใช้ภาพในบริบทของหน้า
WordPress Alt Text ใส่ตรงไหน
เมื่อ Upload หรือเลือกภาพใน Media Library สามารถกรอกช่อง Alternative Text
จากนั้น WordPress จะใช้ค่าดังกล่าวใน <img alt=""> ตาม Implementation
ควรตรวจ HTML จริงหากใช้ Page Builder หรือ Theme ที่ปรับภาพ
WordPress ต้องใส่ Alt ทุกภาพไหม
ควรพิจารณาทุกภาพ
แต่ Decorative Image สามารถใช้ Alt ว่าง
ไม่ควรเขียนคำอธิบายให้ทุก Decoration เพียงเพื่อ SEO
WordPress Featured Image ต้องมี Alt ไหม
ถ้า Featured Image ให้ข้อมูลแก่ผู้ใช้ ควรมี Alt ที่เหมาะ
แต่ Theme บางแบบใช้ภาพเป็น Decoration หรือซ้ำกับ Title
ต้องดูบริบทจริง
WordPress Alt Text กับ Media Title
อย่าสับสน
Media Title ไม่ใช่ Alt
กรอก Media Title แล้วไม่ได้หมายความว่า Alt จะถูกต้องเสมอ
ควรตรวจช่อง Alternative Text โดยตรง
WordPress Alt Text กับ Caption
Caption เป็นข้อความที่มองเห็นได้
Alt เป็น Alternative Description
ไม่ต้องเหมือนกันทุกครั้ง
Alt Text กับ Gutenberg
Image Block มีช่อง Alt Text
ควรเขียนตามรูปที่ใช้อยู่ใน Section นั้น
Alt Text กับ Rank Math
SEO Plugins อาจเตือนเรื่อง Alt Text หรือ Focus Keyword
ใช้เป็น Reminder ได้
แต่ไม่ควรใส่ Focus Keyword ในทุกภาพเพื่อทำคะแนนเขียว
Alt Text กับ Yoast
หลักเดียวกัน
Plugin Score ไม่ใช่เหตุผลให้ Keyword Stuffing ใน Alt
Alt Text กับ Blogspot
Blogspot รองรับรูปภาพในบทความและสามารถมี Alt Attribute ได้ตาม Editor/HTML
ควรใส่ Alt ให้ภาพ Informative โดยเฉพาะ
- Screenshot
- Diagram
- Product
- Troubleshooting Image
Blogspot ควรใส่ Alt Text ภาษาอะไร
ถ้าบทความเป็นภาษาไทย สามารถใช้ภาษาไทยได้
ถ้า Technical Term เป็นอังกฤษ เช่น FiveM หรือ Windows สามารถใช้ร่วมกันตามธรรมชาติ
ตัวอย่าง
FiveM Settings แสดงค่า Voice Chat Enabled
Alt Text สำหรับ FiveM
ตัวอย่างภาพ Ping
ดี:
หน้าจอ FiveM แสดงค่า Ping 180 ms ในรายชื่อผู้เล่น
ไม่ดี:
FiveM Ping FiveM Lag FiveM Server FiveM ลด Ping
Alt Text สำหรับ Mobile Problem
ภาพพอร์ตชาร์จ:
พอร์ต USB-C ของมือถือมีฝุ่นอุดตันบริเวณช่องชาร์จ
ภาพ Battery Settings:
หน้าจอ Battery Usage แสดงแอปที่ใช้แบตเตอรี่สูง
Alt Text สำหรับ Windows
ภาพ Task Manager:
Task Manager บน Windows 10 แสดง Disk Usage 100%
ชัดและสัมพันธ์กับปัญหา
Alt Text สำหรับ SEO Article
ภาพ Search Console:
Google Search Console Performance แสดง Clicks และ Impressions รายวัน
ดีมากกว่าคำว่า
SEO Google
Alt Text สำหรับ Facebook
Screenshot Page Settings:
หน้าตั้งค่า Facebook Page แสดงเมนู Page Access
อธิบายจุดที่ผู้ใช้ต้องดู
Alt Text สำหรับ YouTube
Screenshot YouTube Studio:
YouTube Studio Analytics แสดงยอด Views และ Watch Time
ตรงภาพ
Alt Text สำหรับ Product Image
ดี:
โต๊ะทำงานไม้สีโอ๊คขนาด 120 เซนติเมตร มุมด้านหน้า
ไม่ดี:
โต๊ะราคาถูก โต๊ะดี โต๊ะทำงานดีที่สุด ซื้อโต๊ะ
Alt Text สำหรับ Fashion
ตัวอย่าง
เสื้อเชิ้ตผู้ชายสีขาวแขนยาว มุมด้านหน้า
ถ้าสีและรูปทรงมีความสำคัญ
Alt Text สำหรับอาหาร
ข้าวผัดกุ้งเสิร์ฟพร้อมแตงกวาและมะนาวบนจานสีขาว
เมื่อภาพมีข้อมูลนั้น
Alt Text สำหรับโรงแรม
ห้องพักเตียงคิงไซซ์พร้อมหน้าต่างมองเห็นวิวทะเล
ช่วยผู้ใช้เข้าใจภาพ
Alt Text สำหรับสถานที่
ทางเข้าวัดพระแก้วในกรุงเทพฯ ช่วงกลางวัน
ถ้าตรงภาพและ Context
Alt Text สำหรับแผนที่
แผนที่อาจเป็น Complex Image
Alt สามารถสรุป
แผนที่แสดงตำแหน่งสำนักงานและสถานีรถไฟใกล้เคียง
และให้ข้อมูลเส้นทางเป็น Text เพิ่มเติม
Alt Text สำหรับ Diagram
ตัวอย่าง
แผนภาพแสดงกระบวนการ Crawling จาก Googlebot ไปยัง Index
สั้นแต่สื่อ Main Idea
Alt Text สำหรับ Flowchart
Flowchart ขั้นตอน Keyword Research จาก Seed Keyword ไป Keyword Mapping
ถ้าต้องการรายละเอียดทุก Step ควรมี Text รอบภาพด้วย
Alt Text สำหรับ Chart
ควรอธิบาย Trend สำคัญ
ไม่จำเป็นต้องอ่านทุก Data Point ผ่าน Alt
ตัวอย่าง
กราฟ Organic Clicks เพิ่มขึ้นต่อเนื่องจากมกราคมถึงมิถุนายน
Alt Text สำหรับ Table Image
หากข้อมูลสำคัญมาก ควรใช้ HTML Table แทนการใช้ภาพตารางเมื่อทำได้
เพราะ Accessible และ Responsive กว่า
Alt Text สำหรับ QR Code
ควรบอกจุดประสงค์และมี Link Alternative
เช่น
QR Code สำหรับเปิดหน้าลงทะเบียน
และควรมี Text Link ให้ผู้ใช้คลิกได้ด้วย
Alt Text สำหรับ CAPTCHA
มีข้อกำหนด Accessibility เฉพาะ
ไม่ควรใช้ Alt เปิดเผยคำตอบของ CAPTCHA
ควรใช้ระบบที่รองรับ Accessibility ทางอื่นด้วย
Alt Text สำหรับ Decorative Divider
ใช้
alt=""
หรือใช้ CSS Decoration
ไม่ต้องเขียน
เส้นแบ่ง SEO
Alt Text สำหรับ Spacer Image
ควรหลีกเลี่ยง Spacer Image ใน Design สมัยใหม่
ถ้ายังใช้ ให้ Alt ว่าง
Alt Text สำหรับ Social Icon
ถ้า Icon เป็น Link ไป Facebook
Alt/Accessible Name ควรสื่อ
หรือ
ติดตามเราบน Facebook
ไม่ใช่
ไอคอนสีน้ำเงิน
Alt Text สำหรับ Search Icon
ถ้าทำหน้าที่ Search
คำอธิบายควรเป็น
ค้นหา
ไม่ใช่
แว่นขยาย
Alt Text สำหรับ Cart Icon
ถ้าปุ่มเปิด Shopping Cart
ใช้
ตะกร้าสินค้า
หรือ Accessible Label ตามบริบท
Alt Text สำหรับ Menu Icon
ถ้า Hamburger Icon เปิด Menu
ควรมี Accessible Name
เปิดเมนู
ไม่จำเป็นต้องอธิบายเส้นสามเส้น
Alt Text กับ ARIA Label
ใน Functional Elements บางกรณี ARIA Labels และ Accessible Names มีบทบาท
แต่ไม่ควรใช้ ARIA แบบสุ่มเพื่อแทน Semantic HTML ทั้งหมด
Alt Text กับ Accessibility คืออะไร
Accessibility หมายถึงการทำให้เว็บไซต์ใช้งานได้กับผู้ใช้ที่มีความสามารถและอุปกรณ์หลากหลาย
Alt Text เป็นส่วนสำคัญของ Web Accessibility เพราะรูปภาพเป็นข้อมูลที่ผู้ใช้บางคนไม่สามารถมองเห็นได้
Screen Reader อ่าน Alt Text อย่างไร
Screen Reader สามารถประกาศข้อมูลของ <img> ตาม Accessible Name ซึ่งมักได้จาก Alt Attribute
ดังนั้นคำอธิบายควรมีความหมายเมื่อฟังด้วยเสียง
Alt Text ที่ดีสำหรับ Screen Reader
ควร
- กระชับ
- ตรงภาพ
- ไม่ซ้ำ Text รอบภาพโดยไม่จำเป็น
- ไม่เริ่มด้วย “รูปภาพของ” ทุกครั้ง
- ไม่ยัด Keyword
Alt Text ซ้ำ Caption ได้ไหม
ได้บางกรณี แต่ไม่ควรทำโดยอัตโนมัติ
ถ้า Caption ให้ข้อมูลเดียวกันครบและภาพไม่มีข้อมูลเพิ่มเติม อาจพิจารณา Alt ตาม Accessibility Context
ต้องดู Page Structure จริง
Alt Text ซ้ำทุกภาพมีปัญหาไหม
ถ้าภาพต่างกันแต่ใช้ Alt เดียวกันทั้งหมด เช่น
alt="SEO"
จะไม่ช่วยอธิบายภาพ
ควรเขียนเฉพาะภาพ
Duplicate Alt Text เป็น SEO Error ไหม
ไม่ใช่ Penalty อัตโนมัติ
บางภาพเดียวกัน เช่น Logo อาจใช้ Alt เหมือนกันหลายหน้าโดยธรรมชาติ
ปัญหาเกิดเมื่อภาพต่างกันแต่ Alt ถูก Generate ซ้ำแบบไม่มีความหมาย
Missing Alt Text คืออะไร
ตัวอย่าง
<img src="seo.jpg">
ไม่มี alt
ต่างจาก
<img src="decorative.jpg" alt="">
ซึ่งตั้งใจใช้ Empty Alt
สองกรณีนี้มีความหมายด้าน Accessibility ต่างกัน
Empty Alt คืออะไร
alt=""
หมายถึง Alternative Text ว่าง
เหมาะกับ Decorative Image ในหลายกรณี
เพื่อให้ Assistive Technology ข้ามภาพที่ไม่มีข้อมูล
Missing Alt กับ Empty Alt ต่างกันอย่างไร
Missing Alt:
ไม่ได้กำหนด Alternative
Empty Alt:
ตั้งใจระบุว่าภาพไม่มีข้อมูลที่ต้องประกาศ
ความแตกต่างนี้สำคัญต่อ Accessibility
Alt Text กับ Decorative Image ใน WordPress
บาง CMS อาจไม่ทำให้การตั้ง Empty Alt ชัดเจน
หาก Decoration จำนวนมาก ควรพิจารณาใช้ CSS Background แทน <img> เมื่อเหมาะ
Alt Text กับ Hero Image
ถ้า Hero Image มีข้อมูลสำคัญ เช่น Product หรือสถานที่ ควรอธิบาย
ถ้าเป็น Background Decoration และ H1 อธิบายทุกอย่างแล้ว อาจไม่ต้องมี Alt Content
ต้องดูหน้าที่ของภาพ
Alt Text กับ Text Inside Image
ถ้าภาพมี Text สำคัญที่ไม่มีในหน้าอื่น Alt ควรสะท้อนข้อมูลนั้น
แต่ถ้ามีข้อความจำนวนมาก ควรนำ Text สำคัญมาเป็น HTML จริงด้วย
ห้ามใส่ข้อความสำคัญไว้ในภาพอย่างเดียวเพราะอะไร
เพราะ
- Screen Reader อาจเข้าถึงไม่ได้
- Mobile อ่านยาก
- Zoom ยาก
- Search Context จำกัด
- Translation ยาก
HTML Text เหมาะกว่าสำหรับข้อมูลหลัก
Alt Text กับ Meme
ถ้า Meme มีความหมายจาก Text + Image อาจต้องอธิบายทั้งบริบทที่สำคัญ
แต่อย่าทำ Alt ยาวเกินโดยไม่มีความจำเป็น
Alt Text กับ Screenshot ที่มีข้อความ
ไม่ต้อง Copy Text ทุกคำใน Screenshot หาก Content รอบภาพอธิบายอยู่แล้ว
ควรอธิบายสิ่งที่ Screenshot แสดงและสิ่งที่ผู้ใช้ควรสังเกต
Alt Text กับ OCR
ไม่ควรพึ่งการดึง Text จากภาพเพียงอย่างเดียวแทน Alt
คนเขียนควรเข้าใจว่าภาพมีหน้าที่อะไรในบทความ
Alt Text กับ Image Sitemap
Image Sitemap เป็นอีกเครื่องมือหนึ่งสำหรับ Image Discovery ในบางเว็บไซต์
Alt Text ไม่ได้แทน Image Sitemap และ Image Sitemap ก็ไม่แทน Alt
Alt Text กับ Structured Data
Product, Recipe หรือ Article Structured Data อาจมี Image Properties
แต่ไม่ได้แทน Alt Attribute
Alt Text กับ Product Schema
Schema ช่วยบอกข้อมูล Product
Alt ช่วยอธิบายภาพ
ทำหน้าที่ต่างกัน
Alt Text กับ Open Graph Image
OG Image ใช้สำหรับ Social Sharing
ไม่ได้หมายความว่า OG Image Metadata เป็น Alt Text ของรูปใน Body
บาง Platform มี Alternative Text ของตัวเอง แต่ต้องแยกบริบท
Alt Text กับ Social Media
เมื่ออัปโหลดภาพไป Social Platforms หลายแห่งสามารถเพิ่ม Alt Text ของภาพได้
เป็น Accessibility Practice เช่นกัน
ไม่ใช่เรื่อง SEO เว็บไซต์โดยตรงทุกกรณี
Alt Text กับ Image CDN
หาก Image URL มาจาก CDN Alt Text ยังอยู่ใน HTML Page
CDN Domain ไม่ได้ทำให้ Alt หาย
Alt Text กับ Lazy-loaded CDN Images
ต้องตรวจว่า HTML/Rendered DOM ยังมี alt
Optimization Plugin ไม่ควรลบ Alt โดยไม่ตั้งใจ
Alt Text กับ JavaScript
ถ้าภาพถูก Render ด้วย JavaScript ควรตรวจ Final DOM ว่ามี Alt ที่ถูกต้อง
Alt Text กับ React
React ใช้ alt ใน <img> ได้ตามปกติ
ตัวอย่าง
<img src={imageUrl} alt="กราฟ Organic Traffic" />
หลัก Accessibility เหมือน HTML
Alt Text กับ Next.js Image
Component ของ Framework สามารถกำหนด Alt ได้
ควรใช้คำอธิบายตามภาพ ไม่ใช่ Auto-generate Keyword
Alt Text กับ Page Builder
Elementor หรือ Builder อื่นอาจดึง Alt จาก Media Library
ควรตรวจว่า Image Widget ใช้ค่า Alt จริง
Alt Text กับ Theme
Theme บางตัวอาจแสดงภาพ Background แทน <img>
ต้องตรวจว่าภาพมีข้อมูลสำคัญหรือเป็น Decoration
Alt Text กับ Image Carousel
แต่ละภาพใน Carousel ควรมีคำอธิบายที่เหมาะถ้าภาพมีข้อมูล
ไม่ควรใช้ Alt เดียวกันทั้ง 10 รูปเมื่อแต่ละรูปต่างกัน
Alt Text กับ Gallery
Gallery สินค้าควรแยกคำอธิบายตามมุมภาพเมื่อมีประโยชน์
เช่น
- มุมด้านหน้า
- ด้านหลัง
- รายละเอียดพื้นรองเท้า
Alt Text กับ Thumbnail
ถ้า Thumbnail ลิงก์ไปบทความและมี Title Text อยู่ข้าง ๆ แล้ว อาจเกิดข้อมูลซ้ำทาง Accessibility
ต้องดู Markup ทั้ง Component ไม่ใช่ Alt แยกอย่างเดียว
Alt Text กับ Card Layout
Product/Post Card มักมี
- Image Link
- Title Link
หากทั้งสอง Link ไป URL เดียวกัน ต้องออกแบบ Accessible Names ไม่ให้ซ้ำจนรบกวนผู้ใช้
Alt Text กับ SEO Audit
Image SEO Audit สามารถตรวจ
- Missing Alt
- Empty Alt
- Duplicate Alt
- Oversized Images
- Missing Dimensions
- Broken Images
- Large Files
แต่ต้อง Human Review เพราะ Tool ไม่รู้เสมอว่าภาพใด Decorative
Missing Alt ทุกภาพต้องแก้ไหม
ต้องดูภาพ
Informative Images ควรมีคำอธิบาย
Decorative Images อาจควรใช้ Empty Alt
ดังนั้นรายงาน “Missing Alt 500 รูป” ไม่ได้หมายความว่าให้ใส่ Keyword 500 ครั้ง
Alt Text Audit ต้องเริ่มจากหน้าไหน
Priority สูง:
① หน้าที่มี Traffic สูง
② Product Pages
③ Image-driven Content
④ Important Landing Pages
⑤ Tutorials ที่ใช้ Screenshot
⑥ Pages ที่ต้องการ Accessibility สูง
Alt Text Automation ดีไหม
ระบบสามารถช่วย Suggest Alt ได้ แต่ต้องระวัง
- Hallucinated Details
- Wrong Product Color
- Wrong Person
- Keyword Stuffing
- Generic Text
ควร Review โดยเฉพาะภาพสำคัญ
AI ช่วยเขียน Alt Text ได้ไหม
ได้ หาก AI สามารถเข้าใจภาพจริง
แต่ควรตรวจว่า
- ตรงภาพ
- ไม่เพิ่มข้อมูลที่ไม่มี
- ไม่ยาวเกิน
- ไม่ยัด Keyword
AI Auto Alt Text สำหรับ E-commerce
มีประโยชน์เมื่อสินค้าหลายพันรูป
แต่ควรใช้ Product Data จริง เช่น
- Product Name
- Color
- Angle
ไม่ Generate Marketing Claims
Alt Text กับ Programmatic SEO
Programmatic Pages สามารถ Generate Alt จาก Data
ตัวอย่าง
[ชื่อสินค้า] [สี] มุมด้านหน้า
ดีถ้าข้อมูลถูก
ต้องป้องกัน
undefined
หรือข้อมูลซ้ำ
Alt Text กับ Dynamic Images
ต้องตรวจ Variable หาย
ตัวอย่างผิด
alt="รองเท้า สี รุ่น "
ควรมี Fallback Logic
Alt Text กับ E-commerce
E-commerce มีภาพจำนวนมาก จึงควรทำ Template Alt ที่ยังเป็น Human-readable
ตัวอย่าง
Product:
Nike Zoom X
Color:
Black
View:
Side
Alt:
Nike Zoom X สีดำ มุมด้านข้าง
ไม่ต้องเพิ่ม
“ซื้อ ราคาถูก ออนไลน์”
Alt Text กับ Product Variants
ภาพ Variant สีแดงควรระบุสีแดงเมื่อสีมีความสำคัญ
อย่าใช้ Alt สีดำกับทุก Variant
Alt Text กับ Category Page
รูป Category Hero อาจอธิบายสินค้าหลัก
แต่ Product Grid Images ควรมี Alt ตาม Product
Alt Text กับ SaaS
Screenshot UI ควรอธิบาย Feature ที่แสดง
ตัวอย่าง
Dashboard Rank Tracking แสดงอันดับ Keywords รายวัน
Alt Text กับ B2B
Diagram Process สามารถอธิบาย Main Flow
แผนภาพขั้นตอน ERP จาก Order ไป Inventory และ Accounting
Alt Text กับ Local SEO
ภาพร้าน/สถานที่สามารถอธิบายอย่างเป็นธรรมชาติ
หน้าร้านซ่อมคอมในขอนแก่น บริเวณทางเข้า
ถ้า Location มีความเกี่ยวข้องจริง
อย่ายัดชื่อจังหวัดในทุกภาพ
Alt Text กับ News SEO
News Image Alt ควรระบุบุคคลหรือเหตุการณ์ตามจริงเมื่อสำคัญ
ไม่ควรเขียน Clickbait Keyword
Alt Text กับ Image Copyright
Alt Text ไม่เกี่ยวกับ License
การเขียน Alt หรือใส่ Credit ไม่ได้ทำให้เรามีสิทธิ์ใช้ภาพ
ต้องตรวจสิทธิ์แยก
Alt Text กับ Photo Credit
Photo Credit เป็น Attribution
Alt Text เป็น Description
ไม่ควรใช้ Alt เพื่อใส่ Copyright Credit ถ้าไม่ใช่คำอธิบายภาพ
Alt Text กับ Photographer Name
ใส่ใน Caption/Credit Area เมื่อ License ต้องการ
ไม่จำเป็นต้องใส่ใน Alt เว้นแต่ชื่อ Photographer เป็นข้อมูลของภาพจริงในบริบท
Alt Text กับ Watermark
Watermark ไม่แทน Alt Text
และไม่ใช่ Image SEO Requirement
Alt Text กับ Search Console
Search Console ไม่ได้ให้รายงาน Alt Text แบบตรงไปตรงมาสำหรับทุกภาพ
มักต้องใช้ Crawler หรือ Accessibility Tools สำหรับ Audit
Alt Text กับ Lighthouse
Accessibility Audits สามารถตรวจ Images ที่ไม่มี Alternative Text ในบางกรณี
แต่ Automated Tool ไม่สามารถตัดสินคุณภาพของคำอธิบายได้ทั้งหมด
Alt Text กับ Accessibility Audit
ต้องตรวจมากกว่า “มี Alt หรือไม่”
ควรถามว่า
- Alt เหมาะกับหน้าที่ของภาพไหม
- Decorative ถูกข้ามไหม
- Functional Image บอก Action ไหม
- Complex Image มีคำอธิบายเพิ่มเติมไหม
Alt Text กับ SEO Plugin Score
อย่าเพิ่ม Primary Keyword ลงทุก Alt เพียงเพื่อให้ Score เพิ่ม
SEO Tool ไม่รู้ Context ของภาพเท่าคนเขียนเสมอไป
Alt Text กับ Keyword Density Tool
ไม่ควรนับ Alt Text เป็นพื้นที่เพื่อเพิ่ม Keyword Density
Content ต้องถูกเขียนเพื่อผู้ใช้
Alt Text กับ Hidden Text
Alt ไม่ใช่พื้นที่ซ่อนข้อความยาวที่ผู้ใช้ปกติไม่เห็น
การยัด Keyword ลง Alt เพราะคิดว่า Search Engine เห็นแต่คนไม่เห็น เป็นแนวทางที่ควรหลีกเลี่ยง
Alt Text กับ Spam
ตัวอย่าง Spam Alt
รับทำ SEO SEO ราคาถูก SEO Google SEO เว็บไซต์ SEO มืออาชีพ
แม้ภาพเป็นเรื่อง SEO ก็ไม่เหมาะ
Alt Text กับ Image Link Spam
การแจก Badge/Image ที่มี Keyword-rich Alt และ Link กลับแบบจำนวนมากเพื่อ Ranking ควรระวัง
ธรรมชาติของ Link และ Relationship สำคัญกว่า
Alt Text กับ User Experience
ผู้ใช้ทั่วไปอาจไม่เห็น Alt เมื่อภาพโหลดปกติ
แต่ผู้ใช้ Assistive Technology ใช้ข้อมูลนี้จริง
ดังนั้น Alt ไม่ใช่ “SEO Field ที่ซ่อนอยู่”
ควรมองว่าเป็น Content สำหรับผู้ใช้กลุ่มหนึ่ง
Alt Text กับ Accessibility First
วิธีคิดที่ดีคือ
ถ้าผู้ใช้มองไม่เห็นภาพ เขาต้องรู้อะไรจากภาพนี้เพื่อเข้าใจเนื้อหา
คำตอบนั้นมักเป็นแนวทางของ Alt ที่ดี
วิธีเขียน Alt Text ทีละขั้นตอน
① ดูภาพจริง
อย่าเริ่มจาก Keyword
② อ่านเนื้อหารอบภาพ
เข้าใจว่าภาพอยู่ตรงนี้เพื่ออะไร
③ ระบุประเภทภาพ
Informative, Functional, Decorative หรือ Complex
④ เลือกข้อมูลสำคัญ
ไม่ต้องบรรยายทุกอย่าง
⑤ เขียนสั้นและชัด
ใช้ภาษาคน
⑥ ใส่ Keyword เมื่อเป็นส่วนหนึ่งของภาพจริง
ไม่บังคับ
⑦ ตัดคำ “รูปภาพของ” เมื่อไม่จำเป็น
⑧ ไม่ยัด Marketing Words
⑨ ตรวจว่าซ้ำ Text รอบภาพเกินไปไหม
⑩ ลองคิดในมุม Screen Reader
ฟังแล้วเข้าใจหรือไม่
Image Alt Text Checklist
ก่อน Publish ตรวจว่า
① ภาพมีข้อมูลไหม
ถ้ามีควรมี Alt ที่เหมาะ
② ภาพเป็น Decoration ไหม
อาจใช้ alt=""
③ Alt ตรงภาพจริงไหม
สำคัญที่สุด
④ Alt สื่อ Purpose ใน Context ไหม
ไม่ใช่แค่ Object Recognition
⑤ มี Keyword Stuffing ไหม
ต้องไม่มี
⑥ Alt ยาวเกินไปไหม
ย่อได้หรือไม่
⑦ ใช้คำว่า “รูปภาพของ” โดยไม่จำเป็นไหม
ตัดได้
⑧ Functional Image บอก Action ไหม
เช่น “ค้นหา”
⑨ Complex Image มีรายละเอียดใน Content เพิ่มไหม
ถ้าจำเป็น
⑩ Screen Reader User จะได้ข้อมูลอะไร
ต้องมีประโยชน์จริง
ข้อผิดพลาดในการเขียน Alt Text
① ไม่ใส่ Alt ให้ Informative Image
เสีย Accessibility Context
② ใส่ Keyword ทุกภาพ
เกิด Keyword Stuffing
③ ใช้ Alt เดียวทั้ง Gallery
ไม่อธิบายแต่ละภาพ
④ เขียน “image.jpg”
ไม่มีความหมาย
⑤ ใช้ Filename เป็น Alt อัตโนมัติ
เช่น IMG_82736
ไม่ช่วยผู้ใช้
⑥ เขียนคำว่า “รูปภาพ” อย่างเดียว
ไม่อธิบายอะไร
⑦ ใส่ Alt ยาวเป็น Paragraph
อาจรบกวน Screen Reader
⑧ อธิบาย Decoration
สร้าง Noise
⑨ ไม่อธิบาย Function ของ Image Button
ทำ Accessibility แย่
⑩ เขียนสิ่งที่ไม่มีในภาพ
ทำให้ข้อมูลผิด
ตัวอย่าง Alt Text ไม่ดี
ภาพเป็นหน้าจอ Search Console
ไม่ดี:
SEO Google SEO Search Console Google Ranking SEO Tool
หรือ
รูปภาพ
หรือ
IMG-2026-08-13.jpg
ตัวอย่าง Alt Text ที่ดีกว่า
Google Search Console Performance แสดง Clicks และ Impressions รายวัน
ชัดว่าเป็นอะไรและสิ่งสำคัญในภาพคืออะไร
ตัวอย่างภาพมือถือ
ภาพ: หน้าจอ Battery Usage
Alt:
หน้าจอ Battery Usage บนมือถือแสดงว่าแอป YouTube ใช้แบตเตอรี่สูงสุด
ถ้าข้อมูลนั้นสำคัญต่อบทความ
ตัวอย่างภาพ FiveM
ภาพ: Server List แสดง Ping
Alt:
รายชื่อเซิร์ฟเวอร์ FiveM แสดงค่า Ping ตั้งแต่ 35 ถึง 180 ms
ตัวอย่างภาพ Windows
ภาพ: Task Manager CPU 95%
Alt:
Task Manager บน Windows 10 แสดง CPU Usage 95%
ตัวอย่างภาพ WordPress
ภาพ: Permalink Settings
Alt:
หน้า Permalink Settings ของ WordPress เลือกโครงสร้าง Post Name
ตัวอย่าง Product
ภาพ: เตียงสีเทา
Alt:
เตียงขนาด 5 ฟุตบุผ้าสีเทา มุมด้านหน้า
ไม่ต้องใส่ราคา หากราคาไม่ได้อยู่ในภาพและเปลี่ยนได้
Alt Text FAQ
Image Alt Text คืออะไร
Image Alt Text คือข้อความทางเลือกของรูปภาพที่กำหนดผ่าน alt Attribute ใน HTML เพื่ออธิบายความหมายหรือหน้าที่ของภาพ
Alt Text สำคัญกับ SEO ไหม
มีประโยชน์ต่อ Image Understanding, Image Search และ Accessibility แต่ไม่ใช่พื้นที่สำหรับยัด Keyword เพื่อเพิ่มอันดับ
ทุกภาพต้องมี Alt Text ไหม
ทุกภาพควรถูกพิจารณา แต่ Decorative Image อาจใช้ Empty Alt alt="" แทนคำอธิบาย
Alt Text ต้องมี Keyword ไหม
ไม่จำเป็น ใช้ Keyword เมื่อเป็นส่วนหนึ่งของสิ่งที่ภาพแสดงจริงและอ่านเป็นธรรมชาติ
Primary Keyword ต้องอยู่ทุก Alt ไหม
ไม่ควร แต่ละภาพควรมีคำอธิบายของตัวเอง
Alt Text ควรยาวเท่าไร
ไม่มีจำนวนตัวอักษรตายตัว ควรกระชับแต่เพียงพอต่อการสื่อข้อมูลสำคัญ
ต้องเขียน “รูปภาพของ” หรือไม่
โดยทั่วไปไม่จำเป็น สามารถเริ่มอธิบายสิ่งที่อยู่ในภาพได้เลย
Alt Text กับ Caption ต่างกันอย่างไร
Alt Text เป็น Alternative Description ส่วน Caption เป็นข้อความที่ผู้ใช้เห็นประกอบภาพ
Alt Text กับ Filename ต่างกันอย่างไร
Filename คือชื่อไฟล์ ส่วน Alt Text คือคำอธิบายภาพในบริบทของหน้า
Alt Text กับ Image Title ต่างกันอย่างไร
Alt ใช้เป็น Alternative Description ส่วน Title Attribute เป็นข้อมูลเสริมและไม่ควรใช้แทน Alt
Decorative Image ต้องมี Alt ไหม
โดยทั่วไปมักใช้ Empty Alt alt="" เพื่อให้ Assistive Technology ข้ามภาพ
Alt Text ภาษาไทยได้ไหม
ได้ และควรใช้ภาษาที่เหมาะกับผู้อ่านและหน้าเว็บ
Alt Text ซ้ำได้ไหม
ภาพเดียวกันในบริบทเดียวกันอาจมีคำอธิบายเหมือนกันได้ แต่ไม่ควรใช้ Alt เดียวกับภาพทุกประเภทแบบอัตโนมัติ
WordPress ใส่ Alt Text ตรงไหน
สามารถกรอกในช่อง Alternative Text ของ Media/Image Settings
Blogspot ใส่ Alt Text ได้ไหม
ได้ และเหมาะมากกับ Screenshot, Diagram และภาพประกอบการแก้ปัญหา
Alt Text ช่วย Google Images ไหม
เป็นองค์ประกอบหนึ่งที่ช่วยอธิบายรูปภาพ แต่ Image Search ยังพิจารณา Context, Page Content และปัจจัยอื่นร่วมด้วย
ใส่ Keyword หลายคำใน Alt ดีไหม
ไม่ควร Alt ต้องอธิบายภาพ ไม่ใช่ Keyword List
รูปเป็นลิงก์ Alt สำคัญไหม
สำคัญ เพราะ Alt อาจช่วยอธิบายภาพและ Purpose ของลิงก์ในบริบท Accessibility
AI เขียน Alt Text ได้ไหม
ได้ แต่ควรตรวจว่าตรงกับภาพจริงและไม่เพิ่มข้อมูลที่ไม่มีในภาพ
สรุป
Image Alt Text คือ ข้อความทางเลือกที่ใช้อธิบายความหมายหรือหน้าที่ของรูปภาพ
ตัวอย่าง
<img src="search-console.webp"
alt="Google Search Console Performance แสดง Clicks และ Impressions รายวัน">
Alt Text ที่ดีควรตอบคำถามว่า
ถ้าผู้ใช้มองไม่เห็นรูปนี้ เขาต้องรู้อะไรเพื่อเข้าใจเนื้อหาต่อ
ไม่ควรเริ่มจากคำถามว่า
Keyword ไหนควรใส่ใน Alt
ภาพแต่ละประเภทต้องจัดการต่างกัน
Informative Image
→ อธิบายข้อมูลสำคัญ
Functional Image
→ อธิบาย Action
Decorative Image
→ มักใช้ alt=""
Complex Image
→ ใช้ Alt สรุปและอธิบายรายละเอียดใน Content เพิ่ม
สิ่งที่ไม่ควรทำคือ
- ใส่ Primary Keyword ทุกภาพ
- ยัด Keywords หลายคำ
- Copy Filename เป็น Alt
- ใช้ “ภาพ” หรือ “รูปภาพ” อย่างเดียว
- บรรยายสิ่งที่ไม่มีในภาพ
- ใส่คำ Marketing ที่ไม่เกี่ยว
- ใช้ Alt เพื่อเพิ่ม Keyword Density
Alt Text ยังไม่ควรถูกมองแยกจาก Image SEO ทั้งหมด เพราะรูปภาพที่ดีควรดูเรื่อง
- Filename
- Compression
- Dimensions
- Format
- Responsive Images
- Lazy Loading
- Context
- Accessibility
ร่วมกัน
สำหรับ WordPress และ Blogspot ควรใส่ Alt ให้ภาพที่มีข้อมูลจริง โดยเฉพาะ Screenshot และ Tutorial Images แต่ไม่จำเป็นต้องสร้างคำอธิบาย Keyword-rich ให้ทุก Decoration
สำหรับเว็บไซต์อย่าง comsiam ที่มีบทความจำนวนมาก การใช้ Alt Text แบบเป็นธรรมชาติจะเหมาะกว่าการทำ Template ให้ Primary Keyword ถูกยัดลงทุกภาพ เช่นบทความ Mobile Problem ควรอธิบายหน้าจอหรือชิ้นส่วนมือถือที่ผู้ใช้ต้องสังเกต ส่วน FiveM ควรอธิบาย Ping, Server List หรือ Settings ที่แสดงจริง และบทความ SEO ควรอธิบาย Chart, Search Console หรือ Diagram ตามเนื้อหาของภาพ
หัวใจสำคัญที่สุดของ Image Alt Text คือ เขียนเพื่อถ่ายทอดข้อมูลจากภาพให้คนที่มองไม่เห็นภาพเข้าใจได้ก่อน หากคำอธิบายนั้นตรงภาพ กระชับ และมีประโยชน์ต่อผู้ใช้ ก็เป็นพื้นฐานที่ดีสำหรับทั้ง Accessibility และ Image SEO โดยไม่จำเป็นต้องยัดคีย์เวิร์ดเพิ่มเติม
