แท็ก <meta> คืออะไร?
แท็ก <meta> ใน HTML ใช้สำหรับกำหนดข้อมูลเมตา (Metadata) ของหน้าเว็บ เช่น คำอธิบาย (Description), คีย์เวิร์ด (Keywords), ผู้เขียน (Author) และการตั้งค่าดูแล้ว (Viewport) ข้อมูลเหล่านี้ ไม่แสดงบนหน้าเว็บโดยตรง แต่ถูกใช้โดยเครื่องมือค้นหา (Search Engines), เบราว์เซอร์ และบริการโซเชียลมีเดีย
การตั้งค่า Viewport (สำคัญสำหรับ Responsive Design)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
บรรทัดนี้บอกเบราว์เซอร์ให้ปรับความกว้างหน้าเว็บเท่ากับอุปกรณ์ และซูมเริ่มต้นที่ 100%
แอตทริบิวต์หลักของ <meta>
| ลำดับ | แอตทริบิวต์และคำอธิบาย |
|---|---|
| 1 | name ชื่อของคุณสมบัติ เช่น keywords, description, author, revised, generator ฯลฯ |
| 2 | content ค่าของคุณสมบัติที่ระบุใน name หรือ http-equiv |
| 3 | scheme (เลิกใช้งานแล้ว) ระบุโครงร่างเพื่อตีความค่าของ content (ไม่แนะนำให้ใช้) |
| 4 | http-equiv ใช้สำหรับ HTTP Response Headers เช่น refresh (รีเฟรชหน้า), set-cookie, content-type, expires |
| 5 | charset ระบุการเข้ารหัสอักขระของเอกสาร (ควรใช้ UTF-8) |
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="เรียนรู้การเขียนโปรแกรมฟรี">
<meta name="keywords" content="วิดีโอสอน, บทเรียนฟรี, เรียนเขียนโค้ด, เว็บไซต์">
<meta http-equiv="refresh" content="30">
<meta name="author" content="สมชาย ใจดี">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>บทเรียนเขียนโปรแกรม</h2>
<p>บทเรียนฟรีสำหรับผู้เริ่มต้น:</p>
<ol>
<li>Java</li>
<li>C++</li>
<li>C</li>
<li>C#</li>
</ol>
</body>
</html>
แนวทางปฏิบัติที่ดี (Best Practices)
- วาง
<meta charset="UTF-8">ให้อยู่ใกล้หัว<head>ที่สุด - เขียน description ให้กระชับ ประมาณ 150-160 ตัวอักษร สำหรับ SEO
- หลีกเลี่ยง keyword stuffing (ใส่คีย์เวิร์ดมากเกินไป)
- ใช้
http-equiv="refresh"อย่างระมัดระวัง อาจรบกวนประสบการณ์ผู้ใช้ - เพิ่ม Open Graph และ Twitter Card meta tags สำหรับการแชร์โซเชียลมีเดีย
