HTML - เมตาแท็ก

HTML ช่วยให้คุณระบุข้อมูลเมตา - ข้อมูลสำคัญเพิ่มเติมเกี่ยวกับเอกสารได้หลายวิธี องค์ประกอบ META สามารถใช้เพื่อรวมคู่ชื่อ / ค่าที่อธิบายคุณสมบัติของเอกสาร HTML เช่นผู้แต่งวันหมดอายุรายการคำสำคัญผู้เขียนเอกสารเป็นต้น

<meta>แท็กใช้เพื่อให้ข้อมูลเพิ่มเติมดังกล่าว แท็กนี้เป็นองค์ประกอบว่างดังนั้นจึงไม่มีแท็กปิด แต่มีข้อมูลภายในแอตทริบิวต์

คุณสามารถรวมเมตาแท็กหนึ่งรายการขึ้นไปในเอกสารของคุณตามข้อมูลที่คุณต้องการเก็บไว้ในเอกสารของคุณ แต่โดยทั่วไปเมตาแท็กจะไม่ส่งผลกระทบต่อลักษณะทางกายภาพของเอกสารดังนั้นจากมุมมองที่ปรากฏจึงไม่สำคัญว่าคุณจะรวมไว้ด้วยหรือไม่ พวกเขาหรือไม่

การเพิ่มเมตาแท็กในเอกสารของคุณ

คุณสามารถเพิ่มข้อมูลเมตาลงในหน้าเว็บของคุณได้โดยวางแท็ก <meta> ไว้ในส่วนหัวของเอกสารซึ่งแสดงโดย <head> และ </head>แท็ก เมตาแท็กสามารถมีแอตทริบิวต์ต่อไปนี้นอกเหนือจากแอตทริบิวต์หลัก -

ซีเนียร์ No	คุณสมบัติและคำอธิบาย
1	Name ชื่อสำหรับคุณสมบัติ สามารถเป็นอะไรก็ได้. ตัวอย่าง ได้แก่ คีย์เวิร์ดคำอธิบายผู้แต่งแก้ไขตัวสร้างเป็นต้น
2	content ระบุค่าของคุณสมบัติ
3	scheme ระบุโครงร่างเพื่อตีความค่าของคุณสมบัติ (ตามที่ประกาศในแอ็ตทริบิวต์เนื้อหา)
4	http-equiv ใช้สำหรับส่วนหัวของข้อความตอบกลับ http ตัวอย่างเช่น http-equiv สามารถใช้เพื่อรีเฟรชหน้าหรือตั้งค่าคุกกี้ ค่า ได้แก่ ประเภทเนื้อหาหมดอายุรีเฟรชและคุกกี้ชุด

การระบุคำหลัก

คุณสามารถใช้แท็ก <meta> เพื่อระบุคำหลักที่สำคัญที่เกี่ยวข้องกับเอกสารและต่อมาคำหลักเหล่านี้จะถูกใช้โดยเครื่องมือค้นหาในขณะที่สร้างดัชนีหน้าเว็บของคุณเพื่อจุดประสงค์ในการค้นหา

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างที่เราเพิ่ม HTML, Meta Tags, Metadata เป็นคำหลักที่สำคัญเกี่ยวกับเอกสาร

<!DOCTYPE html>
<html>
   
   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
   </head>
   
   <body>
      <p>Hello HTML5!</p>
   </body>
   
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

คำอธิบายเอกสาร

คุณสามารถใช้แท็ก <meta> เพื่อให้คำอธิบายสั้น ๆ เกี่ยวกับเอกสาร เครื่องมือค้นหาต่างๆสามารถใช้อีกครั้งในขณะที่สร้างดัชนีหน้าเว็บของคุณเพื่อวัตถุประสงค์ในการค้นหา

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
   
</html>

วันที่แก้ไขเอกสาร

คุณสามารถใช้แท็ก <meta> เพื่อให้ข้อมูลเกี่ยวกับเวลาล่าสุดที่อัปเดตเอกสาร ข้อมูลนี้สามารถใช้โดยเว็บเบราว์เซอร์ต่างๆในขณะที่รีเฟรชหน้าเว็บของคุณ

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

