Google อธิบายข้อความแสดงแทนสำหรับโลโก้และปุ่ม

ในพอดแคสต์ Google Search Off the Record Lizzi Sassman และ John Mueller ของ Google พูดถึงวิธีที่ดีที่สุดในการจัดการข้อความแสดงแทนสำหรับโลโก้และปุ่มแบบรูปภาพ

มีแนวทางปฏิบัติที่ดีที่สุดในการเพิ่มแอตทริบิวต์ alt ให้กับโลโก้และปุ่ม

กฎเกณฑ์อาจดูซับซ้อนเล็กน้อยในตอนแรก แต่จริงๆ แล้วเข้าใจง่าย

การได้รับแอตทริบิวต์ alt ที่ถูกต้องนั้นดีสำหรับผู้ใช้ และในระยะยาวจะดีต่อรายได้

การเพิ่มข้อความแสดงแทนให้กับรูปภาพที่ใช้งานได้

Lizzi Sassman เริ่มการสนทนาโดยอ้างอิงถึงรูปภาพที่ใช้งานได้ รูปภาพที่มีจุดประสงค์ในการใช้งานบนหน้าเว็บ

เธอถามว่าข้อความแสดงแทนควรอธิบายสิ่งที่ปุ่มทำหรือสิ่งที่ภาพบนปุ่มอยู่ในสถานการณ์ที่ปุ่มเป็นไอคอน

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

“ลิซซี่ แซสมัน:
…ระดับการดูแลที่เราใช้ไปกับทรัพย์สินทางสายตา เราควรใส่พลังงานในระดับเดียวกันลงในคำที่อธิบายเนื้อหานั้นเช่นกัน ซึ่งผมคิดว่าเยี่ยมมาก

รูปภาพอีกประเภทหนึ่งก็เหมือนกับสิ่งที่ใช้งานได้จริง ซึ่งบางครั้งอาจเป็นปุ่ม

เหมือนกับว่ามันเป็นกราฟิกที่ทำหน้าที่เป็นอะไรบางอย่าง

ข้อความแสดงแทนควรบอกฉันว่าจะเกิดอะไรขึ้น

ถ้าคลิกนี่ จะพาไปมั้ย?

อาจเป็นเหมือนรูปภาพของบางอย่าง แล้วทำหน้าที่เป็นปุ่มด้วย

และคุณอธิบายฟังก์ชั่นหรือเหมือนที่ฉันไม่รู้… เหมือนภาพลูกศร?

และยังมีความสำคัญต่อ SEO หรือไม่?

จอห์น มูลเลอร์:
ใช่. ฉันคิด…

ลิซซี่ แซสแมน:
มันอาจจะเป็นเหมือนโลโก้

จอห์น มูลเลอร์:
เพื่อการช่วยสำหรับการเข้าถึง ที่อาจจะสมเหตุสมผลที่จะทำอะไรบางอย่างรอบๆ นั้น

แต่สำหรับ SEO ผู้คนจะไม่ค้นหาปุ่มชำระเงินหรืออะไรทำนองนั้น”

ข้อความแสดงแทนบนปุ่มมีไว้สำหรับการเข้าถึงไม่ใช่ SEO

John Mueller ทำให้ชัดเจนว่าไม่มีจุดประสงค์ SEO ในการเพิ่มข้อความแสดงแทนลงในปุ่ม

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

Lizzi ยังคงอภิปรายต่อไป:

“ลิซซี่ แซสมัน:
…แต่บางทีพวกเขาอาจจะทำโลโก้หรืออะไรทำนองนั้น เมื่อคุณคลิก ระบบจะนำคุณไปยังหน้าแรกหรืออะไรก็ตาม

แต่มันก็เป็น “โอ้ นี่มันโลโก้”

คุณพูดว่า "นี่คือโลโก้ของ Google Search Central"

จอห์น มูลเลอร์:
แน่นอน.

ลิซซี่ แซสแมน:
หรือชอบอะไรที่จะเป็นข้อความอธิบาย

โลโก้มี Googlebot แต่สิ่งสำคัญที่สุดคือต้องรู้เกี่ยวกับรูปภาพว่าเป็นโลโก้จริงหรือ

หรือโลโก้มีลักษณะอย่างไร?

ฉันเดาจากมุมนั้น ผู้คนคงกำลังมองหาโลโก้

จอห์น มูลเลอร์:
ใช่.

ลิซซี่ แซสแมน:

เหมือนโลโก้ของบริษัท X หรือเปล่า?

จอห์น มูลเลอร์:
ใช่. ฉันหมายความว่ามันกลับไปเป็นกลยุทธ์ที่เราพยายามหลีกเลี่ยง

คุณต้องการถูกพบเพื่ออะไร?

ลิซซี่ แซสแมน:
ใช่ แต่นั่นเป็นคำถามที่สำคัญที่สุด ฉันเดา เพราะมันชักนำ...

ฉันสามารถคลั่งไคล้รูกระต่ายเหล่านี้ได้ ดังนั้นฉันไม่รู้ จัดลำดับความสำคัญของสิ่งที่เราควรจะนึกถึง เพราะคุณไม่จำเป็นต้องเขียนทุกสิ่งสำหรับสิ่งเหล่านี้ ฉันคิดว่า."

การใช้ข้อความแสดงแทนอย่างเหมาะสมบนโลโก้และปุ่ม

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

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

เนื้อหาการสร้างมาตรฐาน HTML อย่างเป็นทางการ The World Wide Web Consortium (W3C) เผยแพร่คำอธิบายเกี่ยวกับวิธีจัดการกับโลโก้

ลิงค์หน้าแรกของโลโก้

