<meta>

 

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

  • 内容分类元数据内容,如果 itemprop 属性出现:流数据,表述内容
  • 允许的内容 无,这是一个 empty element
  • 标签省略标签起始必须被呈现而标签结尾可被省略
  • 允许的父元素<meta charset>, <meta http-equiv>:  <head> 元素.  如果 http-equiv 不是编码声明, 它也可以在<noscript>元素内部,它本身在 <head>元素内部。
    <meta name>: 接受元数据内容的任何元素。
    <meta itemprop>: 接受元数据内容或解析内容的任何元素。
  • DOM 接口 HTMLMetaElement

属性

此元素包括全局属性

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

charset

此特性声明当前文档所使用的字符编码,但该声明可以被任何一个元素的 lang 特性的值覆盖。此特性的值必须是一个符合由IANA所定义的字符编码首选MIME 名称(preferred MIME name )之一。尽管标准不要求必须使用某些特定的字符编码,但它还是给出了一些建议:

  • 鼓励使用 UTF-8;
  • 不应该使用不兼容ASCII的编码规范, (i.e. those that don't map the 8-bit code points 0x20 to 0x7E to the Unicode 0x0020 to 0x007E code points) 以避免不必要的安全风险:browsers not supporting them may interpret benign content as HTML Elements. This is the case of at least the following charsets: JIS_C6226-1983, JIS_X0212-1990, HZ-GB-2312, JOHAB, the ISO-2022 family, and the EBCDIC family.
  • 绝对不能使用CESU-8、UTF-7、BOCU-1以及SCSU这一类编码,由于这些编码而引起的跨站脚本攻击已经被记录在案。
  • 不应该使用 UTF-31,因为不是所有的 HTML5 编码算法都能将它与 UTF-16 区分开来。
注意事项:
  • The declared character set must match the one of the page. There is no valid reason to declare an inaccurate character set.
  • This <meta> element must be inside the <head> element and within the 512 first bytes of the page, as some browsers only look at these first bytes before choosing a character set for the page.
  • This <meta> element is only a part of the algorithm to determine the character set of a page that browsers apply. The HTTP Content-Type header and any BOM elements have precedence over this element.
  • It is good practice, and strongly recommended, to define the character set using this attribute. If no character set is defined for a page, several cross-scripting techniques may be able to harm the page user, such as the UTF-7 fallback cross-scripting technique. Always setting this meta will protect against these risks.
  • This <meta> element is a synonym for the pre-HTML5 <meta http-equiv="Content-Type" content="text/html; charset=IANAcharset"> where IANAcharset corresponds of the value of the equivalent charset attribute. This syntax is still allowed, although obsolete and no more recommended.
content
基于内容,这个属性为 http-equiv 或 name 属性提供了与其相关的值的定义.
http-equiv
这个枚举属性定义了能改变服务器和用户引擎行为的编译。这个编译值使用content 来定义,如下:
content-language
这个指令定义页面使用的默认语言.
使用方式: 不要使用这个指令,因为它已经过时了。使用 <html> 元素上全局的 lang 属性来替代它.
"content-security-policy"内容安全策略
它允许页面作者定义当前页的 内容策略. 内容策略主要指定允许的服务器源和脚本端点,这有助于防止跨站点脚本攻击.
content-type
This attribute defines the MIME type of the document, eventually followed by its character set. It follows the same syntax as the HTTP content-type entity-header field, but as it is inside an HTML Element, most values are not possible. Therefore the valid syntax for its content is the literal string 'text/html' eventually followed by a character set with the following syntax:'; charset=IANAcharset' where IANAcharset is the preferred MIME name for a character set as defined by the IANA.
Usage note:
  • Do not use this pragma as it is obsolete. Use the charset attribute on the <meta> element instead.
  • As the <meta> may not be used to change the type of a document in an XHTML document, or in an HTML5 document following the XHTML syntax, never set MIME type to an XHTML MIME type that way. It would be incorrect.
  • Only an HTML document can use the content-type, so most of it is redundant: that's why it has been obsoleted and replaced by the charset attribute.
default-style
This pragma specifies the preferred stylesheet to be used on the page. The content attribute must contain the title of a <link> element whose href attribute links to a CSS stylesheet, or the title of a <style> element which contains a CSS stylesheet.
refresh
This pragma specifies:
  • the number of seconds until the page should be reloaded, if the content attribute contains only a positive integer number;
  • the number of seconds until the page should be redirected to another, if the content attribute contains a positive integer number followed by the string ';url=' and a valid URL.
set-cookie
This pragma defines a cookie for the page. Its content must follows the syntax defines in the IETF HTTP Cookie Specification.
Note: Do not use this pragma as it is obsolete. Use the HTTP header set-cookie instead.
name
This attribute defines the name of a document-level metadata. It should not be set if one of the attributes itemprop, http-equiv or charset is also set.
This document-level metadata name is associated with a value, contained by the content attribute. The possible values for the name element are, with their associated value, stored via the content attribute:
  • application-name,定义正运行在该网页上的网络应用名称;
    Note:
    • 浏览器可能会通过使用该属性去区分应用。It is different from the <title> element, which usually consist of the application name but may also contain specific information like the document name or a status;
    • 简单的网页不应该去定义application-name meta标签。
  • author,就是这个文档的作者名称,可以用自由的格式去定义;
  • description, 包括一个关于页面内容的缩略而精准的描述。Several browsers, among them Firefox and Opera, use this meta as the default description of the page when bookmarked;
  • generator, containing, in a free format, the identifier to the software that generated the page;
  • keywords, containing, as strings separated by commas, relevant words associated with the content of the page;
  • referrer controlling the content of the HTTP Referer HTTP header attached to any request sent from this document:
    Values for the content of <meta name="referrer">
    no-referrer Do not send a HTTP Referer header.
    origin Send the origin of the document.
    no-referrer-when-downgrade Send the origin as referrer to a-priori as-much-secure destination (https->https), but doesn't send a referrer to a less secure destination (https->http). This is the default behavior.
    origin-when-crossorigin Send a full URL (stripped from parameters) when performing a same-origin request, but only send the origin of the document for other cases.
    unsafe-URL Send a full URL (stripped from parameters) when perfoming a same-origin request.
    Note: Dynamically inserting <meta name="referrer"> (by document.write or appendChild) create a non-determinism when it comes to sending referrers or not. Note also that when several conflicting policies are defined, the No-referrer policy is applied.

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, which is a synonym of robots, but is only followed by Slurp, the indexing crawler for Yahoo Search;

Finally a few names are in common use, though not in progress of being standardized:

  • viewport, which gives hints about the size of the initial size of the viewport. This pragma is used by 一些移动设备 only.
    Values for the content of <meta name="viewport">
    Value 可能值 描述
    width 一个正整数或者字符串 device-width defines the width, in pixels, of the viewport
    height 一个正整数或者字符串 device-height defines the height, in pixels, of the viewport
    initial-scale 一个0.0 到10.0之间的正数 defines the ratio between the device width (device-width in portrait mode or device-height in landscape mode) and the viewport size.
    maximum-scale 一个0.0 到10.0之间的正数 defines the maximum value of the zoom; it must be greater or equal to the minimum-scale or the behavior is indeterminate.
    minimum-scale 一个0.0 到10.0之间的正数 defines the minimum value of the zoom; it must be smaller or equal to the maximum-scale or the behavior is indeterminate.
    user-scalable 一个布尔值(yes 或者no) If set to no, the user is not able to zoom in the webpage. Default value is yes.
    Specification Status Comment
    CSS Device Adaptation
    <meta name="viewport">
    Working Draft Non-normatively describes the Viewport META element
    See also: @viewport
    Notes:
    • Though not standardized, this attribute is used by different mobile browsers like Safari Mobile, Firefox for Mobile or Opera Mobile.
    • The default values may change from one device, and browser, to another.
    • To learn about this pragma in Firefox for Mobile, see this article.
scheme
This attribute defines the scheme in which the metadata is described. A scheme is a context leading to the correct interpretations of the content value, like a format.
Notes: Do not use this attribute as it is obsolete. There is no replacement for it as there was no real usage for it. Omit it altogether.

示例

<!-- Defining the charset in HTML4 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- In HTML5 -->
<meta charset="utf-8">
<!-- Redirect page after 3 seconds -->
<meta http-equiv="refresh" content="3;url=http://www.mozilla.org/">

Specifications

Specification Status Comment
Referrer Policy
<meta name="referrer">
Editor's Draft Defines value and semantic of <meta name="referrer">.
HTML Living Standard
<meta>
Living Standard  
HTML5
<meta>
Recommendation  
HTML 4.01 Specification
<meta>
Recommendation  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
name="referrer" 17 36.0 (36.0) ? ? ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) 1.0 (1.0) (Yes) (Yes) (Yes)
name="referrer" ? 36.0 (36.0) ? ? ?

See also

文档标签和贡献者