ข้อความแสดงแทนคืออะไร?
ข้อความแสดงแทน (ย่อมาจากข้อความแสดงแทน) คือข้อความที่รวมอยู่ในโค้ด HTML เพื่ออธิบายรูปภาพบนหน้าเว็บ
มีบริบทสำหรับโปรแกรมรวบรวมข้อมูลของเครื่องมือค้นหาและสำหรับผู้ที่ดูหน้าเว็บด้วยโปรแกรมอ่านหน้าจอ
ข้อความแสดงแทนมักเรียกว่า “แอตทริบิวต์ alt” และ “แท็ก alt”
นี่คือสิ่งที่ดูเหมือน:
และนี่คือตัวอย่างข้อความแสดงแทนใน HTML:
<img src="hanging-planter.jpg" alt="Disco ball hanging planter with vines hanging off the side">
ทำไมข้อความแสดงแทนจึงมีความสำคัญสำหรับ SEO ภาพ?
การค้นหา Google Image คิดเป็น22.6% ของการค้นหาทั้งหมด
สิ่งนี้ทำให้รูปภาพเป็นวิธีที่มีประสิทธิภาพในการรับทราฟฟิก SEO มากขึ้น
และGoogle จะอ่านข้อความแสดงแทนเพื่อช่วยให้เข้าใจว่ารูปภาพเกี่ยวกับอะไร หากไม่มีข้อความแสดงแทน รูปภาพของคุณมีโอกาสน้อยที่จะอยู่ในอันดับบน Google Images
Google มักจะแสดงภาพที่ด้านบนสุดของผลการค้นหาของ Google ตามปกติ ก่อนหน้าเว็บ ตัวอย่างเช่น หากเราค้นหา “แผนภูมิการกระจายเนื้อหา” เราจะเห็นรูปภาพที่แสดงเป็นผลลัพธ์อันดับต้นๆ:
ดังนั้นการเพิ่มประสิทธิภาพข้อความแสดงแทนรูปภาพของคุณจึงสามารถนำไปสู่การเข้าชมมากขึ้นจากทั้ง Google และ Google รูปภาพ
ในบทความนี้ เราจะพูดถึงวิธีการทำอย่างนั้น รวมถึงตัวอย่าง แนวทางปฏิบัติที่ดีที่สุด และวิธีค้นหาและแก้ไขข้อความแสดงแทนที่ขาดหายไป
ตัวอย่างข้อความแสดงแทน
ในการเขียนข้อความแสดงแทนที่มีประสิทธิภาพสูงสุด ให้บรรยายและใช้น้ำเสียง ที่เป็น ธรรมชาติ ลองนึกถึงวิธีที่คุณจะบรรยายภาพให้ใครบางคนในการสนทนาฟัง อย่าพยายามใส่คำหลักที่เต็มไปด้วยคำ (ซึ่งฟังดูคล้ายกับหุ่นยนต์)
มาดูรูปภาพสองสามภาพพร้อมตัวอย่างข้อความแสดงแทนที่โอเค ดีกว่า และดีที่สุดกัน
เราจะเริ่มต้นด้วยรูปภาพของกระดาน charcuterie นี้ :
ตัวอย่างข้อความ alt ไม่ถูกต้อง : alt=”ไอเดียสำหรับงานเลี้ยงอาหารค่ำ”
โอเค ตัวอย่างข้อความแสดงแทน : alt=”Charcuterie board”
ตัวอย่างข้อความแสดงแทนที่ดีขึ้น : alt=”Charcuterie board with meats and cheese”
ตัวอย่างข้อความแสดงแทนที่ดีที่สุด : alt=”แผ่นชาร์คูเตอรีทรงกลมพร้อมเนื้อ ชีส แครกเกอร์ และขนมหลากสีสัน”
ตัวอย่าง “ไม่ดี” ที่นี่คือการกำหนดเป้าหมายคำหลักเฉพาะ (“แนวคิดสำหรับงานเลี้ยงอาหารค่ำ”) โดยไม่บอกเราว่ามีอะไรอยู่ในภาพ ในขณะที่ตัวอย่างที่ “โอเค” และ “ดีกว่า” ทำงานได้ดีกว่า ตัวอย่างที่ “ดีที่สุด” ของเราให้รายละเอียดและบริบทมากที่สุดสำหรับรูปภาพ
ต่อไปมาดูภาพที่ถ่ายที่Central Parkกัน :
ตัวอย่างข้อความแสดงแทนที่ไม่ถูกต้อง : alt=”สะพานดอกไม้ ต้นไม้ เขียวขจี สวน”
โอเค ตัวอย่างข้อความแสดงแทน : alt=”Central Park”
ตัวอย่างข้อความแสดงแทนที่ดีขึ้น : alt=”Bridge at Central Park”
ตัวอย่างข้อความแสดงแทนที่ดีที่สุด : alt=”สะพานที่เซ็นทรัลปาร์คที่รายล้อมไปด้วยต้นไม้และใบไม้”
ตัวอย่าง “ไม่ดี” คือรายการคำแทนที่จะเป็นคำอธิบาย ตัวอย่าง “ดีที่สุด” ประกอบด้วยข้อมูลเกี่ยวกับสถานที่เฉพาะรวมถึงสิ่งที่แสดงในรูปภาพ
สุดท้ายนี้ นี่คือภาพจากโอลิมปิกปักกิ่ง 2008 :
ตัวอย่างข้อความ alt ไม่ถูกต้อง : alt=”Sporting event track field olympics gold medal”
โอเค ตัวอย่างข้อความแสดงแทน : alt=”ติดตามและฟิลด์”
ตัวอย่างข้อความแสดงแทนที่ดีขึ้น : alt=”ติดตามและเหตุการณ์ภาคสนาม”
ตัวอย่างข้อความแสดงแทนที่ดีที่สุด : alt=”ลู่และเหตุการณ์ในโอลิมปิกปักกิ่ง 2008″
ในทำนองเดียวกัน ตัวอย่างที่ “แย่” ของเราที่นี่รู้สึกไม่เป็นธรรมชาติและไม่ได้บอกเราจริงๆ ว่าเกิดอะไรขึ้นในภาพ
ขอให้สังเกตว่าตัวอย่างที่ “ดีที่สุด” ทั้งหมดของเรามีคำอธิบายมากที่สุดโดยไม่เป็นสแปม และเมื่อมีชื่อหรือเหตุการณ์ที่ชัดเจนเกี่ยวกับภาพ (เช่น Central Park หรือ Beijing Olympics) ก็รวมอยู่ด้วย
แนวทางปฏิบัติที่ดีที่สุดสำหรับข้อความแสดงแทน
มาดูกฎพื้นฐานบางประการที่ต้องปฏิบัติตามเมื่อเขียนข้อความแสดงแทน
เราได้อธิบายไปแล้วว่าข้อความแสดงแทนที่ดีสามารถสื่อความหมายได้โดยไม่เป็นสแปม แต่ต่อไปนี้คือหมายเหตุที่สำคัญอีกสองสามข้อ:
เก็บข้อความแสดงแทน 125 อักขระหรือน้อยกว่า
โปรแกรมอ่านหน้าจอและเทคโนโลยีช่วยเหลืออื่นๆ มักจะหยุดอ่านข้อความแสดงแทนที่เครื่องหมาย 125 อักขระ
เป็นการดีที่สุดที่จะขีดข้อความแสดงแทนไว้ที่หมายเลขนี้เพื่อไม่ให้ถูกตัดออก
รวมคำหลักหนึ่งคำสำหรับบริบท
นี่อาจดูเหมือนขัดกับคำแนะนำก่อนหน้านี้ของเรา อย่างไรก็ตาม คุณควรใส่คำหลักในข้อความแสดงแทนของคุณ หากมีบริบทสำหรับหน้าเว็บที่รูปภาพเปิดอยู่
จุดประสงค์ของข้อความแสดงแทนคือการให้ข้อมูลเพิ่มเติมและบริบท และคำหลักเป้าหมายมักจะทำเช่นนั้น
เพื่อให้เป็นธรรมชาติยิ่งขึ้น คุณสามารถใช้รูปแบบต่างๆ ของคำหลักของคุณ
สมมติว่าเรากำลังเขียนข้อความแสดงแทนสำหรับรูปภาพนี้จากโพสต์บล็อกของเราเกี่ยวกับการสร้างลิงก์ย้อนกลับ :
โพสต์บล็อกนี้กำหนดเป้าหมายคำหลัก “การสร้างลิงก์” แต่อาจรู้สึกว่าถูกบังคับให้เพิ่มในที่นี้เนื่องจากรูปภาพเกี่ยวกับหัวข้อที่เฉพาะเจาะจงมากขึ้น
กลยุทธ์ที่ดีในที่นี้อาจเป็น: alt=”examples of what makes a good link”
ด้วยวิธีนี้ เราจะใส่ “ลิงก์” ของคำหลักบางส่วน แต่ยังเกี่ยวข้องกับทั้งรูปภาพและหน้าเว็บ
ไม่รวมข้อความแสดงแทนสำหรับรูปภาพตกแต่ง
แม้ว่าเป้าหมายของข้อความแสดงแทนคือการจัดเตรียมบริบทสำหรับรูปภาพให้มากที่สุดเท่าที่จะเป็นไปได้ แต่ก็มีรูปภาพบางรูปที่ไม่ต้องการคำอธิบายเพิ่มเติมจริงๆ
ไม่จำเป็นต้องใส่ข้อความแสดงแทนสำหรับรูปภาพตกแต่ง เช่น ไอคอน ตัวแบ่งหน้าในแนวนอน ไอคอนแว่นขยายในแถบค้นหา ฯลฯ
ผู้ที่ใช้โปรแกรมอ่านหน้าจอไม่จำเป็นต้องรู้ว่ารูปภาพเหล่านี้มีลักษณะอย่างไรจึงจะเข้าใจหน้าเว็บ และ Google ไม่ต้องการข้อมูลเพิ่มเติมหรือบริบทเพิ่มเติมเพื่อจัดอันดับหน้าเว็บ
ต่อไปนี้คือตัวอย่างภาพประกอบการตกแต่งที่ไม่ต้องการข้อความแสดงแทน:
อย่าใส่ “รูปภาพของ” หรือ “รูปภาพของ” ใน Alt Text
ดังที่กล่าวไว้ คุณมีอักขระเพียง 125 ตัวในการอธิบายภาพของคุณ การใส่ข้อความเติม เช่น “รูปภาพของ” หรือ “รูปภาพของ” จะทำให้พื้นที่ว่างนั้นเสียเปล่า เพราะมันบอกเป็นนัยกับทั้งผู้ใช้และ Google แล้วว่าสิ่งเหล่านี้คือรูปภาพ
ต่อไปนี้คือตัวอย่างสิ่งที่ไม่ควรทำ กับ สิ่งที่ควรทำสำหรับรูปภาพโคมไฟตั้งพื้น :
❌ alt=”ภาพโคมไฟตั้งพื้นสมัยใหม่กลางศตวรรษ”
✅ alt=”โคมไฟตั้งพื้นสมัยใหม่ในห้องนั่งเล่นพร้อมเฟอร์นิเจอร์”
ตัวเลือกที่สองตรงประเด็นมากขึ้นและเพิ่มข้อมูลและบริบทเพิ่มเติมที่สำคัญ
อย่าปิดบังสิ่งที่อยู่ในคำบรรยาย
ไม่มีเหตุผลที่จะรวมข้อมูลที่ซ้ำซ้อนในข้อความแสดงแทนของคุณ หากรูปภาพมีคำบรรยายอยู่แล้ว แทนที่จะพูดซ้ำในข้อความแสดงแทน ให้ระบุบริบทเพิ่มเติมเกี่ยวกับรูปภาพแทน
นี่คือตัวอย่างรูปภาพพร้อมคำบรรยายสำหรับStrand Bookstoreในนิวยอร์ก:
❌ alt=”ที่ตั้ง Union Square ของ Strand Bookstore”
✅ alt=”ภายนอกร้านหนังสือสแตรนด์ที่มีกันสาดสีแดงและผู้คนกำลังดูชั้นหนังสือกลางแจ้ง”
ข้อความแสดงแทนที่สองสามารถเข้าถึงได้มากขึ้น แทนที่จะใช้คำอธิบายภาพซ้ำ ข้อความอธิบายสิ่งที่เกิดขึ้นจริงในรูปภาพ
ค้นหาและแก้ไขข้อความแสดงแทนหายไป
หากต้องการตรวจสอบว่าไม่มีข้อความแสดงแทนในไซต์ของคุณ ให้ใช้เครื่องมือตรวจสอบไซต์ ของเรา
เริ่มต้นด้วยการคลิกปุ่ม “เพิ่มโครงการใหม่” ที่มุมขวาบน
จากนั้นเพิ่มโดเมนและชื่อเว็บไซต์ของคุณ แล้วคลิก “สร้างโครงการ”
ทำตามคำแนะนำเพื่อตั้งค่าการตรวจสอบไซต์ของคุณให้เสร็จสิ้น จากนั้นให้โอกาสดำเนินการ
เมื่อรายงานการตรวจสอบของคุณพร้อมแล้ว ให้คลิกที่รายงาน จากนั้นคลิกที่แท็บ “ปัญหา”:
คุณจะถูกนำไปยังรายการข้อผิดพลาด คำเตือน และประกาศ จำกัดผลการค้นหาของคุณให้แคบลงโดยมองหา “แอตทริบิวต์ alt” สิ่งนี้จะแสดงจำนวนรูปภาพที่หายไปข้อความแสดงแทน:
คลิกลิงก์ (“57 ภาพ” ด้านบน) เพื่อดูว่ารูปภาพใดเป็นสาเหตุของปัญหา เพื่อให้คุณสามารถลงชื่อเข้าใช้ไซต์ของคุณและแก้ไขได้
ขั้นตอนต่อไปคือการเข้าสู่ระบบ CMS และเพิ่มข้อความแสดงแทนให้กับรูปภาพใดๆ ที่แสดงไว้ที่นี่
เมื่อคุณเพิ่มข้อความแสดงแทนที่ขาดหายไปในไซต์ของคุณ คุณสามารถเรียกใช้การตรวจสอบไซต์อีกครั้งเพื่อให้สอดคล้องกับการเปลี่ยนแปลง