HTML <meta> 元素 - 文档级别的元数据元素

HTML <meta> 元素表示不能由其他 HTML 元相关元素（<base>，<link>，<script>，<style> 或 <title>）表示的元数据。

描述 HTML 文档的元数据：

<head>
  <meta name="description" content="免费在线教程">
  <meta name="keywords" content="HTML,CSS,XML,JavaScript">
  <meta name="author" content="mifengjc">
  <meta charset="UTF-8">
</head>

尝试一下 »

特性

内容类别 元数据内容。如果有 itemprop 属性：流式内容，短语内容。
允许的内容 无，它是一个空元素。
标签省略 由于它是空白元素，所以必须有开始标签，并且不能有结束标签。
允许的父元素 <meta charset>，<meta http-equiv>：<head> 元素。如果 http-equiv 不是编码声明，它也可以在 <noscript> 元素中，<noscript> 在 <head> 元素中。
允许的 ARIA 角色 无
DOM 接口 HTMLMetaElement

属性

该元素包含了全局属性。

注意： 全局属性 name 对 <meta> 元素具有特定语义，另外，itemprop 属性不能设置在任何已有 name，http-equiv 或 charset 属性的 <meta> 元素中。

charset

这个属性声明了页面的字符编码。它必须包含字符编码的标准 IANA MIME 名称。尽管标准没有要求特定的编码，但它给出了一些建议：

  • 鼓励作者使用 UTF-8。
  • 作者不应该使用与 ASCII 不兼容的编码，以避免安全风险：不支持它们的浏览器可能会将有害内容解释为 HTML。这发生在 JIS_C6226-1983，JIS_X0212-1990，HZ-GB-2312，JOHAB，ISO-2022 系列和 EBCDIC 系列上。

注意： ASCII 不兼容的编码是指那些不将 8 位代码点从 0x20 到 0x7E 映射到从 0x0020 到 0x007E Unicode 代码点的映射

  • 作者不得使用 CESU-8，UTF-7，BOCU-1 和/或 SCSU 作为跨站点脚本，这些编码已被证明可以用来攻击。
  • 作者不应该使用 UTF-32，因为不是所有的 HTML5 编码算法都可以将其与 UTF-16 区分开来。

注意：

  • 声明的字符编码必须与页面保存的字符编码相匹配，以避免出现乱码和安全漏洞。
  • 声明编码的 <meta> 元素必须位于 <head> 元素中，并且在 HTML 的前 1024 个字节内，因为某些浏览器仅在这些字节来确定编码。
  • <meta> 元素只是确定页面字符集的算法的一部分。Content-Type 头和任何字节顺序标记会比这个元素优先级更高。
  • 强烈建议您指定字符编码。如果页面的编码未定义，则可能被跨脚本技术，例如 UTF-7 后备跨脚本技术来更改网页内容。
  • <meta> 元素的 charset 属性和以下 HTML5 内容 <meta http-equiv="Content-Type" content="text/html; charset=*IANAcharset*"> 等效，其中 *IANAcharset* 包含了和 charset 属性一样的值。后者的语法仍然是允许的，虽然不再推荐。

content

该属性包含 http-equiv 或 name 属性的值，具体内容取决于使用哪个属性。

http-equiv

该属性可以包含 HTTP 头的名称，因该属性名称为 http-equiv(alent)。它定义了一条可以改变服务器和用户代理行为的指令。指令的值在 content 属性中定义，可以是以下值之一：

content-language

定义页面的默认语言。它可以被任何元素上的lang属性覆盖。

警告： 请勿使用该值，因为它已过时。首选是 <html> 元素上的 lang 属性。

content-security-policy

允许页面作者为当前页面定义内容策略。内容策略通常指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击。

content-type

定义文档的MIME 类型，后跟其字符编码。它遵循与 HTTP content-type 实体 - 标题字段相同的语法，但由于它位于 HTML 页面内，除了 text/html 以外，大多数值都是不可能的。因此，其 content 的有效语法是字符串 text/html，后面跟着一个字符集，其语法如下：; charset=*IANAcharset*'，其中 *IANAcharset* 是字符集的首选 MIME 名称，由 IANA 定义。

警告： 请勿使用该值，因为它已过时。请用 <meta> 元素的 charset 属性。

注意： <meta> 不能在 XHTML 或 HTML5 的 XHTML 序列化中更改文档的类型，也不要将 MIME 类型设置为带有 <meta> 的 XHTML MIME 类型。

