การทำความเข้าใจแอตทริบิวต์ชื่อรูปภาพ

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

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

มาดำดิ่งกัน!

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

ข้อมูลเบื้องต้นเกี่ยวกับแอตทริบิวต์ชื่อรูปภาพ

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

<img src="filename.jpg" alt="description of your image" title="image title">

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

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

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

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

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

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

ความแตกต่างระหว่างแอตทริบิวต์ชื่อกับแอตทริบิวต์ Alt

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

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

<img src="filename.jpg" alt="description of your image" title="image title">

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

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

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

แอตทริบิวต์ชื่อรูปภาพส่งผลต่อ SEO อย่างไร

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

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

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

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

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

วิธีซ่อนคำแนะนำเครื่องมือชื่อรูปภาพใน WordPress

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

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

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

เพิ่มโค้ดต่อไปนี้ในส่วน <head> ซึ่งอยู่ในแท็กสคริปต์:

jQuery(document).ready(function($) {
    $('img[title]').each(function() { $(this).removeAttr('title'); });
});

หากคุณใช้ Divi คุณสามารถข้ามการติดตั้งปลั๊กอินพิเศษและเพิ่มโค้ดนี้โดยไปที่ Divi > ตัวเลือกธีม > Integration :

โปรแกรมแก้ไขโค้ดแรกในหน้าจอนี้จะเพิ่ม JavaScript ลงในส่วน <head> ของไซต์ของคุณ เช่นเดียวกับการแทรกส่วนหัวและส่วนท้าย

บทสรุป

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

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

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

ภาพโดย Jane Kelly / Shutterstock.com