กำลังรีเฟรชเอกสาร

คุณสามารถใช้แท็ก <meta> เพื่อระบุระยะเวลาที่หน้าเว็บของคุณจะรีเฟรชโดยอัตโนมัติหลังจากนั้น

ตัวอย่าง

หากคุณต้องการให้หน้าของคุณรีเฟรชทุกๆ 5 วินาทีให้ใช้ไวยากรณ์ต่อไปนี้

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
      <meta http-equiv = "refresh" content = "5" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

การเปลี่ยนเส้นทางหน้า

คุณสามารถใช้แท็ก <meta> เพื่อเปลี่ยนเส้นทางเพจของคุณไปยังหน้าเว็บอื่น ๆ คุณยังสามารถระบุระยะเวลาได้หากคุณต้องการเปลี่ยนเส้นทางเพจหลังจากผ่านไปไม่กี่วินาที

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างของการเปลี่ยนเส้นทางเพจปัจจุบันไปยังเพจอื่นหลังจากผ่านไป 5 วินาที หากคุณต้องการเปลี่ยนเส้นทางเพจทันทีอย่าระบุแอตทริบิวต์เนื้อหา

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
      <meta http-equiv = "refresh" content = "5; url = http://www.tutorialspoint.com" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

การตั้งค่าคุกกี้

คุกกี้คือข้อมูลที่เก็บไว้ในไฟล์ข้อความขนาดเล็กบนคอมพิวเตอร์ของคุณและจะแลกเปลี่ยนระหว่างเว็บเบราว์เซอร์และเว็บเซิร์ฟเวอร์เพื่อติดตามข้อมูลต่างๆตามความต้องการของเว็บแอปพลิเคชันของคุณ

คุณสามารถใช้แท็ก <meta> เพื่อจัดเก็บคุกกี้ในฝั่งไคลเอ็นต์และในภายหลังข้อมูลนี้สามารถใช้โดยเว็บเซิร์ฟเวอร์เพื่อติดตามผู้เยี่ยมชมไซต์

ตัวอย่าง

<!DOCTYPE html>
<html>
   <head>
      <title>Meta Tags Example</title>
      <meta http-equiv = "cookie" content = "userid = xyz; expires = Wednesday, 08-Aug-15 23:59:59 GMT;" />
         
   </head>
   <body>
      <p>Hello HTML5!</p>
   </body>
</html>

หากคุณไม่ระบุวันที่และเวลาหมดอายุคุกกี้จะถือเป็นคุกกี้เซสชันและจะถูกลบเมื่อผู้ใช้ออกจากเบราว์เซอร์

Note- คุณสามารถตรวจสอบPHP และบทช่วยสอนคุกกี้เพื่อดูรายละเอียดทั้งหมดเกี่ยวกับคุกกี้

การตั้งชื่อผู้แต่ง

คุณสามารถตั้งชื่อผู้แต่งในหน้าเว็บโดยใช้เมตาแท็ก ดูตัวอย่างด้านล่าง -

ตัวอย่าง

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "Mahnaz Mohtashim" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

ระบุชุดอักขระ

คุณสามารถใช้แท็ก <meta> เพื่อระบุชุดอักขระที่ใช้ภายในเว็บเพจ

ตัวอย่าง

โดยค่าเริ่มต้นเว็บเซิร์ฟเวอร์และเว็บเบราว์เซอร์ใช้การเข้ารหัส ISO-8859-1 (Latin1) เพื่อประมวลผลเว็บเพจ ต่อไปนี้เป็นตัวอย่างการตั้งค่าการเข้ารหัส UTF-8 -

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "Mahnaz Mohtashim" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

ในการแสดงหน้าเว็บแบบคงที่ด้วยตัวอักษรจีนแบบดั้งเดิมหน้าเว็บต้องมีแท็ก <meta> เพื่อตั้งค่าการเข้ารหัส Big5 -

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "Mahnaz Mohtashim" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = Big5" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>