HTML <meta> name แอตทริบิวต

HTML <meta> แบบ

การกำหนดและการใช้งาน

name แอตทริบิวตที่กำหนดคือ

name แอตทริบิวตที่กำหนดคือ แอตทริบิวตที่กำหนดคือ content แอตทริบิวต

ชื่อของค่า name ผ่านการใช้ content แอตทริบิวตname แอตทริบิวตเพื่อแสดงชนิดของข้อมูลเมตา และ content แอตทริบิวตเพื่อให้ค่า

ตารางด้านล่างระบุชนิดของข้อมูลเมตาที่เปิดเผยแล้ว。

ประกาศ:ถ้ากำหนด แอตทริบิวต http-equivถ้ากำหนด name แอตทริบิวต

คำเตือน：HTML5 ได้นำเข้าวิธีหนึ่งที่ให้ผู้ออกแบบเว็บไซต์ควบคุม viewport (พื้นที่ที่ผู้ใช้สามารถเห็นของเว็บ) โดยใช้แอตทริบิวต <meta> (ดูตัวอย่างต่อไปนี้)。

ตัวอย่าง

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

<head>
  <meta name="description" content="免费的 Web 教程">
  <meta name="keywords" content="HTML,CSS,JavaScript">
  <meta name="author" content="YK Investment">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

ลองทดลองด้วยตัวเอง

การใช้งาน

<meta name="value">

ค่าของแอตทริบิวต

ค่า คำอธิบาย
application-name กำหนดชื่อ Web แอปพลิเคชัน ที่หน้าเว็บนี้แทนนี้。
author

กำหนดชื่อผู้เขียนเอกสาร ตัวอย่าง:

<meta name="author" content="YK Investment">
description

กำหนดคำอธิบายของหน้าเว็บ โดยเครื่องค้นหาข้อมูลสามารถเลือกคำอธิบายนี้เพื่อแสดงผลการค้นหา ตัวอย่าง:

<meta name="description" content="免费的 Web 教程">
generator

กำหนดซอฟต์แวร์หนึ่งในบรรดาซอฟต์แวร์ที่ใช้สร้างเอกสาร (ไม่ใช้สำหรับหน้าเว็บที่เขียนด้วยมือ) ตัวอย่าง:

<meta name="generator" content="FrontPage 4.0">
keywords

กำหนดรายชื่อคำถามที่เกี่ยวข้องกับหน้าเว็บ แบ่งด้วยคำ逗ร์ และบอกแก้วเรื่องที่เกี่ยวข้องกับหน้าเว็บของคุณแก่เครื่องค้นหาข้อมูล。

คำเตือน：ต้องการใช้คำที่ใช้เพื่อระบุความหมาย (เครื่องค้นหาวิชาะวิทยาวิเคราะห์ต้องการที่จะจำแนกหน้าเว็บ) ตัวอย่างเช่น:

<meta name="keywords" content="HTML, meta tag, tag reference">
viewport ควบคุม viewport (พื้นที่ที่ผู้ใช้สามารถเห็นของเว็บไซต์)

ชี้แจง

นอกจากหกประเภท metadata ที่กำหนดไว้ในตารางนี้แล้ว ยังสามารถใช้ metadata ขยายได้ด้วย บนหน้านี้คุณสามารถหาตารางขยายที่อัปเดตตั้งแต่เวลาเดิม:

http://wiki.whatwg.org/wiki/MetaExtensions

บางข้อเสนอนี้ถูกใช้บ่อยกว่าบางข้อ ในขณะที่บางข้อมีการใช้งานแค่เล็กน้อย และเกือบไม่มีคนใช้งาน โค้ดวาร์ด metadata โรบอตส์นั้นเป็นประเภทหนึ่ง นักเขียนเอกสาร HTML สามารถใช้มันเพื่อบอกให้เครื่องค้นหาวิชาะวิทยาวิเคราะห์ทางไปต่อของเอกสารนี้ ตัวอย่างเช่น:

