Alt Attribute คืออะไร

post Image

ปรับขนาดตัวอักษร
โหมดถนอมสายตา

Alt Attribute คืออะไร มีความสำคัญอย่างไร ซึ่งเราได้รวบรวมคำตอบไว้ให้แล้วที่นี่

Alt Attribute เป็นข้อความที่ใส่ใน Image Tag (Img Tag) มีไว้สำหรับใส่ข้อความอธิบายรูปภาพ
(บางคนก็เรียกว่า Alt Image Tag หรือ Alt Tag)

Img ย่อมาจาก image ซึ่งมีความหมายว่า “รูปภาพ”
Alt ย่อมาจาก Alternative ซึ่งมีความหมายว่า “แทนที่”
เมื่อนำ Img + Alt ก็ได้ความหมายว่า “การแทนที่รูปภาพด้วยข้อความ”

ซึ่งคนจะนิยมเรียกว่า Alt Attribute
Alt Attribute เป็นข้อความที่ทุกรูปภาพควรจะต้องมี เพราะมีประโยชน์ต่อ Google, ผู้ค้นหา และผู้เข้าชมเว็บไซต์ โดยสามารถช่วยแสดงคำอธิบายรูปภาพได้ ในขณะที่รูปภาพนั้นๆ ไม่แสดง ช่วยให้ Google, ผู้ค้นหา หรือเข้าชมเว็บไซต์ได้ทราบว่า รูปภาพที่ไม่แสดงนั้นเกี่ยวข้องกับอะไร และสาเหตุที่ทำให้รูปภาพไม่แสดงมี ดังนี้
1.ไฟล์รูปภาพหายไป
2.ชื่อไฟล์รูปภาพผิด
3.ความเร็ว Internet ต่ำ

นอกจากนี้ Alt Attriubte ยังแสดงคำอธิบายรูปภาพเมื่อเอาเมาส์ชี้บนรูปนั้นๆ ได้อีกด้วย ซึ่งการแสดงข้อความลักษณะนี้เรียกว่า Mouse Over

การใส่ Alt Attribute

ลักษณะของ Alt Attribute เป็นแบบนี้

<img src="spacer.gif" alt="" />
ให้ใส่ชื่อของรูปภาพลงในช่อง (..) และใส่ข้อความอธิบายรูปภาพลงในช่อง ("")

Code Sample

<img src="การใส่ Title Tag/-altimages/spacer.gif" alt="Title Tag ใส่ในส่วน HEAD ของ HTML ซึ่ง Title Tag จะมีลักษณะและใส่ข้อความลงในช่องว่าง (…)ระหว่าง Tag" />
<img src="titlebar.png" alt="titlebar" width="617" height="173" />

หลักเกณฑ์ในการใส่ Alt Attribute

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

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

3.ไม่ควรใช้เครื่องหมายยัติภังค์ หรือขีด (-) 
ข้อความที่ใส่ใน Alt Attribute ไม่ควรใช้เครื่องหมายยัติภังค์ หรือขีด (-) เนื่องจากการเขียนข้อความในรูปประโยคธรรมดาไม่นิยมใช้เครื่องหมายยัติภังค์ หรือขีด (-) อยู่แล้ว แต่จะใช้เป็นเว้นวรรคแทนมากกว่า หากมีความจำเป็นต้องใช้เครื่องหมายยัติภังค์ หรือขีด (-) แนะนำควรใช้กับคำที่มีการค้นหาเป็นสากลจะดีที่สุด และถึงแม้ว่าข้อความที่ใส่ใน Alt Attribute จะไม่ควรใช้เครื่องหมายยัติภังค์ หรือขีด (-) ก็ตาม แต่ในการตั้งชื่อรูปภาพสามารถใช้เครื่องหมายดังกล่าวได้ไม่มีปัญหา

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

5.ไม่ควรใส่ข้อความใน Alt Attribute รูปภาพซ้ำกัน
ในกรณีที่ต้องเพิ่มรูปภาพหลายๆ รูปลงในเว็บไซต์และในหมวดหมู่เดียวกัน เช่น “นาฬิกาข้อมือผู้ชาย” จะมีรูปภาพหลายรูป ก็ควรใส่ Alt Attribute ให้มีความแตกต่างกันด้วย โดยอาจจใส่ชื่อรุ่น หรือยี่ห้อลงไป เพื่อให้เกิดความแตกต่าง และเฉพาะเจาะจงมากขึ้น เพราะเมื่อซ้ำกันแล้ว เวลาที่ Alt Attribute แสดงข้อความแทนรูปภาพจะก่อให้เกิดการเข้าใจผิด

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

