<meta>

HTML <meta> 元素表示那些不能由其它HTML元相关元素 (<base>, <link>, <script>, <style><title>) 之一表示的任何元数据信息。

meta 元素定义的元数据的类型包括以下几种:

  • 如果设置了 name 属性,meta 元素提供的是文档级别(document-level)的元数据,应用于整个页面。
  • 如果设置了 http-equiv 属性,meta 元素则是编译指令,提供的信息与类似命名的HTTP头部相同。
  • 如果设置了 charset 属性,meta 元素是一个字符集声明,告诉文档使用哪种字符编码。
  • 如果设置了 itemprop 属性,meta 元素提供用户定义的元数据。

属性

此元素包括全局属性

注意: 全局属性 name<meta> 元素中具有特殊的语义;另外, 在同一个 <meta> 标签中,name, http-equiv 或者 charset 三者中任何一个属性存在时,itemprop 属性不能被使用。

charset

这个属性声明了文档的字符编码。如果使用了这个属性,其值必须是与ASCII大小写无关(ASCII case-insensitive)的"utf-8"。

content
此属性包含http-equiv 或name 属性的值,具体取决于所使用的值。
http-equiv
属性定义了一个编译指示指令。这个属性叫做 http-equiv(alent) 是因为所有允许的值都是特定HTTP头部的名称,如下:
  • content-security-policy
    它允许页面作者定义当前页的 内容策略。 内容策略主要指定允许的服务器源和脚本端点,这有助于防止跨站点脚本攻击。
  • content-type
    如果使用这个属性,其值必须是"text/html; charset=utf-8"。注意:该属性只能用于MIME type为 text/html 的文档,不能用于MIME类型为XML的文档。
  • default-style

    设置默认CSS样式表组的名称。

  • x-ua-compatible

    If specified, the content attribute must have the value "IE=edge". User agents are required to ignore this pragma.

  • refresh
    这个属性指定:
    • 如果 content 只包含一个正整数,则是重新载入页面的时间间隔(秒);
    • 如果 content 包含一个正整数并且跟着一个字符串 ';url=' 和一个合法的 URL,则是重定向到指定链接的时间间隔(秒)
可及性的考虑

设置了 refresh 值的页面可能有时间间隔太短的风险。使用诸如屏幕朗读这样的辅助技术来浏览网页的人可能会由于自动跳转而来不及读完或理解网页的内容。这样不经提示而突然进行的页面刷新也可能会让有视力障碍的人群感到迷惑。

name
name 和 content 属性可以一起使用,以名-值对的方式给文档提供元数据,其中 name 作为元数据的名称,content 作为元数据的值。
在 standard metadata names 中查看在HTML规范中定义的标准元数据名称的更多细节。

此元数据名称与content 属性包含的值相关联。name属性的可能值为:
  • application-name,定义正运行在该网页上的网络应用名称;
    说明::
    • 浏览器可能会通过使用该属性去区分应用。它与<title>元素不同,后者通常由应用程序名称组成,但也可能包含特定信息,如文档名称或状态;
    • 简单的网页不应该去定义application-name meta标签。
  • author,就是这个文档的作者名称,可以用自由的格式去定义;
  • description,其中包含页面内容的简短和精确的描述。 一些浏览器,如Firefox和Opera,将其用作书签页面的默认描述。
  • generator, 包含生成页面的软件的标识符。
  • keywords, 包含与逗号分隔的页面内容相关的单词。
  • referrer 控制所有从该文档发出的 HTTP 请求中HTTP Referer 首部的内容:
    <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
    unsafe-URL 在同源请求下,发送完整的URL (不含查询参数)。
    注意:动态地插入<meta name="referrer"> (通过 document.write 或者 appendChild) 是不起作用的。同样注意如果同时有多个彼此冲突的策略被定义,那么 no-referrer 策略会生效。

