path: root/devdocs/html/element%2Fmeta%2Fname.html

<header><h1>Standard metadata names</h1></header><div class="section-content"><p>The <a href="../meta"><code>&lt;meta&gt;</code></a> element can be used to provide document metadata in terms of name-value pairs, with the <a href="../meta#name"><code>name</code></a> attribute giving the metadata name, and the <a href="../meta#content"><code>content</code></a> attribute giving the value.</p></div>
<h3 id="standard_metadata_names_defined_in_the_html_specification">Standard metadata names defined in the HTML specification</h3>
<div class="section-content">
<p>The HTML specification defines the following set of standard metadata names:</p> <ul> <li>
<code>application-name</code>: the name of the application running in the web page. <div class="notecard note" id="sect1"> <p><strong>Note:</strong></p> <ul> <li>Browsers may use this to identify the application. It is different from the <a href="../title"><code>&lt;title&gt;</code></a> element, which usually contain the application name, but may also contain information like the document name or a status.</li> <li>Simple web pages shouldn't define an application-name.</li> </ul> </div> </li> <li>
<code>author</code>: the name of the document's author.</li> <li>
<code>description</code>: 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.</li> <li>
<code>generator</code>: the identifier of the software that generated the page.</li> <li>
<code>keywords</code>: words relevant to the page's content separated by commas.</li> <li>
<code>referrer</code>: controls the HTTP <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> header of requests sent from the document: <figure class="table-container"><div class="_table"><table class="standard-table"> <caption> Values for the <code>content</code> attribute of <code>&lt;meta name="referrer"&gt;</code> </caption> <tbody> <tr> <td><code>no-referrer</code></td> <td>Do not send a HTTP <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> header.</td> </tr> <tr> <td><code>origin</code></td> <td>Send the <a href="https://developer.mozilla.org/en-US/docs/Glossary/Origin">origin</a> of the document.</td> </tr> <tr> <td><code>no-referrer-when-downgrade</code></td> <td> 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. </td> </tr> <tr> <td><code>origin-when-cross-origin</code></td> <td> Send the full URL (stripped of parameters) for same-origin requests, but only send the origin for other cases. </td> </tr> <tr> <td><code>same-origin</code></td> <td> Send the full URL (stripped of parameters) for same-origin requests. Cross-origin requests will contain no referrer header. </td> </tr> <tr> <td><code>strict-origin</code></td> <td> 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). </td> </tr> <tr> <td><code>strict-origin-when-cross-origin</code></td> <td> 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. </td> </tr> <tr> <td><code>unsafe-URL</code></td> <td> Send the full URL (stripped of parameters) for same-origin or cross-origin requests. </td> </tr> </tbody> </table></div></figure> <div class="notecard note" id="sect2"> <p><strong>Note:</strong></p> <ul> <li>Dynamically inserting <code>&lt;meta name="referrer"&gt;</code> (with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/write"><code>document.write()</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild"><code>appendChild()</code></a>) makes the referrer behavior unpredictable.</li> <li>When several conflicting policies are defined, the <code>no-referrer</code> policy is applied.</li> </ul> </div> </li> <li>
<a href="name/theme-color"><code>theme-color</code></a>: indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface. The <code>content</code> attribute contains a valid CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value"><code>&lt;color&gt;</code></a>. The <code>media</code> attribute with a valid media query list can be included to set the media the theme color metadata applies to.</li> <li> <code>color-scheme</code>: 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 <code>&lt;meta name="color-scheme"&gt;</code> is to indicate compatibility with—and order of preference for—light and dark color modes. The value of the <a href="../meta#content"><code>content</code></a> property for <code>color-scheme</code> may be one of the following: <dl> <dt id="normal"><a href="#normal"><code>normal</code></a></dt> <dd> <p>The document is unaware of color schemes and should be rendered using the default color palette.</p> </dd> <dt id="sect3">
<a href="#sect3">[</a><code>light</code> | <code>dark</code>]+</dt> <dd> <p>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.</p> </dd> <dt id="only_light"><a href="#only_light"><code>only light</code></a></dt> <dd> <p>Indicates that the document <em>only</em> supports light mode, with a light background and dark foreground colors. By specification, <code>only dark</code> <em>is not valid</em>, 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.</p> </dd> </dl>For example, to indicate that a document prefers dark mode but does render functionally in light mode as well: <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="0w0L++l4RuA3mMDJx2WP4P5IvHUqhkh7+LHZnzh6nHc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>color-scheme<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dark light<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
</pre>
</div>This works at the document level in the same way that the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme"><code>color-scheme</code></a> property lets individual elements specify their preferred and accepted color schemes. Your styles can adapt to the current color scheme using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme"><code>prefers-color-scheme</code></a> CSS media feature. </li> </ul>
</div>
<h3 id="standard_metadata_names_defined_in_other_specifications">Standard metadata names defined in other specifications</h3>
<div class="section-content">
<p>The CSS Device Adaptation specification defines the following metadata name:</p> <ul> <li>
<code>viewport</code>: gives hints about the size of the initial size of the <a href="https://developer.mozilla.org/en-US/docs/Glossary/Viewport">viewport</a>. <figure class="table-container"><div class="_table"><table class="fullwidth-table"> <caption> Values for the content of <code>&lt;meta name="viewport"&gt;</code> </caption> <thead> <tr> <th scope="col">Value</th> <th scope="col">Possible subvalues</th> <th scope="col">Description</th> </tr> </thead> <tbody> <tr> <td><code>width</code></td> <td>A positive integer number, or the text <code>device-width</code>
</td> <td> Defines the pixel width of the viewport that you want the website to be rendered at. </td> </tr> <tr> <td><code>height</code></td> <td>A positive integer, or the text <code>device-height</code>
</td> <td>Defines the height of the viewport. Not used by any browser.</td> </tr> <tr> <td><code>initial-scale</code></td> <td>A positive number between <code>0.0</code> and <code>10.0</code>
</td> <td> Defines the ratio between the device width (<code>device-width</code> in portrait mode or <code>device-height</code> in landscape mode) and the viewport size. </td> </tr> <tr> <td><code>maximum-scale</code></td> <td>A positive number between <code>0.0</code> and <code>10.0</code>
</td> <td> Defines the maximum amount to zoom in. It must be greater or equal to the <code>minimum-scale</code> or the behavior is undefined. Browser settings can ignore this rule and iOS10+ ignores it by default. </td> </tr> <tr> <td><code>minimum-scale</code></td> <td>A positive number between <code>0.0</code> and <code>10.0</code>
</td> <td> Defines the minimum zoom level. It must be smaller or equal to the <code>maximum-scale</code> or the behavior is undefined. Browser settings can ignore this rule and iOS10+ ignores it by default. </td> </tr> <tr> <td><code>user-scalable</code></td> <td>
<code>yes</code> or <code>no</code>
</td> <td> If set to <code>no</code>, the user is not able to zoom in the webpage. The default is <code>yes</code>. Browser settings can ignore this rule, and iOS10+ ignores it by default. </td> </tr> <tr> <td><code>viewport-fit</code></td> <td>
<code>auto</code>, <code>contain</code> or <code>cover</code>
</td> <td> <p> The <code>auto</code> value doesn't affect the initial layout viewport, and the whole web page is viewable. </p> <p> The <code>contain</code> value means that the viewport is scaled to fit the largest rectangle inscribed within the display. </p> <p> The <code>cover</code> value means that the viewport is scaled to fill the device display. It is highly recommended to make use of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/env">safe area inset</a> variables to ensure that important content doesn't end up outside the display. </p> </td> </tr> </tbody> </table></div></figure> <div class="notecard warning" id="sect4"> <p><strong>Warning:</strong></p> <p>Disabling zooming capabilities by setting <code>user-scalable</code> to a value of <code>no</code> prevents people experiencing low vision conditions from being able to read and understand page content.</p> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" target="_blank">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li> </ul> </div> </li> </ul>
</div>
<h3 id="other_metadata_names">Other metadata names</h3>
<div class="section-content">
<p>The <a href="https://wiki.whatwg.org/wiki/MetaExtensions" target="_blank">WHATWG Wiki MetaExtensions page</a> 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:</p> <ul> <li>
<code>creator</code>: the name of the creator of the document, such as an organization or institution. If there are more than one, several <a href="../meta"><code>&lt;meta&gt;</code></a> elements should be used.</li> <li>
<code>googlebot</code>, a synonym of <code>robots</code>, is only followed by Googlebot (the indexing crawler for Google).</li> <li>
<code>publisher</code>: the name of the document's publisher.</li> <li>
<code>robots</code>: the behavior that cooperative crawlers, or "robots", should use with the page. It is a comma-separated list of the values below: <figure class="table-container"><div class="_table"><table> <thead> <tr> <th>Value</th> <th>Description</th> <th>Used by</th> </tr> </thead> <tbody> <tr> <td><code>index</code></td> <td>Allows the robot to index the page (default).</td> <td>All</td> </tr> <tr> <td><code>noindex</code></td> <td>Requests the robot to not index the page.</td> <td>All</td> </tr> <tr> <td><code>follow</code></td> <td>Allows the robot to follow the links on the page (default).</td> <td>All</td> </tr> <tr> <td><code>nofollow</code></td> <td>Requests the robot to not follow the links on the page.</td> <td>All</td> </tr> <tr> <td><code>all</code></td> <td>Equivalent to <code>index, follow</code>
</td> <td><a href="https://developers.google.com/search/docs/advanced/crawling/special-tags?visit_id=637855965067987211-415685194&amp;rd=1" target="_blank">Google</a></td> </tr> <tr> <td><code>none</code></td> <td>Equivalent to <code>noindex, nofollow</code>
</td> <td><a href="https://developers.google.com/search/docs/advanced/crawling/special-tags?visit_id=637855965074074862-574753619&amp;rd=1" target="_blank">Google</a></td> </tr> <tr> <td><code>noarchive</code></td> <td>Requests the search engine not to cache the page content.</td> <td>
<a href="https://developers.google.com/search/docs/advanced/robots/robots_meta_tag" target="_blank">Google</a>, <a href="https://help.yahoo.com/kb/search-for-desktop/SLN2213.html" target="_blank">Yahoo</a>, <a href="https://www.bing.com/webmasters/help/which-robots-metatags-does-bing-support-5198d240" target="_blank">Bing</a>
</td> </tr> <tr> <td><code>nosnippet</code></td> <td>Prevents displaying any description of the page in search engine results.</td> <td>
<a href="https://developers.google.com/search/docs/advanced/robots/robots_meta_tag" target="_blank">Google</a>, <a href="https://www.bing.com/webmasters/help/which-robots-metatags-does-bing-support-5198d240" target="_blank">Bing</a>
</td> </tr> <tr> <td><code>noimageindex</code></td> <td>Requests this page not to appear as the referring page of an indexed image.</td> <td><a href="https://developers.google.com/search/docs/advanced/robots/robots_meta_tag" target="_blank">Google</a></td> </tr> <tr> <td><code>nocache</code></td> <td>Synonym of <code>noarchive</code>.</td> <td><a href="https://www.bing.com/webmasters/help/which-robots-metatags-does-bing-support-5198d240" target="_blank">Bing</a></td> </tr> </tbody> </table></div></figure> <div class="notecard note" id="sect5"> <p><strong>Note:</strong></p> <ul> <li>Only cooperative robots follow these rules. Do not expect to prevent email harvesters with them.</li> <li>The robot still needs to access the page in order to read these rules. To prevent bandwidth consumption, use a <em><a href="https://developer.mozilla.org/en-US/docs/Glossary/Robots.txt">robots.txt</a></em> file.</li> <li>If you want to remove a page, <code>noindex</code> will work, but only after the robot visits the page again. Ensure that the <code>robots.txt</code> file is not preventing revisits.</li> <li>Some values are mutually exclusive, like <code>index</code> and <code>noindex</code>, or <code>follow</code> and <code>nofollow</code>. In these cases the robot's behavior is undefined and may vary between them.</li> <li>Some crawler robots, like Google, Yahoo and Bing, support the same values for the HTTP header <code>X-Robots-Tag</code>; this allows non-HTML documents like images to use these rules.</li> </ul> </div> </li> </ul>
</div>
<h2 id="specifications">Specifications</h2>
<div class="_table"><table class="standard-table">
<thead><tr><th scope="col">Specification</th></tr></thead>
<tbody>
<tr><td><a href="https://html.spec.whatwg.org/multipage/semantics.html#standard-metadata-names">HTML Standard <br><small># standard-metadata-names</small></a></td></tr>
<tr><td><a href="https://w3c.github.io/webappsec-referrer-policy/#referrer-policy-delivery-meta">Referrer Policy <br><small># referrer-policy-delivery-meta</small></a></td></tr>
</tbody>
</table></div>
<h2 id="browser_compatibility">Browser compatibility</h2>
<div class="_table"><table>
<thead>
<tr id="bct-browser-type">
<th></th>
<th colspan="6">Desktop</th>
<th colspan="6">Mobile</th>
</tr>
<tr id="bct-browsers">
<th></th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
<th>WebView Android</th>
<th>Chrome Android</th>
<th>Firefox for Android</th>
<th>Opera Android</th>
<th>Safari on IOS</th>
<th>Samsung Internet</th>
</tr>
</thead>
<tbody>
<tr>
<th><code>name</code></th>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">≤6</td>
<td class="bc-supports-yes">≤12.1</td>
<td class="bc-supports-yes">≤4</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">≤12.1</td>
<td class="bc-supports-yes">≤3.2</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>color-scheme</code></th>
<td class="bc-supports-yes">81</td>
<td class="bc-supports-yes">81</td>
<td class="bc-supports-yes">96</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">68</td>
<td class="bc-supports-yes">12.1</td>
<td class="bc-supports-yes">81</td>
<td class="bc-supports-yes">81</td>
<td class="bc-supports-yes">96</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">12.2</td>
<td class="bc-supports-yes">13.0</td>
</tr>
<tr>
<th><code>referrer</code></th>
<td class="bc-supports-yes"><details><summary>17</summary>Until Chrome 46, <code>content</code> values weren't constrained to the values listed in the spec.</details></td>
<td class="bc-supports-yes">79</td>
<td class="bc-supports-yes"><details><summary>36</summary>The <code>referrer</code> value wasn't taken into account when navigation was happening via the context menu or middle click until Firefox 39.</details></td>
<td class="bc-supports-yes"><details><summary>11</summary>Browsers initially supported an <a href="https://wiki.whatwg.org/wiki/Meta_referrer">early draft</a> of the specification which can only use a meta tag and is only compatible with the <code>origin</code> value from the new spec.</details></td>
<td class="bc-supports-yes"><details><summary>15</summary>Until Opera 46, <code>content</code> values weren't constrained to the values listed in the spec.</details></td>
<td class="bc-supports-yes">11.1</td>
<td class="bc-supports-yes"><details><summary>37</summary>Until Chrome 46, <code>content</code> values weren't constrained to the values listed in the spec.</details></td>
<td class="bc-supports-yes"><details><summary>18</summary>Until Chrome 46, <code>content</code> values weren't constrained to the values listed in the spec.</details></td>
<td class="bc-supports-yes"><details><summary>36</summary>The <code>referrer</code> value wasn't taken into account when navigation was happening via the context menu or middle click until Firefox 39.</details></td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes"><details><summary>1.0</summary>Until Samsung Internet 5.0, <code>content</code> values weren't constrained to the values listed in the spec.</details></td>
</tr>
<tr>
<th><code>scheme</code></th>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">≤6</td>
<td class="bc-supports-yes">≤12.1</td>
<td class="bc-supports-yes">≤4</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">≤12.1</td>
<td class="bc-supports-yes">≤3.2</td>
<td class="bc-supports-yes">1.0</td>
</tr>
<tr>
<th><code>theme-color</code></th>
<td class="bc-supports-yes">
<details><summary>73</summary>Chrome uses the color only on installed progressive web apps.</details><details><summary>39–72</summary>Chrome reports support, but does not actually use the color anywhere.</details>
</td>
<td class="bc-supports-yes"><details><summary>79</summary>Edge uses the color only on installed progressive web apps.</details></td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes"><details><summary>80</summary>Chrome for Android does not use the color on devices with native dark mode enabled.</details></td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">6.2</td>
</tr>
</tbody>
</table></div>
<h2 id="see_also">See also</h2>
<div class="section-content"><ul> <li><a href="../../viewport_meta_tag">Viewport <code>&lt;meta&gt;</code> tag</a></li> <li>
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#metadata_the_meta_element">Metadata: the <code>&lt;meta&gt;</code> element</a> in <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What's in the head? Metadata in HTML</a>
</li> </ul></div><div class="_attribution">
  <p class="_attribution-p">
    &copy; 2005&ndash;2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br>
    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name</a>
  </p>
</div>