ใส่ Alt Text และตั้งค่าภาพใน Joomla อย่างไรให้เหมาะกับ SEO

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

❶ เขียน Alt Text ให้ตรงกับภาพ

① บรรยายข้อมูลสำคัญของภาพ

เขียนสั้น ๆ ว่าภาพแสดงอะไรและเกี่ยวข้องกับบทความอย่างไร เช่น ภาพหน้าจอที่แสดงเมนูตั้งค่า SEO ใน Joomla อาจใช้ Alt Text ว่า “หน้าตั้งค่า SEO ใน Global Configuration ของ Joomla”

② ใช้คำค้นเมื่ออธิบายภาพได้จริง

หากคำสำคัญเป็นส่วนหนึ่งของคำอธิบายภาพ ก็ใส่ได้อย่างเป็นธรรมชาติ อย่าใส่คำค้นหลายคำต่อกันหรือใช้ Alt Text ซ้ำกับทุกภาพเพื่อหวังผล SEO

③ เว้น Alt Text สำหรับภาพตกแต่ง

ถ้าภาพมีไว้ตกแต่งและไม่เพิ่มข้อมูลให้เนื้อหา ให้ใช้ตัวเลือก No Description หรือปล่อย Alt ว่างตามวิธีที่ Editor รองรับ เพื่อไม่ให้โปรแกรมอ่านหน้าจอต้องอ่านคำบรรยายที่ไม่จำเป็น

④ อย่าใช้ชื่อไฟล์แทนคำอธิบายภาพ

ชื่อไฟล์อย่าง image-01.jpg หรือ DSC0001.jpg ไม่ได้อธิบายภาพได้ดี ควรตั้งชื่อไฟล์ให้สื่อความหมาย และใส่ Alt Text ที่บรรยายภาพแยกกัน

❷ ใส่ภาพพร้อม Alt Text ในบทความ

① เพิ่มภาพในเนื้อหาด้วย TinyMCE

เปิดบทความจาก Content → Articles แล้วคลิกตำแหน่งที่ต้องการวางภาพ ใน TinyMCE เลือกปุ่ม Content → Media หรือ Insert → Image ตามหน้าจอของ Editor และเลือกไฟล์ภาพจาก Media Manager

② กรอก Image Description (Alt Text)

ในหน้าต่างเพิ่มภาพ ให้กรอกช่อง Image Description (Alt Text) ด้วยคำบรรยายที่เหมาะกับภาพ ตรวจช่อง URL หรือ Image Source ว่าเลือกไฟล์ถูกต้อง แล้วกด Insert หรือปุ่มยืนยัน

③ ตั้งภาพ Intro หรือ Full Article

หากต้องการกำหนดภาพในตำแหน่งมาตรฐานของบทความ ให้เปิดแท็บ Images and Links แล้วเลือก Intro Image หรือ Full Article Image กรอก Image Description (Alt Text) ในช่องของภาพนั้น

④ บันทึกและตรวจหน้าเว็บ

บันทึกบทความแล้วเปิดหน้าเว็บจริง ตรวจว่าภาพแสดงถูกตำแหน่ง ไม่แตกหรือเกินขนาด และ Alt Text ถูกบันทึกไว้ใน HTML ตามต้องการ

❸ ตั้งค่าภาพให้เหมาะกับหน้าเว็บ

① ตั้งชื่อไฟล์ให้สื่อเนื้อหา

ก่อนอัปโหลด ตั้งชื่อไฟล์ด้วยคำอธิบายสั้น ๆ เช่น joomla-seo-settings.jpg ชื่อไฟล์ช่วยให้จัดการภาพได้ง่ายและให้บริบทเพิ่มเติม แต่ไม่ควรใช้ชื่อยาวหรือยัดคำค้น

② เลือกขนาดภาพให้เหมาะกับการแสดงผล

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

③ วางภาพใกล้เนื้อหาที่เกี่ยวข้อง

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

④ ตรวจภาพที่เป็นลิงก์

หากใช้ภาพเป็นลิงก์ ให้ตรวจว่าปลายทางตรงกับหน้าที่ต้องการ Alt Text ของภาพลิงก์ควรช่วยบอกจุดหมายหรือการทำงานของลิงก์นั้นด้วย

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

❹ ตรวจ Alt Text หลังเผยแพร่

① ตรวจ HTML ของภาพ

ดูซอร์สหน้าเว็บหรือใช้เครื่องมือตรวจสอบหน้า แล้วค้นหาแท็ก <img> ตรวจว่าแอตทริบิวต์ alt มีข้อความที่เขียนไว้ หรือว่างสำหรับภาพตกแต่งตามที่ตั้งใจ

② ตรวจภาพจากมุมมองผู้ใช้

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

③ แก้ Alt Text ที่ซ้ำหรือไม่ตรงภาพ

หากพบข้อความ Alt ซ้ำกันหลายภาพ หรือคำบรรยายไม่ตรงกับภาพ ให้กลับไปแก้ในช่อง Image Description ของภาพนั้น แล้วบันทึกและตรวจหน้าอีกครั้ง

❺ เช็กลิสต์ภาพและ Alt Text

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

ภาพที่ตั้งค่าเหมาะสมช่วยให้บทความเข้าใจง่ายและเข้าถึงได้มากขึ้น เมื่อทีม ComSiam เพิ่มภาพใหม่ ควรตรวจทั้ง Alt Text ขนาดไฟล์ และตำแหน่งภาพก่อนเผยแพร่