แอตทริบิวต์ content ใช้ร่วมกับแท็ก <meta> เพื่อระบุค่าที่เชื่อมโยงกับ http-equiv หรือ name เป็นข้อมูลเมตา (Metadata) ของหน้าเว็บ
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="เนื้อหาการเรียนรู้และวิดีโอ">
<meta name="keywords" content="HTML, CSS, JavaScript, Tutorial">
<meta name="author" content="Tutorialspoint">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="refresh" content="30"> <!-- รีโหลดทุก 30 วินาที -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<p>นี่คือข้อความตัวอย่าง</p>
</body>
</html>คู่ name/http-equiv และ content ที่พบบ่อย
| name / http-equiv | content (ตัวอย่าง) | วัตถุประสงค์ |
|---|---|---|
| name="description" | "คำอธิบายหน้าเว็บ" | SEO: Meta Description |
| name="keywords" | "คีย์เวิร์ด1, คีย์เวิร์ด2" | SEO: Meta Keywords (Google ไม่ใช้แล้ว) |
| name="viewport" | "width=device-width, initial-scale=1" | Responsive Design (Mobile) |
| name="robots" | "index, follow" / "noindex, nofollow" | ควบคุม Crawler |
| http-equiv="Content-Type" | "text/html; charset=UTF-8" | ระบุ Charset (เก่า ใช้ <meta charset> แทน) |
| http-equiv="refresh" | "5;url=https://example.com" | Redirect/Relaod หลัง 5 วินาที |
| http-equiv="X-UA-Compatible" | "IE=edge" | บังคับ IE ใช้ Engine ล่าสุด |
| http-equiv="Content-Security-Policy" | "default-src 'self'" | CSP Header (Security) |
แท็ก meta ที่แนะนำขั้นต่ำ (Minimum)
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="คำอธิบายหน้าเว็บ 150-160 ตัวอักษร">
<title>ชื่อหน้าเว็บ</title>
</head>