โลโก้ที่ทำหน้าที่เป็นลิงก์หน้าแรกควรมีข้อความแสดงแทนที่บอกผู้ใช้โปรแกรมอ่านหน้าจอว่าโลโก้นั้นเป็นลิงก์ของหน้าแรก

W3C ใช้ตัวอย่างโค้ดนี้:

 <a href="https://www.w3.org/">
<img src="w3c.png" alt="W3C หน้าแรก">
</a>

โค้ดด้านบนนี้ใช้สำหรับโลโก้ที่อาจพบที่ด้านบนของเพจ ซึ่งทำหน้าที่เป็นลิงค์กลับไปยังโฮมเพจ

ข้อความแสดงแทนตัวอย่างที่ W3C ให้มานั้นพูดง่ายๆ ว่า "W3C home" แต่อาจเป็นคำอธิบายมากกว่านี้ก็ได้ หากคุณต้องการ

ลิงค์โฮมเพจโลโก้และข้อความ

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

กล่าวอีกนัยหนึ่ง ไม่มีลิงก์สองลิงก์ เช่น ลิงก์เดียวสำหรับโลโก้และลิงก์สำหรับข้อความ แต่เป็นลิงก์เดียวสำหรับทั้งโลโก้และข้อความ

ในกรณีดังกล่าว เนื่องจากข้อความอธิบายหน้าที่ของลิงก์ การทำซ้ำฟังก์ชันของลิงก์โลโก้จึงเป็นเรื่องซ้ำๆ

ดังนั้นสำหรับกรณีนั้น แนวปฏิบัติที่ดีที่สุดคือการใช้ข้อความแสดงแทนค่าว่าง

นี่คือตัวอย่างที่ W3C มีให้:

 <a href="https://www.w3.org/">
<img src="w3c.png" alt=""> หน้าแรกของ W3C
</a>

สังเกตว่าแอตทริบิวต์ alt ถูกเข้ารหัสสำหรับรูปภาพอย่างไร:

 img src="w3c.png" alt=""

เครื่องหมายอัญประกาศว่างสำหรับข้อความแสดงแทนเรียกว่าแอตทริบิวต์ alt ว่าง (หรือข้อความแสดงแทนค่าว่าง) โปรแกรมอ่านหน้าจอก็จะข้ามไป

เหตุผลที่ข้อความแสดงแทนค่าว่างนั้นดีเพราะมีข้อความที่อธิบายว่าฟังก์ชันลิงก์คืออะไร:

บ้าน W3C

ข้อความแสดงแทนสำหรับลิงก์ไอคอน

บางครั้งลิงก์จะอยู่ในรูปของไอคอน โดยไม่มีข้อความอธิบายหน้าที่ของลิงก์ เช่น ไอคอนในรูปแบบซองจดหมาย (แทนอีเมลหรือข้อความ) หรือเครื่องพิมพ์ (ซึ่งระบุว่าลิงก์เปิดใช้งานเครื่องพิมพ์)

สำหรับสถานการณ์นี้ การปฏิบัติที่ไม่ดีในการอธิบายว่ารูปภาพคืออะไร (เช่น ซองจดหมายหรือเครื่องพิมพ์)

แนวทางปฏิบัติที่ดีที่สุดคือการอธิบายว่ารูปภาพทำอะไร (เริ่มต้นอีเมลหรือพิมพ์หน้าเว็บ)

W3C ใช้ตัวอย่างของไอคอนเครื่องพิมพ์ที่มีรหัสและข้อความแสดงแทนต่อไปนี้:

 <a href="javascript:print()">
<img src="print.png" alt="พิมพ์หน้านี้">
</a>

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

ข้อความแสดงแทนสำหรับปุ่ม

คล้ายกับตัวอย่างของไอคอน ข้อความแสดงแทนสำหรับรูปภาพปุ่มควรอธิบายสิ่งที่รูปภาพทำ

W3C ใช้ตัวอย่างของช่องค้นหาที่มีแว่นขยายสำหรับปุ่มส่ง

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

แนวทางปฏิบัติที่ดีที่สุดคือการใช้ข้อความแสดงแทนเพื่ออธิบายว่ารูปภาพทำอะไร

นี่คือตัวอย่างโค้ดที่ W3C แสดงเป็นตัวอย่าง:

 <input type="image" src="searchbutton.png" alt="Search">

ดังที่คุณเห็น ข้อความแสดงแทนสำหรับปุ่มค้นหาคือคำว่า "ค้นหา" ซึ่งอธิบายหน้าที่ของปุ่ม

ข้อความแสดงแทนสำหรับปุ่มและโลโก้

Lizzi และ John ไม่ได้ลงรายละเอียดเกี่ยวกับวิธีจัดการกับสถานการณ์ต่างๆ สำหรับโลโก้และปุ่ม

อย่างไรก็ตาม จอห์นชี้ให้เห็นว่าไม่มีค่า SEO สำหรับข้อความแสดงแทนสำหรับปุ่มและโลโก้ แต่มีไว้สำหรับการเข้าถึง

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

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

ดังนั้นจึงเป็นเรื่องดีสำหรับบรรทัดล่างสุดที่จะใช้แนวทางปฏิบัติที่ดีที่สุดในการช่วยสำหรับการเข้าถึง

การอ้างอิง

เรียนรู้เพิ่มเติมเกี่ยวกับการช่วยการเข้าถึงสำหรับปุ่มและโลโก้ที่ W3C

ภาพการทำงาน

รวมลิงก์รูปภาพและข้อความที่อยู่ติดกันสำหรับแหล่งข้อมูลเดียวกัน

การใช้แอตทริบิวต์ alt บนรูปภาพที่ใช้เป็นปุ่มส่ง

ฟัง Search Off the Record Podcast ที่นาที 15:57:

ภาพเด่นโดย Shutterstock/Evgeny Atamanenko