ที่มา : http://h1.co.th/alt-attribute/

 

Top View

card image

ปรัชญาชีวิต เพื่อเข้าสู่ปี 2017 จาก ฌอน บูรณะหิรัญ

อดทน มองการณ์ไกล แต่ยังคง ทำอะไรใหม่ๆ อยู่เสมอ

(เข้าชม : 9,923 ครั้ง)

card image

ปรัชญาชีวิต เพื่อเข้าสู่ปี 2017 จาก ฌอน บูรณะหิรัญ

อดทน มองการณ์ไกล แต่ยังคง ทำอะไรใหม่ๆ อยู่เสมอ

(เข้าชม : 9,923 ครั้ง)

card image

วิธีคิดของคนที่ประสบความสําเร็จในชีวิต ให้ท่องเอาไว้ทุกวัน

เมื่อหลายวันที่ผ่านมาผมมีโอกาสเจอนักพูด นักเขียน

(เข้าชม : 9,220 ครั้ง)

card image

วิธีคิดของคนที่ประสบความสําเร็จในชีวิต ให้ท่องเอาไว้ทุกวัน

เมื่อหลายวันที่ผ่านมาผมมีโอกาสเจอนักพูด นักเขียน

(เข้าชม : 9,220 ครั้ง)

card image

คําศัพท์เบื้องต้นเกี่ยวกับโลจิสติกส์

คําศัพท์เบื้องต้นเกี่ยวกับโลจิสติกส์ AEC : ASEAN Economic Community ประชาคมเศรษฐกิจอาเซียน

(เข้าชม : 5,957 ครั้ง)

card image

คําศัพท์เบื้องต้นเกี่ยวกับโลจิสติกส์

คําศัพท์เบื้องต้นเกี่ยวกับโลจิสติกส์ AEC : ASEAN Economic Community ประชาคมเศรษฐกิจอาเซียน

(เข้าชม : 5,957 ครั้ง)

card image

Domain Name คืออะไร

โดเมนเนมคืออะไร โดเมนเนมภาษาอังกฤษเขียนว่า "Domain Name" โดเมนเนม ความหมายโดยทั่วๆไป หมายถึง ชื่อที่ใช้ระบุลงในคอมพิวเตอร์

(เข้าชม : 4,801 ครั้ง)

card image

Domain Name คืออะไร

โดเมนเนมคืออะไร โดเมนเนมภาษาอังกฤษเขียนว่า "Domain Name" โดเมนเนม ความหมายโดยทั่วๆไป หมายถึง ชื่อที่ใช้ระบุลงในคอมพิวเตอร์

(เข้าชม : 4,801 ครั้ง)

card image

วิถีชีวิตแห่งนกอินทรี

เมื่อเอ่ยถึงนกอินทรี เราก็จะต้องนึกถึงความยิ่งใหญ่ สง่างามขณะที่มันบินอยู่บนท้องฟ้า สาย ตาอันแหลมคม ยาวไกล

(เข้าชม : 3,741 ครั้ง)

card image

วิถีชีวิตแห่งนกอินทรี

เมื่อเอ่ยถึงนกอินทรี เราก็จะต้องนึกถึงความยิ่งใหญ่ สง่างามขณะที่มันบินอยู่บนท้องฟ้า สาย ตาอันแหลมคม ยาวไกล

(เข้าชม : 3,741 ครั้ง)

card image

วิธีเปิดใช้ Google Tag Manager Account

เราได้รู้จักกันไปแล้วว่า Google Tag Manager หรือที่เรียกกันสั้นๆว่า GTM คืออะไร มีประโยชน์อย่างไร ซึ่งน่าจะทำให้ผู้อ่านมีความสนใจในการใช้ GTM กันบ้างแล้ว

(เข้าชม : 3,104 ครั้ง)

card image

วิธีเปิดใช้ Google Tag Manager Account

