Title Attribute คืออะไร ดูประโยชน์และวิธีการทำที่คนทำเว็บไซต์และ SEO ควรรู้!

Title Attribute

เกร็ดเล็กเกร็ดน้อยในการทำ SEO เนี่ย เรียกว่ามีเยอะแยะมากมายให้ได้ศึกษา ทั้งในฝั่งของการทำ On-Page SEO, Off-Page SEO และ Technical SEO ซึ่ง AMPROSEO ก็ได้นำเสนอไปแล้วหลายต่อหลายบทความ และบทความนี้เองก็จะมาพูดถึงอีกหนึ่งจุดที่หลายอาจมองข้าม แต่ก็เป็นสิ่งสำคัญอยู่เหมือนกัน นั่นคือ การทำ Title Attribute มาดูกันว่า Title Attribute คืออะไร มีประโยชน์ยังไง และจะทำได้ยังไงบ้าง ตาม AMPROSEO ไปดูพร้อมๆ กันได้เลยนะ

Title Attribute คืออะไร

ที่มาภาพ: www.nngroup.com

Title Attribute คือ แอตทริบิวต์ที่ใช้ในแท็ก (Tag) ของ HTML ใช้ในการกำหนดข้อความที่เป็นคำอธิบายสำหรับองค์ประกอบต่างๆ ในหน้าเว็บไซต์ ซึ่งการแสดงผลในหน้าเว็บไซต์จะขึ้นมาตอนที่เราเมาส์ไปชี้ (hover) โดยจะขึ้นมาเป็นคำอธิบายที่เราใส่ไว้เพื่อช่วยให้ผู้ใช้เข้าใจความหมายและประโยชน์ของรูปหรือข้อความนั้นๆ ได้มากยิ่งขึ้น ลองดูภาพประกอบของการแสดงผล Title Attribute ได้ในรูปด้านล่างเลยนะ

ที่มาภาพ: www.rankwatch.com

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
titletitle attribute/title
style
body {
text-align: center;
}
h1 {
color: green;
}
/style
/head

body
h1GeeksforGeeks/h1
h2title 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 สำหรับทำเว็บไซต์สำเร็จรูปที่คนเขียนโค้ดไม่เป็นก็สามารถสร้างเว็บไซต์เป็นของตัวเองได้ ซึ่งหลายคนก็ใช้เจ้าสิ่งนี้ในการทำเว็บไซต์ของตัวเอง ( AMPROSEO เองก็เป็นหนึ่งในนั้น) เลยอยากจะยกวิธีการทำ Title Attribute ใน WordPress มาให้ได้ลองทำตามกัน โดยจะมีวิธีการดังต่อไปนี้

ใส่ Title Attribute บนแถบเมนู

1. ทำการล็อกอินเข้าไปยัง WordPress ที่ทำไว้
2. เข้าไปหน้า Dashboard เลือก Appearance → Menus
3. เลือก Screen Options และเลือกตัวเลือก Title Attribute ที่อยู่ใต้หัวข้อ advanced menu properties
   
4. คลิกไปที่เมนูที่คุณต้องการเพิ่ม Title Attribute โดยเข้าไปที่ Menu structure โดยช่อง Title Attribute จะปรากฏอยู่ใต้หัวข้อ Navigation Label
   
5. พิมพ์ข้อมูลเพิ่มเติมลงไปเพื่อทำเป็น Title Attribute ซึ่งควรเป็นคำอธิบายที่เกี่ยวกับเมนูนั้นๆ
6. กดปุ่ม Save Menu หากสำเร็จ คุณควรพบ Title Attribute แสดงเป็นคำแนะนำเวลาที่เอาเมาส์ไปชื่อในแถบเมนูดังภาพตัวอย่าง
   

ใส่ Title Attribute บนแถบรูปภาพ

1. เข้าไปที่หน้าโพสต์หรือหน้าเพจที่คุณใช้สำหรับสร้างคอนเทนต์บนเว็บไซต์ของคุณ แล้วทำการใส่รูปภาพลงไปในบล็อกที่ทำอยู่ในเรียบร้อย
2. คลิกที่ภาพเพื่อเปิดใช้งานแถบ Block ด้านขวามือ เลื่อนลงมาด้านล่างจะเจอกับหัวข้อ Advanced menu ให้คลิกเปิด 1 ครั้ง
   
3. พิมพ์ข้อมูลเพิ่มเติมสำหรับอธิบายรูปภาพในช่อง Title Attribute
   
4. เมื่อทำเสร็จเรียบร้อยให้ทำการบันทึกการเปลี่ยนแปลงหรือถ้าเป็นบทความใหม่ก็ให้ทำการกดเผยแพร่เลย หลังจากนั้นให้เข้าไปยังลิงก์ที่ทำการเพิ่ม Title Attribute เข้าไป เลื่อนลงมายังภาพที่ทำการใส่ Title Attribute แล้วใช้เมาส์ชี้ที่ภาพ หากเห็นว่ามีคำอธิบายเพิ่มเติมขึ้นมา แสดงว่า Title Attribute ได้ทำการเปิดใช้งานเรียบร้อยแล้ว
   

สรุป

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