refresh

该值指定了：

  • 如果 content 属性只包含一个正整数，则是重新载入页面的时间间隔（秒）；
  • 如果 content 属性 包含一个正整数并且跟着一个字符串 ;url=，以及一个有效的 URL，则是重定向到该链接的时间间隔（秒）。

为页面定义 cookie。其内容必须遵循IETF HTTP Cookie 规范中定义的语法。

警告： 请勿使用该指令，因为它已过时。改为使用 HTTP 头 Set-Cookie。

name

该属性定义了一段文档级元数据的名称。如果该元素已经有 itemprop，http-equiv 或 charset 其中的一个属性，则不应该设置该属性。

该元数据名称与 content 属性中包含的值关联。 name 属性的可能值是：

application-name

定义了在网页中运行的应用程序的名称。

注意：

  • 浏览器可以使用它来识别应用程序。它与 <title> 元素不同，后者通常包含应用程序名称，但也可能包含文档名称或状态等信息。
  • 简单的网页不应定义应用程序名称。

author

定义了文档作者的名称。

description

包含页面内容的简短和精确的摘要。一些浏览器，如 Firefox 和 Opera，将其用作书签页面的默认描述。

generator

包含了生成该页面的软件标识。

keywords

逗号分隔列表，包含了页面内容相关的单词。

referrer

控制附加在从文档发送的请求上的Referer HTTP 头：

<meta name="referrer"> 中 content 属性的值
no-referrer 不发送 HTTP Referer 头。
origin 发送文档的 origin。
no-referrer-when-downgrade 当目的页面是安全的（HTTPS->HTTPS），则发送 origin 作为 referrer，当目的链接安全性比当前低时（HTTPS->HTTP），不发送 referrer。这是默认行为。
origin-when-crossorigin 在同源请求下，发送完整的 URL（不含查询参数），其他情况下则仅发送当前文档的 origin 。
same-origin 在同源的请求下，将发送 referrer，但跨域请求将不包含 referrer 信息。
strict-origin 当目的页面是安全的（HTTPS->HTTPS）才发送文档的 origin 作为 referrer，如果是相比不安全则不发送（HTTPS->HTTP）。
strict-origin-when-cross-origin 同源的请求下发送完整的 URL，当目的页面是安全的（HTTPS->HTTPS）才发送文档的 origin，如果目的页面相比不安全（HTTPS->HTTP）则不发送任何头。
unsafe-URL 在同源和跨域的请求中，都发送完整的 URL（不含查询参数）。

注意：

  • 有些浏览器还支持废弃的 always，default 和 never referrer 的值。
  • 动态插入 <meta name="referrer">（通过 document.write 或 appendChild）会使得 referrer 的行为不可预知。
  • 定义了多个冲突的策略时，将使用 no-referrer 策略。

该属性也可能取 WHATWG Wiki MetaExtensions 页面 上定义的扩展列表的值。尽管尚未正式接受，但一些常用的名称是：

creator

定义文档的创建者的名称，例如组织或机构。如果有多个，应使用多个 <meta> 元素。

googlebot

robots 的同义词，后面跟着 Googlebot（Google 的索引抓取工具）。

publisher

定义了文档发布者的名称。

robots

定义遵循规则的抓取工具或 “机器人” 应该在页面中使用的行为。它是以下值的逗号分隔列表：

<meta name="robots"> 中 content 属性的值
值 描述 使用对象
index 允许机器人索引页面（默认）。 所有
noindex 要求机器人不索引页面。 所有
follow 允许机器人跟踪页面上的链接（默认）。 所有
nofollow 要求机器人不能跟踪页面上的链接。 所有
none 相当于 noindex, nofollow Google
noodp 阻止将开放目录项目的描述（如果有）用作搜索引擎结果中的页面描述。 Google，Yahoo，Bing
noarchive 要求搜索引擎不能缓存页面内容。 Google，Yahoo，Bing
nosnippet 阻止在搜索引擎结果中显示页面的任何描述。 Google，Bing
noimageindex 要求该页面不会显示为索引图像的引用页面。 Google
nocache noarchive 的同义词。 Bing

