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

Title Attribute

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

Title Attribute คืออะไร

Title-Attribute-1-1024x423

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

Title-Attribute-2 (1)

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-3
  • การทำ Title Attribute ใน WordPress

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

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

  1. ทำการล็อกอินเข้าไปยัง WordPress ที่ทำไว้
  2. เข้าไปหน้า Dashboard เลือก Appearance → Menus
  3. เลือก Screen Options และเลือกตัวเลือก Title Attribute ที่อยู่ใต้หัวข้อ advanced menu properties
Title-Attribute-4-1

4. คลิกไปที่เมนูที่คุณต้องการเพิ่ม Title Attribute โดยเข้าไปที่ Menu structure โดยช่อง Title Attribute จะปรากฏอยู่ใต้หัวข้อ Navigation Label

Title-Attribute-5
  1. พิมพ์ข้อมูลเพิ่มเติมลงไปเพื่อทำเป็น Title Attribute ซึ่งควรเป็นคำอธิบายที่เกี่ยวกับเมนูนั้นๆ
  2. กดปุ่ม Save Menu หากสำเร็จ คุณควรพบ Title Attribute แสดงเป็นคำแนะนำเวลาที่เอาเมาส์ไปชื่อในแถบเมนูดังภาพตัวอย่าง
Title-Attribute-6

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

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

3.พิมพ์ข้อมูลเพิ่มเติมสำหรับอธิบายรูปภาพในช่อง Title Attribute

Title-Attribute-8

4.เมื่อทำเสร็จเรียบร้อยให้ทำการบันทึกการเปลี่ยนแปลงหรือถ้าเป็นบทความใหม่ก็ให้ทำการกดเผยแพร่เลย หลังจากนั้นให้เข้าไปยังลิงก์ที่ทำการเพิ่ม Title Attribute เข้าไป เลื่อนลงมายังภาพที่ทำการใส่ Title Attribute แล้วใช้เมาส์ชี้ที่ภาพ หากเห็นว่ามีคำอธิบายเพิ่มเติมขึ้นมา แสดงว่า Title Attribute ได้ทำการเปิดใช้งานเรียบร้อยแล้ว

สรุป

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

Picture of 9IDea

9IDea

9iDea ผู้หลงไหลในการทดสอบการทำ SEO จนเป็นนิสัย แถมยังเป็นผู้ชอบเล่าเรื่องเกี่ยวกับเรื่องการทำ SEO และย่อมาให้อ่านกันแบบง่าย ๆ