บทความที่เกี่ยวข้อง
HTML Attributes คืออะไร?
สวัสดีครับหลานๆ กลับมาพบกับพ่อใหญ่ที่ BIQDADDY กันอีกแล้วนะครับ! วันนี้พ่อใหญ่จะพามาทำความรู้จักกับศัพท์เทคนิคคำนึงที่คนทำเว็บและคนทำ SEO ต้องเจอหน้ากันทุกวัน นั่นก็คือคำว่า “Attributes” (แอตทริบิวต์) ครับ
เวลาเราทำเว็บ เราจะต้องเขียนด้วยภาษา HTML ใช่ไหมครับ? ซึ่งภาษา HTML มันก็จะมี “แท็ก (Tags)” ต่างๆ เช่น แท็กรูปภาพ แท็กลิงก์ แต่ลำพังแค่แท็กเดี่ยวๆ กูเกิลบอทมันจะไม่ค่อยรู้เรื่องครับ เราจึงต้องมีสิ่งที่เรียกว่า Attributes เข้ามาช่วยขยายความ!
อธิบายให้เห็นภาพสไตล์พ่อใหญ่นะครับ สมมติว่า “แท็ก HTML” คือ “รถยนต์” ตัว Attributes ก็คือการระบุรายละเอียดให้รถคันนั้นครับ เช่น บอกว่า สีแดง, ยี่ห้อฮอนด้า, เครื่องยนต์ 1500cc
พอเราใส่ Attributes เข้าไป กูเกิลบอทก็จะเข้าใจทันทีว่า อ๋อ! นี่ไม่ใช่แค่รูปรถธรรมดานะ แต่มันคือรูปรถสีแดงยี่ห้อฮอนด้า ซึ่งความเข้าใจตรงนี้แหละครับที่ส่งผลต่อคะแนน SEO แบบเต็มๆ!
5 แอตทริบิวต์ (Attributes) ยอดฮิต ที่คนทำ SEO ต้องจำให้ขึ้นใจ!
ในโลกนี้มี Attributes เป็นร้อยตัวครับ แต่สำหรับคนทำ SEO พ่อใหญ่คัดตัวตึงๆ ที่หลานต้องเจอบ่อยๆ มาให้ 5 ตัวครับ ท่องไว้เลย!
1. href (ป้ายบอกทางของลิงก์)
ตัวนี้ย่อมาจาก Hypertext Reference ครับ มันจะสิงสถิตอยู่ในแท็กลิงก์ <a> เพื่อคอยบอกว่า “ถ้าคนคลิกข้อความนี้ จะให้พาบินไปหน้าเว็บไหน?”
- ตัวอย่าง:
- ความสำคัญต่อ SEO: เป็นหัวใจหลักของการทำ Internal Links และ External Links เพื่อส่งพลัง (Link Juice) หากันในเว็บไซต์ครับ
2. alt (คำบรรยายรูปภาพให้คนตาบอดและบอทฟัง)
ตัวนี้ย่อมาจาก Alternative text ครับ จะอยู่ในแท็กรูปภาพ <img> เสมอ บอทกูเกิลไม่มีตาดูรูปนะครับ มันดูรูปภาพไม่เป็น! มันรู้ว่ารูปนี้คือรูปอะไรจากการ “อ่าน” ข้อความที่เราใส่ไว้ใน alt attribute นี่แหละครับ
- ตัวอย่าง:
- ความสำคัญต่อ SEO: สำคัญมหาศาลต่อการทำ Image Optimization ถ้ารูปไหนไม่ใส่ alt ถือว่าพลาดโอกาสไปโผล่ใน Google Images อย่างน่าเสียดายครับ
3. rel (บอกความสัมพันธ์ของลิงก์)
ตัวนี้ย่อมาจาก Relationship ครับ เอาไว้บอกกูเกิลว่า “ลิงก์ที่เราชี้ไปหาเนี่ย เรามีความสัมพันธ์กับมันยังไง?” ตัวที่วงการ SEO ใช้บ่อยที่สุดคือ rel=”nofollow” ครับ
- ตัวอย่าง:
4.rel=”canonical” (ป้ายประกาศสิทธิ์ตัวจริง!)
นี่คือเวทมนตร์ระดับ Technical SEO ครับ! Attribute ตัวนี้เอาไว้แก้ปัญหา “เนื้อหาซ้ำซ้อน” Duplicate Content สมมติหลานมีหน้าเว็บที่เนื้อหาเหมือนกันเป๊ะ 3 หน้า หลานต้องใช้ตัวนี้ชี้บอกกูเกิลว่า “หน้าไหนคือตัวจริงที่อยากให้ติดอันดับ”
- ตัวอย่าง:
5. hreflang (บอกภาษาและประเทศ)
สำหรับธุรกิจระดับอินเตอร์ที่มีเว็บหลายภาษา (เช่น มีทั้งภาษาไทยและภาษาอังกฤษ) เราต้องใช้ Attribute ตัวนี้เพื่อบอกกูเกิลว่า “ถ้าคนไทยเสิร์ช ให้เอาหน้าภาษาไทยไปโชว์นะ” กูเกิลจะได้ไม่สับสนครับ
- ตัวอย่าง:
สรุปของพ่อใหญ่
Attributes ก็คือ “คำสั่งขยายความ” ที่ทำให้โค้ด HTML ธรรมดาๆ กลายเป็นโค้ดที่สื่อสารกับกูเกิลบอทได้อย่างมีประสิทธิภาพครับ ไม่ว่าจะเป็นการบอกปลายทางลิงก์ การอธิบายรูปภาพ หรือการบอกความสัมพันธ์ ล้วนต้องพึ่งพา Attributes ทั้งสิ้น
การที่โปรแกรมเมอร์ใส่ Attributes ได้อย่างถูกต้อง ครบถ้วน คือพื้นฐานสำคัญที่สุดที่จะทำให้การทำ On-Page SEO ของเว็บหลานสมบูรณ์แบบครับ!
FAQ หลานๆ ถาม พ่อใหญ่ตอบ (เรื่อง Attributes)
เว็บไม่พังครับหลาน! แต่ “คะแนน SEO พัง” ครับ! เพราะนอกจากกูเกิลจะไม่รู้ว่ารูปนั้นคืออะไรแล้ว มันยังผิดหลักการเข้าถึงเว็บของผู้พิการทางสายตา (Accessibility) ด้วย กูเกิลจะหักคะแนนความใส่ใจของเราครับ!
อย่าหาทำครับ! (เรียกว่า Keyword Stuffing) ให้เขียนอธิบายรูปไปตามความเป็นจริงว่ารูปนั้นคืออะไร อ่านแล้วเป็นภาษาคนก็พอครับ เช่น ถ้าเป็นรูปรองเท้า ก็ใส่ว่า alt=”รองเท้าผ้าใบผู้ชาย สีดำ รุ่น XYZ” แบบนี้กูเกิลรักเลยครับ
อธิบายง่ายๆ นะครับหลาน href (มักใช้กับลิงก์) คือ “ป้ายบอกทาง” ให้คนคลิกเพื่อ เดินไปหา ข้อมูลหน้าอื่น ส่วน src (ย่อมาจาก Source มักใช้กับรูปภาพหรือสคริปต์) คือการ ดึงเอา ข้อมูลจากที่อื่นมาโชว์ในหน้านี้เลยครับ ทำหน้าที่คนละแบบกันครับ
ได้สบายมากครับ! แถมกูเกิลยังชอบด้วยซ้ำ เช่น แท็กรูปภาพ 1 รูป หลานควรใส่ทั้ง src (ดึงรูปมาโชว์), alt (คำอธิบาย), width (ความกว้าง), และ height (ความสูง) ไปพร้อมๆ กันเลย การบอกขนาดรูปให้ชัดเจนจะช่วยให้เว็บโหลดลื่น ไม่กระตุก ส่งผลดีต่อคะแนน Core Web Vitals ของเว็บหลานด้วยครับ!
แทบไม่มีผลเลยครับหลาน! (อย่าจำสับสนกับ Meta Title นะครับ) ตัว title attribute เอาไว้แค่โชว์ข้อความเล็กๆ เวลาคนเอาเมาส์ไปชี้ค้างไว้ (Tooltip) เท่านั้น กูเกิลให้ความสำคัญกับคำนี้ค่อนข้างน้อยครับ พ่อใหญ่แนะนำว่าสู้เอาเวลาไปเขียนคำในลิงก์ (Anchor Text) ให้ตรงกับคีย์เวิร์ดจะได้ผลดีกว่าเยอะครับ!
เขียนโดย BIQDADDY
อ่านอะไรต่อดี?