<meta name="robots" content="noindex">

ประเภท metadata นี้มีสามค่าที่ส่วนใหญ่ของเบราซเซอร์รับรู้

  • noindex - หมายถึงไม่ต้องบันทึกหน้านี้ในรายชื่อ
  • noarchive - หมายถึงไม่ต้องทำแอーカย์หรือเก็บหน้านี้ในความจำ
  • nofollow - หมายถึงไม่ต้องเข้ารหัสลิงก์ของหน้านี้เพื่อค้นหาต่อไป

metadata ที่สามารถใช้งานได้มีไม่มากนัก นักพัฒนาควรอ่านบันทึกบนเว็บไซต์เพื่อดูว่ามีอะไรที่สามารถใช้ในโครงการของตนตัวเอง

คำเตือน

เพื่อบอกให้เครื่องค้นหาวิชาะวิทยาวิเคราะห์เนื้อหาและให้ระดับความสำคัญ ยุทธวิธีหลักในอดีตคือการใช้ metadata โค้ดวาร์ด keywords ในปัจจุบัน ความสำคัญของ metadata โค้ดวาร์ด keywords ได้ลดลงอย่างมาก เพราะมันสามารถถูกใช้เพื่อสร้างแบบล่วงล้ำที่มีเนื้อหาที่ไม่เกี่ยวข้องกับความเกี่ยวข้องของหน้าเว็บ นักสร้างเนื้อหาจะต้องการให้เนื้อหาดูดีกว่าในตาของเครื่องค้นหาวิชาะวิทยาวิเคราะห์ ทางเลือกที่ดีที่สุดคือการใช้คำแนะนำที่เครื่องค้นหาวิชาะวิทยาวิเคราะห์เสนอ ส่วนใหญ่ของเครื่องค้นหาวิชาะวิทยาวิเคราะห์มีคู่มือปรับปรุงเว็บไซต์หรือเว็บไซต์ทั้งหมด

谷歌：คู่มือนักเรียนรู้ SEO (SEO)

https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=zh-cn

百度：คู่มือปรับปรุง SEO ของเครื่องค้นหาบิดู

https://ziyuan.baidu.com/college/articleinfo?id=1346

ตั้งค่า viewport

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

คุณควรที่จะมี <meta> องค์ประกอบดังกล่าวในทุกหน้าเว็บไซต์ของคุณ：

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

มันให้เบราเซอร์ความรู้เกี่ยวกับวิธีการควบคุมขนาดและสัตยาะของหน้าเว็บ

width=device-width การตั้งค่าความกว้างของหน้าเว็บเพื่อตามความกว้างของหน้าจอของอุปกรณ์ (ต่างกันตามอุปกรณ์)

initial-scale=1.0 การตั้งค่าความยืดเยื้อของเบราเซอร์เมื่อโหลดเว็บไซต์ครั้งแรก

นี่คือตัวอย่างเว็บไซต์ที่ไม่มีตัวแทน meta วิสัยทัศน์ และเว็บไซต์เดียวกันที่มีตัวแทน meta วิสัยทัศน์：



ไม่มีการใช้ตัวแทน meta วิสัยทัศน์


ใช้ตัวแทน meta วิสัยทัศน์


คำเตือน：หากคุณใช้โทรศัพท์หรือแทบเล็กเพื่อดูเว็บไซต์นี้ คุณสามารถคลิกลิงก์สองลิงก์ด้านล่างเพื่อดูความแตกต่าง

คุณสามารถที่จะใช้ตำราทฤษฎีวิจัยวิเคราะห์เว็บไซต์ที่ตอบสนองได้ดี - วิสัยทัศน์เรียนรู้มากกว่าเกี่ยวกับวิสัยทัศน์

การสนับสนุนเบราเซอร์

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน

HTML <meta> แบบ