The attribute may also have a value taken from the extended list defined on WHATWG Wiki MetaExtensions page. Although none has been formally accepted yet, a few commonly used names are among the proposals:

  • creator, defining, in a free format, the name of the creator of the document. Note that it can be the name of the institution. If there are more than one, several <meta> elements should be used;
  • googlebot, which is a synonym of robots, but is only followed by Googlebot, the indexing crawler for Google;
  • publisher, defining, in a free format, the name of the publisher of the document. Note that it can be the name of the institution;
  • robots, defining the behavior that cooperative crawlers should have with the page. It is a comma-separated list of values taken in the following list:
    Values for the content of <meta name="robots">
    Value Description Used by
    index Allows the robot to index the page All
    noindex Prevents the robot from indexing the page All
    follow Allows the robot to follow the links on the page All
    nofollow Prevents the robot from following the links on the page All
    noodp Prevents the usage of the Open Directory Project description, if any, as the description of the page in the search engine results page

    Google, Yahoo, Bing

    noarchive Prevents the search engine from caching the content of the page Google, Yahoo
    nosnippet Prevents the display of any description of the page in the search engine results page Google
    noimageindex Prevents this page from appearing as the referring page of an indexed image Google
    noydir Prevents the usage of the Yahoo Directory description, if any, as the description of the page in the search engine results page Yahoo
    nocache Synonym of noarchive Bing
    Notes:
    • Only cooperative robots will follow the rules defined by the robots name. Do not expect to keep e-mail harvesters at bay with this.
    • The robot still needs to access the page in order to read the meta value. If you want to keep them at bay, for example to prevent bandwidth consumption, use a robots.txt file instead (or in complement).
    • If you want to remove the page of an index, changing the meta to noindex will work, but only when the robot visit the page again. Be sure not to prevent such visits, via the robots.txt file for example. Some search engines have developers tools, allowing a quick removal of some page.
    • Some possible values are mutually exclusive, like using index and noindex, or follow and nofollow, at the same time. In these cases the behavior of the robot is undefined, and may vary from one to the other. So avoid these cases.
    • Some search engine crawler robots, like those of Google, Yahoo Search or Bing, support the same values on an HTTP directive, X-Robot-Tags: this allows them to use these pragma on non-HTML documents, like images.
  • slurp, 与robots一样, 但其仅使用于 Slurp -- Yahoo Search的抓取工具。
  • viewport, 它提供有关视口初始大小的提示,仅供移动设备使用。
    • 值的内容为: <meta name="viewport">
      Value 可能值 描述
      width 一个正整数或者字符串 device-width 以pixels(像素)为单位, 定义viewport(视口)的宽度。
      height 一个正整数或者字符串 device-height 以pixels(像素)为单位, 定义viewport(视口)的高度。
      initial-scale 一个0.0 到10.0之间的正数 定义设备宽度(纵向模式下的设备宽度或横向模式下的设备高度)与视口大小之间的缩放比率。
      maximum-scale 一个0.0 到10.0之间的正数 定义缩放的最大值;它必须大于或等于minimum-scale的值,不然会导致不确定的行为发生。
      minimum-scale 一个0.0 到10.0之间的正数 定义缩放的最小值;它必须小于或等于maximum-scale的值,不然会导致不确定的行为发生。
      user-scalable 一个布尔值(yes 或者no 如果设置为 no,用户将不能放大或缩小网页。默认值为 yes
      规范 Status Comment
      CSS Device Adaptation
      <meta name="viewport">
      Working Draft 非规范地描述了Viewport META元素
      See also: @viewport
      Notes:
      • 虽然标准化程度不高,但由于事实上的支配地位,大多数移动浏览器都尊重这一声明。
      • 不同设备和浏览器之间的默认值可能不同。
      • 要在Firefox for Mobile中了解此声明,请参阅 this article

示例

<meta charset="utf-8">

<!-- Redirect page after 3 seconds -->
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">

规范

规范 状态 注释
HTML Living Standard
<meta>
Living Standard

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
metaChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
charsetChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
contentChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
http-equivChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
nameChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

另见