HTML Title Tag: คู่มือการใช้งานแท็ก Title ขั้นตอนต่อขั้นตอน

แท็ก HTML <title> กำหนดชื่อเรื่องของหน้าเว็บ ชื่อเรื่องนี้จะปรากฏบนแท็บของเบราว์เซอร์ และเมื่อคุณเพิ่มหน้าไปยังรายการบุ๊กมาร์ก ทุกหน้าเว็บควรมีแท็ก <title>

เมื่อคุณสร้างหน้าเว็บ คุณจะต้องระบุชื่อเรื่องสำหรับหน้าเว็บนั้น ตัวอย่างเช่น สมมติคุณสร้างหน้าแรกสำหรับเว็บไซต์ร้านเบเกอรี่ท้องถิ่น คุณอาจต้องการให้ชื่อร้านเบเกอรี่ปรากฏเป็นชื่อเรื่องของหน้าเว็บ

ที่นี่คือที่มาของแท็ก HTML <title> แท็ก <title> กำหนดชื่อเรื่องของเอกสารใน HTML และวางไว้ภายในส่วน head ของหน้าเว็บ บทช่วยสอนนี้จะอธิบายความสำคัญของแท็ก <title> และวิธีใช้งานในโค้ดของคุณ พร้อมตัวอย่าง

การทบทวน HTML Head

ใน HTML องค์ประกอบ <head> ใช้เก็บองค์ประกอบส่วนหัว (heading elements) องค์ประกอบเหล่านี้ให้ข้อมูลเพิ่มเติมเกี่ยวกับหน้าเว็บ เช่น ไอคอนที่ควรปรากฏสำหรับหน้าเว็บ

ร่วมกัน องค์ประกอบในส่วน <head> อธิบายข้อมูลหลักของเอกสาร พวกมันสามารถชี้ให้เบราว์เซอร์ทราบถึงไฟล์สไตล์ชีตและสคริปต์ที่ใช้ในเอกสาร (หากมี)

HTML <title>

แท็ก HTML <title> กำหนดชื่อเรื่องของเอกสาร แท็กนี้ปรากฏภายในแท็ก <head> แท็กนี้ควรสรุปวัตถุประสงค์ของหน้าเว็บ คุณต้องระบุแท็ก <title> เพียงหนึ่งต่อหน้า

มา看看ไวยากรณ์ของแท็กนี้:

<head>
  <title>Home | Career Karma</title>
</head>

แท็ก <title> มีทั้งแท็กเปิดและแท็กปิด ระหว่างแท็กเหล่านี้ เราเขียนชื่อเรื่องสำหรับหน้าเว็บ

ข้อความในแท็ก <title> ของเราไม่แสดงบนหน้าเว็บ เนื่องจากแท็ก <title> ถูกล้อมรอบด้วย <head> แทนที่จะเป็นแท็ก <body> บนหน้าเว็บของเรา

ชื่อเรื่องข้างต้นแข็งแกร่ง เพราะบอกผู้ใช้ได้ชัดเจนว่ากำลังดูหน้าไหน เรายังระบุชื่อเว็บไซต์ ซึ่งช่วยป้องกันความสับสนหากผู้ใช้เปิดหลายแท็บที่มีชื่อเรื่องว่า "Home"

ชื่อเรื่องของคุณควรชัดเจน อ่านง่าย และไม่ยาวเกินไป พิจารณาตัวอย่างชื่อเรื่องต่อไปนี้:

• Blog – Career Karma
• Contact Career Karma
• Career Karma Blog

ชื่อเรื่องทั้งหมดนี้สื่อสารวัตถุประสงค์ของหน้าได้ดี ชื่อเรื่องไม่ควรยาวเกินไป เพราะมีพื้นที่จำกัดบนแท็บ

แท็ก <title> รองรับแอตทริบิวต์ส่วนกลาง (global attributes) ทั้งหมดใน HTML5 แท็กนี้ได้รับการรองรับจากเบราว์เซอร์สมัยใหม่ทุกตัว แท็ก title ไม่มีแอตทริบิวต์ HTML เฉพาะองค์ประกอบ

