Alt Tag คืออะไรและคุณควรใช้อย่างไร?

เผยแพร่แล้ว: 2020-06-22

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

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

มาเริ่มกันเลย!

สมัครสมาชิกช่อง Youtube ของเรา

แท็ก Alt คืออะไร?

เพิ่มแท็ก Alt ให้กับรูปภาพในรูปแบบ HTML เพื่ออธิบายเนื้อหาและบริบทบนหน้าเว็บ แท็ก alt ยังปรากฏอยู่ในที่เก็บรูปภาพเมื่อไฟล์สื่อไม่สามารถโหลดหรือแสดงได้อย่างถูกต้อง:

แท็ก alt ที่แสดงในบล็อกโพสต์แทนที่รูปภาพ

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

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

<img src="motorcycle-sunset.png" alt="Man in black and red checkered shirt riding an orange motorcycle at sunset."/>

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

เหตุใดจึงต้องใช้แท็ก Alt บนรูปภาพ

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

พวกเขาปรับปรุงการเข้าถึงเว็บ

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

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

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

พวกเขาสามารถเพิ่มอันดับเครื่องมือค้นหาของคุณ

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

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

เพื่อเน้นย้ำถึงบทบาทสำคัญที่รูปภาพ (และในทางกลับกัน แท็ก alt) เล่นใน SEO ให้พิจารณาหน้าผลลัพธ์ของเครื่องมือค้นหา (SERP) สำหรับ "ชุดเครื่องนอนขนาดคิงไซส์":

ผลการค้นหาตามรูปภาพสำหรับ

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

วิธีเพิ่มแท็ก Alt รูปภาพใน WordPress

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

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

บล็อกรูปภาพในตัวแก้ไข WordPress

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

กล่องข้อความแสดงแทนรูปภาพในตัวแก้ไข WordPress

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

วิธีเพิ่มแท็ก Alt รูปภาพใน HTML

เมื่อคุณใช้ WordPress หรือ CMS อื่นที่มีโมดูลสำหรับเพิ่มและแก้ไขแท็ก alt จะเพิ่มโค้ด HTML ให้คุณโดยอัตโนมัติ อย่างไรก็ตาม หากคุณต้องการเพิ่มโค้ดด้วยตนเอง คุณสามารถทำได้ง่ายๆ

หากต้องการเพิ่ม HTML แท็ก Alt ใน WordPress ให้คลิกที่บล็อก รูปภาพที่ เกี่ยวข้อง ในแถบเครื่องมือบล็อก เลือกปุ่มที่มีจุดแนวตั้งสามจุด แล้วเลือก แก้ไขเป็น HTML :

ทางเลือกที่จะ

รหัส HTML จะแสดงแท็กรูปภาพ คุณจะสังเกตเห็นว่าแอตทริบิวต์ alt ว่างเปล่า วางข้อความของคุณภายในเครื่องหมายคำพูด:

รหัส HTML ของแท็กรูปภาพใน WordPress

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

เคล็ดลับและแนวทางปฏิบัติที่ดีที่สุดในการเขียนแท็ก Alt รูปภาพ

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

  • มีความเฉพาะเจาะจงและอธิบาย จุดประสงค์ของแท็ก alt คือเพื่ออธิบายรูปภาพ ดังนั้นคุณจึงต้องระบุให้เฉพาะเจาะจงที่สุด หากคุณไม่แน่ใจว่าคำอธิบายของคุณเพียงพอหรือไม่ ให้พิจารณาว่าภาพใดที่คุณจะมองเห็นได้หากคุณเห็นเพียงบรรทัดข้อความนั้น
  • ให้มันสั้น ในขณะที่คุณต้องการให้รายละเอียด คุณไม่จำเป็นต้องทำให้แท็ก alt ของคุณยาว (หรือแม้แต่ประโยคเต็ม) ตั้งเป้าไว้สูงสุดประมาณ 100 ถึง 125 อักขระ
  • อย่าซ้ำซ้อน ในการใช้ประโยชน์สูงสุดจากแท็ก alt คุณไม่ต้องการใส่คำที่ไม่จำเป็น ซึ่งรวมถึงการเพิ่ม "รูปภาพของ" หรือ "รูปภาพของ" ก่อนคำอธิบาย องค์ประกอบเหล่านี้ไม่จำเป็น เพราะมีนัยอยู่แล้ว
  • รวมคำหลักที่เกี่ยวข้องอย่างเป็นธรรมชาติ พิจารณาคำหลักเป้าหมายของคุณ และหากเป็นไปได้ ให้รวมคำหลักเหล่านี้ไว้ในบริบทของหน้า สิ่งนี้จะง่ายกว่าเมื่อคุณใช้รูปภาพที่มีความเกี่ยวข้องสูงซึ่งสอดคล้องกับข้อความ
  • หลีกเลี่ยงการบรรจุคำหลัก แม้ว่าการใช้คำหลักในแท็ก alt ของคุณสามารถปรับปรุง SEO ได้ แต่ระวังอย่าหักโหมจนเกินไป การบรรจุคำหลักอาจส่งผลเสียต่อ SEO ของคุณและทำให้ผู้ใช้ได้รับประสบการณ์ที่ไม่ดี
  • อย่าใช้รูปภาพแทนข้อความ วัตถุประสงค์หลักของแท็ก alt คือการจัดเตรียมบริบทที่เป็นข้อความสำหรับเครื่องที่ไม่สามารถประมวลผลและตีความองค์ประกอบภาพบนหน้าเว็บได้ ดังนั้นจึงไม่สมเหตุสมผลที่จะใช้ข้อความในรูปภาพ โดยเฉพาะสำหรับหัวเรื่องและชื่อหน้าของคุณ

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

บทสรุป

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

คุณมีคำถามอื่น ๆ เกี่ยวกับแท็ก alt หรือวิธีการเพิ่มแท็กใน WordPress หรือไม่? แจ้งให้เราทราบในส่วนความคิดเห็นด้านล่าง!

ภาพเด่นโดย Honza Hruby / shutterstock.com