Baseline Widely available *
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.
The HTML specification defines the following set of standard metadata names:
application-name
: the name of the application running in the web page.
Note:
<title>
element, which usually contain the application name, but may also contain information like the document name or a status.application-name
.author
: the name of the document's author.
description
: a short and accurate summary of the content of the page. Search engines like Google may use this field to control the appearance of the webpage in the search result.
generator
: the identifier of the software that generated the page.
keywords
: words relevant to the page's content separated by commas.
referrer
: controls the HTTP Referer
header of requests sent from the document:
content
attribute 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 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-origin
Send the full URL (stripped of parameters) for same-origin requests, but only send the origin for other cases. same-origin
Send the full URL (stripped of parameters) for same-origin requests. Cross-origin requests will contain no referrer header. strict-origin
Send 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-origin
Send 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-URL
Send the full URL (stripped of parameters) for same-origin or cross-origin requests.
Note:
<meta name="referrer">
(with document.write()
or appendChild()
) makes the referrer behavior unpredictable.no-referrer
policy 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. The content
attribute contains a valid CSS <color>
. The media
attribute 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 the content
property for color-scheme
may be one of the following:
normal
The document is unaware of color schemes and should be rendered using the default color palette.
light
, dark
, light dark
, dark light
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 light
Indicates that the document only supports light mode, with a light background and dark foreground colors. By specification, only dark
is 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:
<meta name="color-scheme" content="dark light" />
This works at the document level in the same way that the CSS color-scheme
property lets individual elements specify their preferred and accepted color schemes. Your styles can adapt to the current color scheme using the prefers-color-scheme
CSS media feature.
The CSS Device Adaptation specification defines the following metadata name:
viewport
: gives hints about the size of the initial size of the viewport.
<meta name="viewport">
Value Possible subvalues Description width
A positive integer number, or the text device-width
Defines the pixel width of the viewport that you want the website to be rendered at. height
A positive integer, or the text device-height
Defines the height of the viewport. Not used by any browser. initial-scale
A positive number between 0.0
and 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
A positive number between 0.0
and 10.0
Defines the maximum amount to zoom in. It must be greater or equal to the minimum-scale
or the behavior is undefined. Browser settings can ignore this rule and iOS10+ ignores it by default. minimum-scale
A positive number between 0.0
and 10.0
Defines the minimum zoom level. It must be smaller or equal to the maximum-scale
or the behavior is undefined. Browser settings can ignore this rule and iOS10+ ignores it by default. user-scalable
yes
or no
If set to no
, the user is not able to zoom in the webpage. The default is yes
. Browser settings can ignore this rule, and iOS10+ ignores it by default. viewport-fit
auto
, contain
or cover
The auto
value doesn't affect the initial layout viewport, and the whole web page is viewable.
The contain
value means that the viewport is scaled to fit the largest rectangle inscribed within the display.
The cover
value 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.
The WHATWG Wiki MetaExtensions page 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 of robots
, 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:
index
Allows the robot to index the page (default). All noindex
Requests the robot to not index the page. All follow
Allows the robot to follow the links on the page (default). All nofollow
Requests the robot to not follow the links on the page. All all
Equivalent to index, follow
Google none
Equivalent to noindex, nofollow
Google noarchive
Requests the search engine not to cache the page content. Google, Yahoo, Bing nosnippet
Prevents displaying any description of the page in search engine results. Google, Bing noimageindex
Requests this page not to appear as the referring page of an indexed image. Google nocache
Synonym of noarchive
. Bing
Note:
<meta name="robots">
element and robots.txt
file serve different purposes: robots.txt
controls the crawling of pages, and does not affect indexing or other behavior controlled by robots
meta. A page that can't be crawled may still be indexed if it is referenced by another document.noindex
will work, but only after the robot visits the page again. Ensure that the robots.txt
file is not preventing revisits.index
and noindex
, or follow
and nofollow
. In these cases the robot's behavior is undefined and may vary between them.X-Robots-Tag
; this allows non-HTML documents like images to use these rules.application-title
: Used to customize an app's title bar for web applications installed as standalone apps on supporting desktop operating systems. While the text content of the <title>
element is usually displayed in browser tabs when the app is running in a browser, the application-title
metadata name can be used to set a different title for the application when it is running as a standalone installed app.RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3