注意：

  • 只有一些机器人才遵守这些规则。不要期望能够对电子邮件收割机有效。
  • 机器人仍然需要访问该页面才能阅读这些规则。为了防止带宽消耗，请使用 robots.txt 文件。
  • 如果你想删除一个页面，设置 noindex 将会起作用，但是要在机器人再次访问页面之后才能识别到。同时，确保 robots.txt 文件不妨碍重访。
  • 有些值是互斥的，比如 index 和 noindex，或者 follow 和 nofollow。在这些情况下，机器人的行为是不确定的，它们之间可能有所不同。
  • Google，Yahoo 和 Bing 等一些爬虫机器人支持 HTTP 头 X-Robot-Tags 的相同值；这允许诸如图像的非 HTML 文档使用这些规则。

slurp

robots 的同义词，但仅用于 Slurp - 雅虎搜索的抓取工具

viewport

给出了 viewport 的初始大小的提示。仅供移动设备使用。

<meta name="viewport"> 中 content 属性的值
值 可能的子值 描述
width 一个正整数，或 device-width 文本 定义您希望网站呈现的视口的像素宽度。
height 一个正整数，或 device-height 文本 定义视口的高度。任何浏览器都没有用到。
initial-scale 一个 0.0 到 10.0 之间的数字 定义设备宽度（纵向模式下的 device-width 或横向模式下的 device-height）与视口大小之间的比率。
maximum-scale 一个 0.0 到 10.0 之间的数字 定义要放大的最大量。它必须大于或等于 minimum-scale，否则行为未知。浏览器设置可以忽略这个规则，iOS10+ 默认忽略它。
minimum-scale 一个 0.0 到 10.0 之间的数字 定义最小缩放级别。它必须小于或等于 maximum-scale， 否则行为未知。浏览器设置可以忽略这个规则，iOS10+ 默认忽略它。
user-scalable yes 或 no 如果设置为 yes，则用户无法放大网页。默认是 no 。浏览器设置可以忽略这个规则，iOS10+ 默认忽略它。
规范 状态 备注
CSS Device Adaptation
<meta name="viewport"> 的定义		 工作草案 非规范地描述了视口 META 元素

注意：

  • 虽然没有标准化，但有着事实上的支配地位，大多数移动浏览器都会遵守这一声明。
  • 设备和浏览器的默认值可能不同。

scheme

已过时 HTML5

该属性定义了描述元数据的方案。方案是一种导致正确解释 content 值的上下文，就像格式一样。

警告： 不要使用这个值，因为它已经过时了。没有替代品，因为它没有真正的用法。

注意

根据所设置的属性，元数据的种类可以是以下之一：

  • 如果设置了 name，它是文档级别的元数据，应用到整个页面。
  • 如果设置了 http-equiv，它表示杂注指令 — 通常由网络服务器提供有关如何处理网页的信息。
  • 如果设置了 charset，它是一个字符声明 — 网页使用的字符编码。
  • 如果设置了 itemprop，用户定义的元数据 — 因为元数据的语义是用户指定的，所以对用户代理透明。

更多实例

3秒后跳转页面

<meta charset="utf-8">
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">

定义文档关键词，用于搜索引擎

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

定义 web 页面描述

<meta name="description" content="Free Web tutorials on HTML and CSS">

定义页面作者

<meta name="author" content="Hege Refsnes">

每30秒刷新页面

<meta http-equiv="refresh" content="30">

规范

规范 状态 备注
Referrer Policy
<meta name="referrer"> 的定义		 编者的草案 定义了 <meta name="referrer"> 的值和语义。
HTML Living Standard
<meta> 的定义		 现行的标准 增加了 itemprop 属性
HTML5
<meta> 的定义		 推荐 增加了 charset 属性
HTML 4.01 Specification
<meta> 的定义		 推荐 -

桌面浏览器兼容性

特性 Chrome Edge Firefox Internet Explorer Opera Safari
基础支持 支持 支持 1.0 支持 支持 支持
charset 支持 支持 1.0 支持 支持 支持
content 支持 支持 1.0 支持 支持 支持
http-equiv 支持 支持 1.0 支持 支持 支持
name 支持 支持 1.0 支持 支持 支持

移动浏览器兼容性

特性 Android Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
基础支持 支持 支持 支持 1.0 支持 支持 支持
charset 支持 支持 支持 1.0 支持 支持 支持
content 支持 支持 支持 1.0 支持 支持 支持
http-equiv 支持 支持 支持 1.0 支持 支持 支持
name 支持 支持 支持 1.0 支持 支持 支持

相关链接