แท็ก HTML บอกว่าสิ่งนั้นคืออะไร เช่น เป็นรูป เป็นลิงก์ หรือเป็นหัวข้อ ส่วนแอตทริบิวต์คือค่าที่ใส่เพิ่มเข้าไปในแท็กเพื่อบอกรายละเอียด
หลายอย่างในนั้นมีผลกับ SEO โดยตรง และหลายอย่างเป็นสิ่งที่เว็บไทยจำนวนมากใส่ผิดหรือลืมใส่
แอตทริบิวต์ของรูปภาพ
alt
บอกว่ารูปนั้นเป็นภาพอะไร ใช้ทั้งกับเครื่องมือค้นหาและกับโปรแกรมอ่านหน้าจอสำหรับผู้พิการทางสายตา
เขียนอย่างไร บรรยายสิ่งที่เห็นในภาพอย่างตรงไปตรงมา ไม่ต้องเขียนว่า “รูปภาพของ” เพราะระบบรู้อยู่แล้วว่าเป็นรูป
ที่ผิดกันบ่อย คือการยัดคำค้นลงไปแทนคำบรรยาย เช่น เขียนว่า “รับทำเว็บไซต์ ภูเก็ต ราคาถูก รับทำ SEO” ซึ่งไม่ได้ช่วยและเข้าข่ายการทำเกินพอดี
รูปที่ไม่ต้องมี alt คือรูปที่ใช้ตกแต่งล้วน ๆ ให้ใส่เป็นค่าว่างแทนการเว้นไม่ใส่เลย เพื่อบอกว่าตั้งใจให้ข้าม
อ่านรายละเอียดได้ที่ Alt Text คืออะไร
width และ height
ระบุขนาดจริงของรูป ทำให้เบราว์เซอร์จองพื้นที่ไว้ก่อนรูปโหลดเสร็จ ป้องกันไม่ให้หน้ากระตุกตอนรูปขึ้น
การไม่ใส่สองค่านี้เป็นสาเหตุอันดับต้นของค่า CLS ที่แย่ อ่านต่อที่ CLS คืออะไร
loading
กำหนดว่ารูปควรโหลดทันทีหรือรอจนใกล้ถึงจอ
หลักที่ใช้ได้ รูปที่อยู่บนสุดของหน้าและเห็นทันทีไม่ควรตั้งเป็นแบบรอโหลด เพราะจะทำให้ค่า LCP แย่ลง ส่วนรูปที่อยู่ล่าง ๆ ควรตั้งให้รอโหลด
ข้อผิดพลาดที่พบบ่อยคือปลั๊กอินตั้งให้ทุกรูปรอโหลดหมด รวมถึงรูปหลักบนสุด
srcset และ sizes
บอกเบราว์เซอร์ว่ามีรูปหลายขนาดให้เลือก เพื่อไม่ต้องส่งรูปขนาดใหญ่ไปให้มือถือ
เป็นวิธีลดขนาดหน้าที่ได้ผลมากที่สุดวิธีหนึ่งสำหรับเว็บที่มีรูปเยอะ
แอตทริบิวต์ของลิงก์
rel
บอกความสัมพันธ์ระหว่างหน้าปัจจุบันกับหน้าที่ลิงก์ไป ค่าที่เกี่ยวกับ SEO มีสามตัว
nofollow บอกว่าไม่ต้องการรับรองลิงก์นี้ ใช้กับลิงก์ที่ผู้ใช้ใส่เองหรือลิงก์ที่ไม่ได้ตรวจสอบ
sponsored ใช้กับลิงก์ที่มีการจ่ายเงิน ทั้งโฆษณาและการรีวิวที่ได้รับค่าตอบแทน การไม่ใส่ถือว่าฝ่าฝืนนโยบาย
ugc ใช้กับลิงก์ที่มาจากเนื้อหาที่ผู้ใช้สร้าง เช่น ความคิดเห็นท้ายบทความ
อ่านรายละเอียดได้ที่ nofollow, sponsored และ ugc
target และ rel noopener
การเปิดลิงก์ในแท็บใหม่ควรมาพร้อมกับค่าที่ป้องกันไม่ให้หน้าปลายทางเข้าถึงหน้าต้นทางได้ ซึ่งเป็นเรื่องความปลอดภัย ไม่ใช่ SEO โดยตรง แต่เบราว์เซอร์สมัยใหม่ทำให้อัตโนมัติแล้วเป็นส่วนใหญ่
hreflang
บอกว่าหน้านี้มีเวอร์ชันภาษาอื่นอยู่ที่ไหน ใช้กับเว็บหลายภาษา
การตั้งผิดทำให้หน้าแต่ละภาษาแย่งอันดับกันเอง ซึ่งเป็นปัญหาที่พบบ่อยในเว็บท่องเที่ยวที่ทำหลายภาษา อ่านต่อที่ International SEO และ hreflang
แอตทริบิวต์ในส่วนหัวของหน้า
lang
ระบุภาษาหลักของหน้า ใส่ในแท็กเปิดสุดของเอกสาร
เว็บไทยจำนวนมากยังตั้งเป็นภาษาอังกฤษเพราะเป็นค่าเริ่มต้นของธีม ทั้งที่เนื้อหาเป็นภาษาไทยทั้งหมด ซึ่งทำให้ระบบตีความผิดและกระทบทั้งเครื่องมือค้นหาและโปรแกรมอ่านหน้าจอ
นี่เป็นข้อที่ตรวจง่ายที่สุดและแก้เร็วที่สุด แต่ถูกมองข้ามบ่อยที่สุด
charset
ระบุชุดอักขระ ต้องเป็น UTF-8 สำหรับภาษาไทย ถ้าตั้งผิดจะเห็นเป็นตัวอักษรเพี้ยน
rel canonical
บอกว่า URL หลักของเนื้อหานี้คืออันไหน อ่านต่อที่ Canonical Tags
meta robots
ควบคุมว่าให้เก็บหน้านี้เข้าดัชนีหรือไม่ และให้เดินตามลิงก์ในหน้าหรือไม่ อ่านต่อที่ Noindex
meta viewport
บอกเบราว์เซอร์ว่าจะแสดงผลบนมือถืออย่างไร ถ้าไม่มี หน้าจะแสดงแบบย่อจากเดสก์ท็อปซึ่งอ่านไม่ได้บนมือถือ
เป็นข้อบังคับสำหรับเว็บสมัยใหม่และมีผลโดยตรงกับ Mobile-First Indexing อ่านต่อที่ Mobile-First Indexing
แอตทริบิวต์ที่ช่วยเรื่องการเข้าถึง
กลุ่มนี้ไม่ใช่ปัจจัยจัดอันดับโดยตรง แต่ทำให้เนื้อหาเข้าถึงได้กว้างขึ้นและช่วยให้เครื่องเข้าใจโครงสร้าง
aria-label ใช้ตั้งชื่อให้องค์ประกอบที่ไม่มีข้อความ เช่น ปุ่มที่มีแต่ไอคอน
aria-hidden ซ่อนองค์ประกอบจากโปรแกรมอ่านหน้าจอ ใช้กับสิ่งที่เป็นการตกแต่ง
role ระบุบทบาทขององค์ประกอบ ใช้เมื่อจำเป็น แต่ถ้าใช้แท็กที่ถูกต้องอยู่แล้วก็ไม่ต้องใส่
หลักที่ควรจำ ใช้แท็กที่มีความหมายในตัวก่อนเสมอ เช่นใช้แท็กปุ่มจริงแทนการเอากล่องมาทำให้ดูเหมือนปุ่ม เพราะแท็กที่ถูกต้องมาพร้อมพฤติกรรมที่ถูกต้องอยู่แล้ว
สิ่งที่พบบ่อยในเว็บไทยและควรตรวจ
ตั้งภาษาผิด ตรวจได้ในสองวินาทีด้วยการดู Source แล้วดูบรรทัดแรก
รูปไม่มี alt โดยเฉพาะรูปที่อัปโหลดผ่านระบบจัดการเนื้อหาโดยไม่ได้กรอก
รูปไม่ระบุขนาด ทำให้หน้ากระตุก
รูปบนสุดตั้งให้รอโหลด ทำให้ค่า LCP แย่ลงโดยไม่จำเป็น
ลิงก์โฆษณาไม่ใส่ sponsored ซึ่งเป็นความเสี่ยงเชิงนโยบาย
หัวข้อที่ไม่ใช่หัวข้อจริง คือใช้กล่องข้อความปรับขนาดตัวอักษรให้ใหญ่แทนการใช้แท็กหัวข้อ ทำให้โครงสร้างที่เห็นด้วยตากับโครงสร้างที่เครื่องอ่านได้ไม่ตรงกัน
วิธีตรวจ
ดู Source ของหน้า คลิกขวาแล้วเลือกดูซอร์ส ไม่ใช่ Inspect เพราะ Inspect แสดงผลหลัง JavaScript ทำงานแล้ว
ใช้เครื่องมือตรวจสอบในเบราว์เซอร์ ส่วนที่ตรวจการเข้าถึงจะรายงานทั้งเรื่อง alt ที่หายไปและปัญหาอื่น
ใช้เครื่องมือ Crawl เพื่อหารูปที่ไม่มี alt ทั้งเว็บในครั้งเดียว
สรุป
แอตทริบิวต์เป็นรายละเอียดเล็ก ๆ ที่ไม่มีใครเห็นบนหน้าจอ แต่เป็นสิ่งที่บอกให้เครื่องเข้าใจว่าสิ่งที่เห็นคืออะไร
สามข้อที่ควรตรวจก่อนเลยเพราะแก้ง่ายและพบบ่อยที่สุดคือ ภาษาของหน้าตั้งถูกไหม รูปมี alt และระบุขนาดครบไหม และรูปบนสุดตั้งให้โหลดทันทีหรือเปล่า
อ่านบทความอื่นในหมวดนี้ได้ที่ คู่มือ SEO