Title Attribute
เกร็ดเล็กเกร็ดน้อยในการทำ SEO เนี่ย เรียกว่ามีเยอะแยะมากมายให้ได้ศึกษา ทั้งในฝั่งของการทำ On-Page SEO, Off-Page SEO และ Technical SEO ซึ่ง Maewsom ก็ได้นำเสนอไปแล้วหลายต่อหลายบทความ และบทความนี้เองก็จะมาพูดถึงอีกหนึ่งจุดที่หลายอาจมองข้าม แต่ก็เป็นสิ่งสำคัญอยู่เหมือนกัน นั่นคือ การทำ Title Attribute มาดูกันว่า Title Attribute คืออะไร มีประโยชน์ยังไง และจะทำได้ยังไงบ้าง ตามแมวส้มไปดูพร้อมๆ กันได้เลยนะเมี้ยว~
Title Attribute คืออะไร
Title Attribute คือ แอตทริบิวต์ที่ใช้ในแท็ก (Tag) ของ HTML ใช้ในการกำหนดข้อความที่เป็นคำอธิบายสำหรับองค์ประกอบต่างๆ ในหน้าเว็บไซต์ ซึ่งการแสดงผลในหน้าเว็บไซต์จะขึ้นมาตอนที่เราเมาส์ไปชี้ (hover) โดยจะขึ้นมาเป็นคำอธิบายที่เราใส่ไว้เพื่อช่วยให้ผู้ใช้เข้าใจความหมายและประโยชน์ของรูปหรือข้อความนั้นๆ ได้มากยิ่งขึ้น ลองดูภาพประกอบของการแสดงผล Title Attribute ได้ในรูปด้านล่างเลยนะเมี้ยว~
Attribute มีกี่ประเภท
เสริมเพิ่มอีกนิด ในภาษา HTML นั้นจะมี Attributes ที่สำคัญอยู่ 4 Attributes ได้แก่
- Title Attribute แอตทริบิวต์ที่เป็นการระบุคำอธิบายต่างๆ บนหน้าเว็บไซต์ จะเป็นเหมือนแท็กที่แนะนำเกี่ยวกับ Element ต่างๆ บนหน้าเว็บไซต์นั่นเอง
- ID Attribute คือ แอตทริบิวต์ที่ใช้เพื่อระบุรหัสเฉพาะสำหรับองค์ประกอบ HTML พูดให้เข้าใจง่ายขึ้นคือ การระบุตัวตนของแท็กใน 1 หน้าเว็บเพจว่าในแต่ละหน้าจะต้องไม่มีแท็กไหนที่มี ID ซ้ำกัน
- Class Attribute คือ แอตทริบิวต์ที่ใช้เพื่อชี้ไปยัง Class Name เพื่อจัดกลุ่มของ Element ต่างๆ บนเว็บไซต์
- Style Attribute คือ แอตทริบิวต์ที่ใช้ในการตกแต่งหน้าเว็บไซต์ โดยจะใช้เพื่อเพิ่มสไตล์ให้กับองค์ประกอบ เช่น สี รูปแบบฟอนต์ ขนาด และอื่นๆ
ประโยชน์ของ Title Attribute
Title Attribute มีประโยชน์ในการช่วยทำให้ Google เข้าใจในบริบทของลิงก์หรือรูปภาพในเว็บไซต์มากยิ่งขึ้น โดยทำงานร่วมกันกับ Anchor Text เพื่อที่จะช่วยทำหน้าที่อธิบายว่า Anchor Text นั้นเกี่ยวข้องกับอะไร ทำให้ไม่ต้องเขียนอธิบาย Anchor Text ให้ยืดยาว นอกจากนี้ลิงก์ที่มีคำอธิบายเหมาะสมอาจได้รับการจัดอันดับที่สูงขึ้นในผลการค้นหา เพราะ Google เห็นข้อมูลคำอธิบายที่เกี่ยวข้องที่ตรงกับ Keyword ที่ผู้คนใช้ค้นหาข้อมูล (Search Intent) ทำให้เว็บไซต์นั้นๆ อาจได้รับการแสดงผลบน SERP ในอันดับที่สูงขึ้น
ส่วนในฝั่งของผู้ใช้งานเว็บไซต์เองก็ได้ Title Attribute ช่วยทำให้สามารถเข้าใจความหมายขององค์ประกอบต่างๆ บนเว็บไซต์ได้มากยิ่งขึ้น จากการเห็นข้อความคำอธิบายที่ชัดเจนและสอดคล้องกับเนื้อหาที่กำลังอ่านอยู่นั่นเอง
วิธีทำ Title Attribute
สำหรับวิธีการทำ Title Attribute จะขอแบ่งออกเป็น 2 วิธีด้วยกัน นั่นคือ
- การทำ Title Attribute ด้วยการเขียนโค้ด HTML
เริ่มจากวิธียากๆ ก่อน (แต่ไม่ได้ยากขนาดนั้น) ด้วยวิธีการเขียนโค้ด ซึ่งโค้ด Title Attribute จะสามารถเขียนได้ตามตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>title attribute</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>title attribute</h2>
<p title=”GeeksforGeeks: A computer science
portal for geeks”>
GeeksforGeeks.org
</p>
</body>
</html>
เมื่อทำการรันโค้ดออกมา Result ที่ได้จะเป็นแบบรูปด้านล่าง คือมี Title Attribute ปรากฏขึ้นเพื่ออธิบาย Link ที่ใส่เอาไว้ในหน้าเว็บไซต์
- การทำ Title Attribute ใน WordPress
WordPress คือ CMS สำหรับทำเว็บไซต์สำเร็จรูปที่คนเขียนโค้ดไม่เป็นก็สามารถสร้างเว็บไซต์เป็นของตัวเองได้ ซึ่งหลายคนก็ใช้เจ้าสิ่งนี้ในการทำเว็บไซต์ของตัวเอง (แมวส้มเองก็เป็นหนึ่งในนั้น) เลยอยากจะยกวิธีการทำ Title Attribute ใน WordPress มาให้ได้ลองทำตามกัน โดยจะมีวิธีการดังต่อไปนี้
ใส่ Title Attribute บนแถบเมนู
- ทำการล็อกอินเข้าไปยัง WordPress ที่ทำไว้
- เข้าไปหน้า Dashboard เลือก Appearance → Menus
- เลือก Screen Options และเลือกตัวเลือก Title Attribute ที่อยู่ใต้หัวข้อ advanced menu properties
- คลิกไปที่เมนูที่คุณต้องการเพิ่ม Title Attribute โดยเข้าไปที่ Menu structure โดยช่อง Title Attribute จะปรากฏอยู่ใต้หัวข้อ Navigation Label
- พิมพ์ข้อมูลเพิ่มเติมลงไปเพื่อทำเป็น Title Attribute ซึ่งควรเป็นคำอธิบายที่เกี่ยวกับเมนูนั้นๆ
- กดปุ่ม Save Menu หากสำเร็จ คุณควรพบ Title Attribute แสดงเป็นคำแนะนำเวลาที่เอาเมาส์ไปชื่อในแถบเมนูดังภาพตัวอย่าง
ใส่ Title Attribute บนแถบรูปภาพ
- เข้าไปที่หน้าโพสต์หรือหน้าเพจที่คุณใช้สำหรับสร้างคอนเทนต์บนเว็บไซต์ของคุณ แล้วทำการใส่รูปภาพลงไปในบล็อกที่ทำอยู่ในเรียบร้อย
- คลิกที่ภาพเพื่อเปิดใช้งานแถบ Block ด้านขวามือ เลื่อนลงมาด้านล่างจะเจอกับหัวข้อ Advanced menu ให้คลิกเปิด 1 ครั้ง
- พิมพ์ข้อมูลเพิ่มเติมสำหรับอธิบายรูปภาพในช่อง Title Attribute
- เมื่อทำเสร็จเรียบร้อยให้ทำการบันทึกการเปลี่ยนแปลงหรือถ้าเป็นบทความใหม่ก็ให้ทำการกดเผยแพร่เลย หลังจากนั้นให้เข้าไปยังลิงก์ที่ทำการเพิ่ม Title Attribute เข้าไป เลื่อนลงมายังภาพที่ทำการใส่ Title Attribute แล้วใช้เมาส์ชี้ที่ภาพ หากเห็นว่ามีคำอธิบายเพิ่มเติมขึ้นมา แสดงว่า Title Attribute ได้ทำการเปิดใช้งานเรียบร้อยแล้ว
สรุป
จะเห็นแล้วว่า Title Attribute เป็นส่วนหนึ่งที่ช่วยปรับปรุงและพัฒนาเว็บไซต์ให้ทั้งในฝั่งของผู้ใช้งานเว็บไซต์และ Google ซึ่งช่วยให้ทุกฝ่ายเข้าใจเนื้อหาหรือองค์ประกอบต่างๆ บนเว็บไซต์ได้มากยิ่งขึ้น และส่งเสริมโอกาสที่ทำให้อันดับของเว็บไซต์ติดอันดับที่ดีขึ้นได้ด้วย เมื่อคุณเห็นถึงประโยชน์ของการทำ Title Attribute รวมถึงวิธีการทำจากแมวส้มไปแล้วก็อย่าลืมเอาไปปรับใช้กับเว็บไซต์ของตัวเอง เพิ่มเพิ่มประสิทธิภาพให้กับการทำ SEO ที่ดีขึ้นด้วยนะเมี้ยว~
