ใน HTML5, แท็ก <title> ใช้ในการกำหนดชื่อของหน้าเว็บ ซึ่งจะแสดงในแถบชื่อของเบราว์เซอร์ และในแท็บต่าง ๆ ที่ผู้ใช้เปิด นอกจากนี้ยังมีความสำคัญในการปรับแต่ง SEO (Search Engine Optimization) เพราะชื่อที่อยู่ในแท็ก <title> จะถูกใช้โดยเสิร์ชเอนจิ้นเพื่อระบุว่าหน้านั้นเกี่ยวข้องกับอะไร
รูปแบบการใช้งานแท้ก <title>
การใช้งานพื้นฐาน
ใช้เพื่อระบุชื่อของหน้าเว็บ โดยต้องอยู่ภายใน <head> ของเอกสาร HTML ดังตัวอย่าง
<!DOCTYPE html>
<html lang="en">
<head>
<title>ดีครับดอทคอม</title>
</head>
<body>
<h1>Welcome to My Website</h1>
</body>
</html>ในตัวอย่างนี้ ชื่อ “ดีครับดอทคอม” จะแสดงในแถบชื่อของเบราว์เซอร์
การปรับแต่ง SEO
ใช้คำที่มีความหมายชัดเจน และเป็นคำที่เสิร์ชเอนจิ้นสามารถอ่านและเข้าใจได้ เพื่อเพิ่มโอกาสให้หน้าเว็บติดอันดับการค้นหาได้ดีขึ้น
<title>Best Rayong Resorts - Beachfront Accommodation in Thailand</title>ในตัวอย่างนี้ มีการใช้คำที่ชัดเจนและเฉพาะเจาะจง ซึ่งช่วยให้คนค้นหาข้อมูลเกี่ยวกับรีสอร์ทในระยองเจอเว็บนี้ได้ง่ายขึ้น
การใช้งาน <title> พร้อมกับไอคอน (Favicon)
สามารถใช้ร่วมกับไอคอนเว็บ (favicon) ที่จะแสดงในแท็บข้างๆ ชื่อหน้า
<head>
<link rel="icon" href="favicon.ico">
<title>My Resort - Rayong Thailand</title>
</head>การตั้งชื่อหน้าในเว็บไซต์หลายหน้า (Multi-page Websites)
หากเว็บไซต์มีหลายหน้า ควรตั้งชื่อในแท็ก <title> ให้เหมาะสมกับแต่ละหน้า ตัวอย่างเช่น
หน้า Home
<title>Home - My Resort in Rayong</title>หน้า About Us
<title>About Us - My Resort in Rayong</title>หน้า Contact
<title>Contact - My Resort in Rayong</title>การใช้สัญลักษณ์พิเศษใน <title>
สามารถใช้สัญลักษณ์พิเศษเช่นขีด (-), ทวิภาค (|) เพื่อแยกข้อความในชื่อหน้าได้ เพื่อให้ดูชัดเจนและเป็นมืออาชีพ
<title>My Resort | Rayong Beachfront Accommodations</title>ข้อควรระวัง
- ไม่ควรให้ข้อความใน
<title>ยาวเกินไป แนะนำให้อยู่ระหว่าง 50-60 ตัวอักษร เพื่อไม่ให้ข้อความถูกตัดออกในการแสดงผลบนเสิร์ชเอนจิ้น - ควรใช้คำสำคัญ (keywords) ที่เกี่ยวข้องกับเนื้อหาของหน้าเว็บใน
<title>เพื่อช่วยในการจัดอันดับของเสิร์ชเอนจิ้น
การใช้งาน <title> ที่มีประสิทธิภาพไม่เพียงแค่ช่วยให้ผู้ใช้สามารถรู้เนื้อหาของหน้าได้ทันที แต่ยังช่วยเพิ่มการมองเห็นในผลการค้นหาของเสิร์ชเอนจิ้นได้ด้วย