Standard metadata names #
::: section-content
The
<meta> element can be used to provide document metadata
in terms of name-value pairs, with the
name attribute
giving the metadata name, and the
content attribute
giving the value.
:::
Standard metadata names defined in the HTML specification #
::: section-content The HTML specification defines the following set of standard metadata names:
application-name: the name of the application running in the web page.::: {#sect1 .notecard .note} Note:
- Browsers may use this to identify the application. It is
different from the
<title>element, which usually contain the application name, but may also contain information like the document name or a status. - Simple web pages shouldn't define an application-name. :::
- Browsers may use this to identify the application. It is
different from the
author: the name of the document's author.description: a short and accurate summary of the content of the page. Several browsers, like Firefox and Opera, use this as the default description of bookmarked pages.generator: the identifier of the software that generated the page.keywords: words relevant to the page's content separated by commas.referrer: controls the HTTPRefererheader of requests sent from the document:Values for the contentattribute of<meta name="referrer">no-referrerDo not send a HTTP Refererheader.originSend the origin of the document. no-referrer-when-downgradeSend the full URL when the destination is at least as secure as the current page (HTTP(S)→HTTPS), but send no referrer when it's less secure (HTTPS→HTTP). This is the default behavior. origin-when-cross-originSend the full URL (stripped of parameters) for same-origin requests, but only send the origin for other cases. same-originSend the full URL (stripped of parameters) for same-origin requests. Cross-origin requests will contain no referrer header. strict-originSend the origin when the destination is at least as secure as the current page (HTTP(S)→HTTPS), but send no referrer when it's less secure (HTTPS→HTTP). strict-origin-when-cross-originSend the full URL (stripped of parameters) for same-origin requests. Send the origin when the destination is at least as secure as the current page (HTTP(S)→HTTPS). Otherwise, send no referrer. unsafe-URLSend the full URL (stripped of parameters) for same-origin or cross-origin requests. ::: {#sect2 .notecard .note} Note:
- Dynamically inserting
<meta name="referrer">(withdocument.write()orappendChild()) makes the referrer behavior unpredictable. - When several conflicting policies are defined, the
no-referrerpolicy is applied. :::
theme-color: indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface. Thecontentattribute contains a valid CSS<color>. Themediaattribute with a valid media query list can be included to set the media the theme color metadata applies to.color-scheme: specifies one or more color schemes with which the document is compatible. The browser will use this information in tandem with the user's browser or device settings to determine what colors to use for everything from background and foregrounds to form controls and scrollbars. The primary use for<meta name="color-scheme">is to indicate compatibility with—and order of preference for—light and dark color modes. The value of thecontentproperty forcolor-schememay be one of the following:normalThe document is unaware of color schemes and should be rendered using the default color palette.
- [
light|dark]+ One or more color schemes supported by the document. Specifying the same color scheme more than once has the same effect as specifying it only once. Indicating multiple color schemes indicates that the first scheme is preferred by the document, but that the second specified scheme is acceptable if the user prefers it.
only lightIndicates that the document only supports light mode, with a light background and dark foreground colors. By specification,
only darkis not valid, because forcing a document to render in dark mode when it isn't truly compatible with it can result in unreadable content; all major browsers default to light mode if not otherwise configured.
For example, to indicate that a document prefers dark mode but does render functionally in light mode as well:
::: code-example [html]{.language-name}
<meta name="color-scheme" content="dark light" />:::
This works at the document level in the same way that the CSS
color-schemeproperty lets individual elements specify their preferred and accepted color schemes. Your styles can adapt to the current color scheme using theprefers-color-schemeCSS media feature. :::Standard metadata names defined in other specifications #
::: section-content The CSS Device Adaptation specification defines the following metadata name:
viewport: gives hints about the size of the initial size of the viewport.Values for the content of <meta name="viewport">Value Possible subvalues Description widthA positive integer number, or the text device-widthDefines the pixel width of the viewport that you want the website to be rendered at. heightA positive integer, or the text device-heightDefines the height of the viewport. Not used by any browser. initial-scaleA positive number between 0.0and10.0Defines the ratio between the device width ( device-widthin portrait mode ordevice-heightin landscape mode) and the viewport size.maximum-scaleA positive number between 0.0and10.0Defines the maximum amount to zoom in. It must be greater or equal to the minimum-scaleor the behavior is undefined. Browser settings can ignore this rule and iOS10+ ignores it by default.minimum-scaleA positive number between 0.0and10.0Defines the minimum zoom level. It must be smaller or equal to the maximum-scaleor the behavior is undefined. Browser settings can ignore this rule and iOS10+ ignores it by default.user-scalableyesornoIf set to no, the user is not able to zoom in the webpage. The default isyes. Browser settings can ignore this rule, and iOS10+ ignores it by default.viewport-fitauto,containorcoverThe
autovalue doesn't affect the initial layout viewport, and the whole web page is viewable.The
containvalue means that the viewport is scaled to fit the largest rectangle inscribed within the display.The
covervalue means that the viewport is scaled to fill the device display. It is highly recommended to make use of the safe area inset variables to ensure that important content doesn't end up outside the display.::: {#sect4 .notecard .warning} Warning:
Disabling zooming capabilities by setting
user-scalableto a value ofnoprevents people experiencing low vision conditions from being able to read and understand page content.- MDN Understanding WCAG, Guideline 1.4 explanations
- Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0{target="_blank"} ::: :::
Other metadata names #
::: section-content The WHATWG Wiki MetaExtensions page{target="_blank"} contains a large set of non-standard metadata names that have not been formally accepted yet; however, some of the names included there are already used quite commonly in practice — including the following:
creator: the name of the creator of the document, such as an organization or institution. If there are more than one, several<meta>elements should be used.googlebot, a synonym ofrobots, is only followed by Googlebot (the indexing crawler for Google).publisher: the name of the document's publisher.robots: the behavior that cooperative crawlers, or "robots", should use with the page. It is a comma-separated list of the values below:Value Description Used by indexAllows the robot to index the page (default). All noindexRequests the robot to not index the page. All followAllows the robot to follow the links on the page (default). All nofollowRequests the robot to not follow the links on the page. All allEquivalent to index, followGoogle noneEquivalent to noindex, nofollowGoogle noarchiveRequests the search engine not to cache the page content. Google, Yahoo, Bing nosnippetPrevents displaying any description of the page in search engine results. Google, Bing noimageindexRequests this page not to appear as the referring page of an indexed image. Google nocacheSynonym of noarchive.Bing ::: {#sect5 .notecard .note} Note:
- Only cooperative robots follow these rules. Do not expect to prevent email harvesters with them.
- The robot still needs to access the page in order to read these rules. To prevent bandwidth consumption, use a robots.txt file.
- If you want to remove a page,
noindexwill work, but only after the robot visits the page again. Ensure that therobots.txtfile is not preventing revisits. - Some values are mutually exclusive, like
indexandnoindex, orfollowandnofollow. In these cases the robot's behavior is undefined and may vary between them. - Some crawler robots, like Google, Yahoo and Bing, support the
same values for the HTTP header
X-Robots-Tag; this allows non-HTML documents like images to use these rules. ::: :::
Specifications #
::: _table #
Specification #
HTML Standard
[# standard-metadata-names]{.small}Referrer Policy
[# referrer-policy-delivery-meta]{.small} #:::
Browser compatibility #
::: _table #
Desktop MobileChrome Edge Firefox Internet Explorer Opera Safari WebView Chrome Firefox for Opera Safari Samsung Android Android Android Android on IOS Internetname1 12 1 ≤6 ≤12.1 ≤4 4.4 18 4 ≤12.1 ≤3.2 1.0color-scheme81 81 96 No 68 12.1 81 81 96 No 12.2 13.0referrer17 79 36 11 15 11.1 37 18 36 No 12 1.0Until Chrome The Browsers initially supported an [early Until Opera Until Chrome Until Chrome The Until Samsung 46, `content` `referrer` draft](https://wiki.whatwg.org/wiki/Meta_referrer) 46, `content` 46, `content` 46, `content` `referrer` Internet 5.0, values value of the specification which can only use a meta tag values values values value `content` weren\'t wasn\'t and is only compatible with the `origin` value from weren\'t weren\'t weren\'t wasn\'t values constrained taken into the new spec. constrained constrained constrained taken into weren\'t to the values account when to the values to the values to the values account when constrained listed in the navigation listed in the listed in the listed in the navigation to the values spec. was spec. spec. spec. was listed in the happening happening spec. via the via the context menu context menu or middle or middle click until click until Firefox 39. Firefox 39.scheme1 12 1 ≤6 ≤12.1 ≤4 4.4 18 4 ≤12.1 ≤3.2 1.0theme-color73 79 No No No 15 No 80 No No 15 6.2Chrome uses Edge uses the Chrome for the color color only on Android does only on installed not use the installed progressive color on progressive web apps. devices with web apps. native dark mode enabled. 39--72 Chrome reports support, but does not actually use the color anywhere.:::
See also #
::: section-content
::: _attribution © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name{._attribution-link} :::
- Dynamically inserting