เราได้รู้จักกันไปแล้วว่า Google Tag Manager หรือที่เรียกกันสั้นๆว่า GTM คืออะไร มีประโยชน์อย่างไร ซึ่งน่าจะทำให้ผู้อ่านมีความสนใจในการใช้ GTM กันบ้างแล้ว

(เข้าชม : 3,104 ครั้ง)

card image

ซัพพลายเออร์ (Supplier) คืออะไร ?

ถึง คนหรือองค์กรที่จัดหาสินค้าและบริการให้กับธุรกิจอื่น การค้นหาซัพพลายเออร์ที่ให้ราคาดี

(เข้าชม : 2,828 ครั้ง)

card image

ซัพพลายเออร์ (Supplier) คืออะไร ?

ถึง คนหรือองค์กรที่จัดหาสินค้าและบริการให้กับธุรกิจอื่น การค้นหาซัพพลายเออร์ที่ให้ราคาดี

(เข้าชม : 2,828 ครั้ง)

card image

แนะนำ 6 โปรแกรม Text Editor ฟรี!

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

(เข้าชม : 2,598 ครั้ง)

card image

แนะนำ 6 โปรแกรม Text Editor ฟรี!

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

(เข้าชม : 2,598 ครั้ง)

card image

จงเป็น 'สิงโต' ที่ 'เงียบ'

จงเป็น 'สิงโต' ที่ 'เงียบ' อย่าเป็น 'สุนัข' ที่ 'เห่าดัง' ! อยากทำอะไรให้สำเร็จ 'ทำ' เลย ไม่ต้อง 'พูด'

(เข้าชม : 2,581 ครั้ง)

card image

จงเป็น 'สิงโต' ที่ 'เงียบ'

จงเป็น 'สิงโต' ที่ 'เงียบ' อย่าเป็น 'สุนัข' ที่ 'เห่าดัง' ! อยากทำอะไรให้สำเร็จ 'ทำ' เลย ไม่ต้อง 'พูด'

(เข้าชม : 2,581 ครั้ง)

card image

ใครโง่สุด???

ตอบแบบทั่วไป หมายเลข 4 ตอบแบบลึกซึ้ง!!! คือโง่หมดทุกคน

(เข้าชม : 2,518 ครั้ง)

card image

ใครโง่สุด???

ตอบแบบทั่วไป หมายเลข 4 ตอบแบบลึกซึ้ง!!! คือโง่หมดทุกคน

(เข้าชม : 2,518 ครั้ง)

card image

วอลท์ ดิสนีย์ (Walt Disney)

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

(เข้าชม : 1,843 ครั้ง)

card image

วอลท์ ดิสนีย์ (Walt Disney)

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

(เข้าชม : 1,843 ครั้ง)

card image

อับราฮัม ลินคอห์น (Abraham Lincoln)

ลินคอห์น คือผู้ที่ได้รับการยกย่องว่าเป็นผู้นำที่เก่งที่สุดคนหนึ่ง ของประเทศสหรัฐอเมริกา

(เข้าชม : 1,690 ครั้ง)

card image

อับราฮัม ลินคอห์น (Abraham Lincoln)

ลินคอห์น คือผู้ที่ได้รับการยกย่องว่าเป็นผู้นำที่เก่งที่สุดคนหนึ่ง ของประเทศสหรัฐอเมริกา

(เข้าชม : 1,690 ครั้ง)

card image

หน้าเว็บ Facebook เลิกใช้ระบบ Messages/Inbox แบบเดิม เปลี่ยนมาเป็น Messenger

ช่วงวันสองวันมานี้ ผู้ใช้ Facebook ผ่านหน้าเว็บคงสังเกตถึงการเปลี่ยนแปลงของระบบ messages/inbox

(เข้าชม : 1,588 ครั้ง)

card image

หน้าเว็บ Facebook เลิกใช้ระบบ Messages/Inbox แบบเดิม เปลี่ยนมาเป็น Messenger

ช่วงวันสองวันมานี้ ผู้ใช้ Facebook ผ่านหน้าเว็บคงสังเกตถึงการเปลี่ยนแปลงของระบบ messages/inbox

(เข้าชม : 1,588 ครั้ง)

xclose