ตัวอย่าง HTML Title Tag

องค์ประกอบ title ของ HTML ถูกกำหนดภายในแท็ก <head> บนหน้า HTML สมมติเรากำลังสร้างหน้าเว็บสำหรับร้านเบเกอรี่ท้องถิ่นของเรา ชื่อ Joseph Abrams & Sons เรากำลังสร้างหน้าแรก และต้องการให้ชื่อร้านเบเกอรี่ปรากฏในชื่อเรื่องของเว็บไซต์

เราสามารถใช้โค้ดต่อไปนี้เพื่อตั้งชื่อเรื่องหน้าเป็น Joseph Abrams & Sons.:

<head>
  <title>Joseph Abrams & Sons.</title>
</head>

เมื่อเปิดหน้าเว็บของเว็บไซต์เรา ชื่อเรื่องของหน้าจะถูกตั้งเป็น Joseph Abrams & Sons

ตอนนี้ สมมติเรากำลังสร้างหน้าติดต่อสำหรับร้านเบเกอรี่ท้องถิ่นจากก่อนหน้านี้ เราอาจต้องการใช้ชื่อเรื่อง Contact | Joseph Abrams & Sons ชื่อเรื่องนี้เรียบง่ายและอธิบายวัตถุประสงค์ของหน้าเว็บได้ดี

ทำไมควรใช้แท็ก <title>?

มีหลายเหตุผลที่การระบุแท็กชื่อเรื่องเอกสารมีความสำคัญ

แรก แท็ก <title> แสดงชื่อเรื่องหน้าเว็บบนแถบชื่อเรื่องของเบราว์เซอร์ ตัวอย่างเช่น ชื่อเรื่องของหน้านี้คือ HTML Title Tag: A How-To Guide | Career Karma ซึ่งปรากฏในชื่อแท็บของเว็บไซต์นี้

สอง แท็ก <title> ติดฉลากหน้าเว็บเมื่อถูกบุ๊กมาร์กหรือบันทึกเป็นรายการโปรดในเบราว์เซอร์ของผู้ใช้ ชื่อเรื่องที่คุณระบุจะเป็นชื่อที่บันทึกอัตโนมัติ หากคุณไม่ใช้ชื่อเรื่องที่เหมาะสม ผู้ใช้อาจพบว่ายากที่จะค้นพบหน้าของคุณในบุ๊กมาร์ก

เครื่องมือค้นหา (Search engines) ขึ้นอยู่กับเนื้อหาของแท็ก title ชื่อเรื่องที่ระบุในแท็ก title จะกลายเป็นส่วนหัวของหน้าเว็บบนหน้าผลการค้นหา (SERP) SERP คือรายการบนหน้าผลการค้นหา

นอกจากนี้ เนื้อหาของแท็ก <title> ยังถูกใช้เพื่อกำหนดหัวข้อของหน้าเว็บโดยเครื่องมือค้นหา

ตอนนี้เราทราบว่าแท็ก <title> สำคัญ คุณอาจถามว่า: ฉันจะใช้แท็ก title ใน HTML อย่างไร? มาตอบคำถามนี้กัน

สรุป

แท็ก <title> ระบุชื่อเรื่องของเอกสาร HTML ชื่อเรื่องนี้ปรากฏในชื่อแท็บของเบราว์เซอร์ ยังถูกใช้โดยเครื่องมือค้นหาเมื่อประมวลผลหน้าเว็บเพื่อตัดสินใจเรื่องส่วนหัวและหัวข้อ

บทช่วยสอนนี้อธิบายพื้นฐานของแท็ก HTML <title> พร้อมตัวอย่าง ตอนนี้คุณพร้อมที่จะเริ่มใช้แท็ก title อย่างมืออาชีพ!

ต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการเขียนโค้ด HTML? ดู คู่มือ How to Learn HTML ซึ่งมีรายการทรัพยากรเรียนรู้และหลักสูตรชั้นนำสำหรับนักพัฒนาระดับเริ่มต้นและกลาง คุณยังจะพบหนังสือแนะนำเกี่ยวกับ HTML