พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน meta Tag

Meta tags ใน HTML5 ใช้สำหรับการให้ข้อมูลเพิ่มเติมเกี่ยวกับเว็บเพจ โดยเฉพาะสำหรับเครื่องมือค้นหา (SEO) และเบราว์เซอร์ต่าง ๆ เพื่อกำหนดค่าที่เกี่ยวข้องกับการทำงานและลักษณะการแสดงผลของเว็บไซต์ Meta tags มักอยู่ใน <head> ของเอกสาร HTML และมีหลายประเภทที่สามารถนำไปประยุกต์ใช้ได้

รูปแบบและการใช้งาน Meta Tag ใน HTML5

1. Charset Declaration (กำหนดชุดตัวอักษร)

HTML
<meta charset="UTF-8">
  • ระบุการเข้ารหัสตัวอักษรของเอกสาร HTML โดยทั่วไปใช้ UTF-8 เนื่องจากครอบคลุมอักขระที่หลากหลาย
  • ช่วยให้เบราว์เซอร์สามารถแสดงผลตัวอักษรได้ถูกต้อง

2. Viewport Settings (การตั้งค่า viewport)

HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • ใช้กำหนดการแสดงผลของเว็บไซต์บนอุปกรณ์ต่าง ๆ โดยเฉพาะบนอุปกรณ์มือถือ
  • width=device-width บอกให้หน้าจอขยายตามขนาดของอุปกรณ์ที่ใช้
  • initial-scale=1.0 กำหนดการขยายของหน้าเว็บเป็น 100%

3. Description (คำอธิบายเว็บเพจ)

HTML
<meta name="description" content="This is a sample description of the webpage.">
  • ให้ข้อมูลเกี่ยวกับเนื้อหาของเว็บเพจ ซึ่งเครื่องมือค้นหามักใช้ในการแสดงผลคำอธิบายในหน้าผลการค้นหา
  • มีผลต่อ SEO และการดึงดูดให้ผู้ใช้คลิกเข้ามาดูเว็บไซต์

4. Keywords (คำค้นหา)

HTML
<meta name="keywords" content="HTML, CSS, JavaScript, tutorial">
  • ระบุคำสำคัญที่เกี่ยวข้องกับเนื้อหาของหน้าเว็บ
  • แม้ว่าเครื่องมือค้นหาในปัจจุบันอาจไม่ได้ใช้งานมาก แต่ยังสามารถใช้เพื่อบ่งบอกถึงหัวข้อของเว็บไซต์

5. Author (ชื่อผู้เขียน)

HTML
<meta name="author" content="John Doe">
  • ระบุชื่อผู้เขียนหรือผู้จัดทำเว็บไซต์

6. Robots (การกำหนดพฤติกรรมของ robot ของเครื่องมือค้นหา)

HTML
<meta name="robots" content="index, follow">
  • ใช้กำหนดว่าหน้านั้น ๆ ควรจะให้เครื่องมือค้นหา index (จัดเก็บ) หรือ follow (ติดตามลิงก์) หรือไม่
  • ตัวอย่างค่า
    • index ให้เครื่องมือค้นหาเก็บข้อมูลหน้า
    • noindex ไม่ให้เครื่องมือค้นหาเก็บข้อมูลหน้า
    • follow ให้ติดตามลิงก์ในหน้านี้
    • nofollow ไม่ให้ติดตามลิงก์ในหน้านี้

7. Refresh (รีเฟรชหน้าอัตโนมัติ)

HTML
<meta http-equiv="refresh" content="30">
  • รีเฟรชหน้าอัตโนมัติทุก 30 วินาที

8. Redirect (เปลี่ยนเส้นทางหน้าเว็บ)

HTML
<meta http-equiv="refresh" content="5; url=https://example.com">
  • เปลี่ยนเส้นทางไปยัง URL ใหม่หลังจาก 5 วินาที

9. Content-Type (ประเภทของเอกสาร)

HTML
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  • ระบุชนิดของเอกสาร HTML และการเข้ารหัสตัวอักษร

10. X-UA-Compatible (ความเข้ากันได้ของเบราว์เซอร์)

HTML
<meta http-equiv="X-UA-Compatible" content="IE=edge">
  • ใช้เพื่อบังคับให้ Internet Explorer แสดงผลในโหมดล่าสุดเพื่อความเข้ากันได้

11. Open Graph (สำหรับการแสดงผลบนโซเชียลมีเดีย)

HTML
<meta property="og:title" content="This is the title">
<meta property="og:description" content="This is the description">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/">
  • ใช้สำหรับการปรับแต่งการแสดงผลของเว็บไซต์เมื่อแชร์บนโซเชียลมีเดีย เช่น Facebook, Twitter

ตัวอย่างการใช้งาน Meta Tag รวมในหน้า HTML

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="This is a demo webpage for learning meta tags.">
    <meta name="keywords" content="HTML5, meta tag, tutorial, example">
    <meta name="author" content="John Doe">
    <meta name="robots" content="index, follow">
    <meta property="og:title" content="Learning Meta Tags">
    <meta property="og:description" content="This is a demo webpage for learning meta tags.">
    <meta property="og:image" content="https://example.com/meta-image.jpg">
    <meta property="og:url" content="https://example.com/">
    <title>Learning Meta Tags</title>
</head>
<body>
    <h1>Understanding Meta Tags in HTML5</h1>
    <p>This page demonstrates various meta tags and their usage in HTML5.</p>
</body>
</html>

Meta tag เป็นเครื่องมือที่มีความสำคัญสำหรับการปรับปรุงการใช้งานเว็บไซต์ ไม่ว่าจะเป็นการเพิ่มประสิทธิภาพในการค้นหา การควบคุมการแสดงผล หรือการทำให้เว็บไซต์สามารถแสดงผลได้ดีในทุกอุปกรณ์

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