home

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

แท็ก Meta ต่างๆ สำหรับกำหนดข้อมูลเมตา (Metadata) ใน HTML

แท็ก <meta> ใช้กำหนด metadata (ข้อมูลเกี่ยวกับข้อมูล) ของหน้าเว็บ วางใน <head> ไม่มีเนื้อหาแสดงผล แต่งใจต่อ SEO, Social sharing, Mobile viewport

Meta Tags ที่สำคัญ

1. Character Encoding (จำเป็น)

<meta charset="UTF-8">

2. Viewport (Responsive - จำเป็น)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

3. Description (SEO - สำคัญมาก)

<meta name="description" content="คำอธิบายหน้าเว็บ 150-160 ตัวอักษร จะแสดงในผลการค้นหา">

4. Keywords (SEO - ไม่ค่อยสำคัญแล้ว)

<meta name="keywords" content="HTML, CSS, JavaScript, Tutorial">

5. Author

<meta name="author" content="Author Name">

6. Robots (ควบคุม Crawler)

<meta name="robots" content="index, follow">
<!-- index=จัดดัชนี, noindex=ไม่จัดดัชนี, follow=ติดตามลิงก์, nofollow=ไม่ติดตาม -->

7. Open Graph (Social Sharing - Facebook, LinkedIn, LINE)

<meta property="og:title" content="Page Title">
<meta property="og:description" content="Description for social">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">

8. Twitter Cards

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Title">
<meta name="twitter:description" content="Description">
<meta name="twitter:image" content="https://example.com/image.jpg">

ตัวอย่างครบชุด

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Learn HTML from beginner to advanced with examples.">
  <meta name="keywords" content="HTML, CSS, JavaScript, Tutorial">
  <meta name="author" content="John Doe">
  <meta name="robots" content="index, follow">
  <meta property="og:title" content="HTML Tutorial">
  <meta property="og:description" content="Learn HTML step by step">
  <meta property="og:image" content="https://example.com/og-image.jpg">
  <title>HTML Tutorial</title>
</head>
<body>...</body>
</html>

เครื่องมือทดสอบ