home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

แอตทริบิวต์ content ของ <meta>: กำหนดค่า Meta Information

แอตทริบิวต์ content ของ <meta> คืออะไร?

แอตทริบิวต์ content ของแท็ก <meta> ใช้สำหรับ กำหนดค่า (Value) ของข้อมูลเมตา (Meta Information)** ร่วมกับแอตทริบิวต์ name หรือ http-equiv

ไวยากรณ์ (Syntax)

<meta name="name_value" content="meta_content">
<meta http-equiv="http_equiv_value" content="meta_content">

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<head>
  <meta name="description" content="เรียนรู้โปรแกรมมิ่งฟรี ไม่มีค่าใช้จ่าย">
  <meta name="keywords" content="HTML, CSS, JavaScript, Python, Java, Programming">
  <meta name="author" content="Developer Team">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="refresh" content="30"> <!-- รีเฟรชทุก 30 วินาที -->
</head>
<body>
  <h2>บทเรียนโปรแกรมมิ่ง</h2>
  <p>บทเรียนฟรี:</p>
  <ol>
    <li>Java</li>
    <li>C++</li>
    <li>C</li>
    <li>C#</li>
  </ol>
</body>
</html>

Meta Tags ที่พบบ่อยและ content

name / http-equivcontent (ตัวอย่าง)วัตถุประสงค์
name="description""คำอธิบายหน้าเว็บ สั้นๆ"SEO: แสดงในผลค้นหา
name="keywords""keyword1, keyword2, keyword3"SEO: คำสำคัญ (ปัจจุบันสำคัญน้อยลง)
name="viewport""width=device-width, initial-scale=1.0"Responsive: ควบคุม Zoom/Scale บนมือถือ
name="robots""index, follow" / "noindex, nofollow"ควบคุม Crawler
name="author""ชื่อผู้เขียน"ข้อมูลผู้เขียน
http-equiv="refresh""30; url=https://example.com/"Redirect/Relaod หลัง 30 วินาที
http-equiv="Content-Security-Policy""default-src 'self'"Security: CSP Header
http-equiv="X-UA-Compatible""IE=edge"บังคับ IE ใช้ Engine ล่าสุด

จุดสำคัญ

  • <meta> ต้องอยู่ใน <head> เท่านั้น
  • content เป็นข้อความ (String) เสมอ
  • viewport สำคัญมากสำหรับ Mobile Responsive
  • http-equiv จำลอง HTTP Response Header
  • Open Graph (og:title, og:description) และ Twitter Cards ใช้ property แทน name