path: root/files/ja/web/html/element/meta/name/index.html

---
title: 標準メタデータ名
slug: Web/HTML/Element/meta/name
tags:
  - Attribute
  - HTML
  - HTML document metadata
  - Reference
  - metadata
translation_of: Web/HTML/Element/meta/name
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary">{{htmlelement("meta")}} 要素を使用して、文書のメタデータを名前と値の組み合わせで提供することができ、 {{htmlattrxref("name", "meta")}} 属性はメタデータ名を指定し、 {{htmlattrxref("content", "meta")}} 属性は値を指定します。</span></p>

<h3 id="Standard_metadata_names_defined_in_the_HTML_specification" name="Standard_metadata_names_defined_in_the_HTML_specification">HTML 仕様書で定義されている標準メタデータ名</h3>

<p>HTML 仕様書は、以下の一連の標準メタデータ名を定義しています。</p>

<ul>
 <li>
  <p><code>application-name</code>: ウェブページで動作しているアプリケーションの名前です。</p>

  <div class="note"><strong>注:</strong>

  <ul>
   <li>ブラウザーはアプリケーションを識別するためにこれを使用することがあります。これはふつうアプリケーション名が含まれるものの、文書名や状態などの情報も含まれる {{HTMLElement("title")}} 要素とは異なります。</li>
   <li>単なるウェブサイトにはアプリケーション名を定義するべきではありません。</li>
  </ul>
  </div>
 </li>
 <li><code>author</code>: この文書の著者です。</li>
 <li><code>description</code>: ページの内容を短く正確に要約したものです。 Firefox や Opera など一部のブラウザーは、これをブックマークされたページの既定の説明として使用します。</li>
 <li><code>generator</code>: このページを生成したソフトウェアの識別子です。</li>
 <li><code>keywords</code>: ページのコンテンツに関連する語句で、カンマ区切りです。</li>
 <li><code>referrer</code>: この文書からリクエストを送信するための HTTP の {{httpheader("Referer")}} ヘッダーの内容です。
  <table class="standard-table">
   <caption><code>&lt;meta name="referrer"&gt;</code> の <code>content</code> 属性の値</caption>
   <tbody>
    <tr>
     <td><code>no-referrer</code></td>
     <td>HTTP の {{httpheader("Referer")}} ヘッダーを送信しません。</td>
    </tr>
    <tr>
     <td><code>origin</code></td>
     <td>文書の{{glossary("origin", "オリジン")}}を送信します。</td>
    </tr>
    <tr>
     <td><code>no-referrer-when-downgrade</code></td>
     <td>現在のページと同等の安全性の URL (HTTP(S)→HTTPS) にはリファラーとして URL 全体を送信しますが、安全性が低い URL (HTTPS→HTTP) には送信しません。これは既定の動作です。</td>
    </tr>
    <tr>
     <td><code>origin-when-cross-origin</code></td>
     <td>同一オリジンへのリクエストでは URL 全体 (引数を除く) を送信しますが、他の場合はオリジンのみ送信します。</td>
    </tr>
    <tr>
     <td><code>same-origin</code></td>
     <td>同一オリジンにはリファラーを送信しますが、オリジン間リクエストにはリファラーを含めません。</td>
    </tr>
    <tr>
     <td><code>strict-origin</code></td>
     <td>安全性が同等とみられる宛先 (HTTP(S)→HTTPS) に対しては、リファラーとして文書のオリジンのみを送信しますが、安全性が劣る宛先 (HTTPS→HTTP) には送信しません。</td>
    </tr>
    <tr>
     <td><code>strict-origin-when-cross-origin</code></td>
     <td>同一オリジンへのリクエストでは、 URL 全体 (引数を除く) を送信します。現在のページと安全性が同等であると見られる宛先 (HTTP(S)→HTTPS) にはオリジンを送信します。それ以外は、リファラーを送信しません。</td>
    </tr>
    <tr>
     <td><code>unsafe-URL</code></td>
     <td>同一オリジンまたはオリジン間リクエストで、 URL 全体 (引数を除く) を送信します。</td>
    </tr>
   </tbody>
  </table>

  <div class="note"><strong>注:</strong>

  <ul>
   <li>Dynamically inserting <code>&lt;meta name="referrer"&gt;</code> (with {{domxref("Document.write", "document.write()")}} or {{domxref("Node.appendChild", "appendChild()")}}) makes the referrer behaviour unpredictable.</li>
   <li>When several conflicting policies are defined, the <code>no-referrer</code> policy is applied.</li>
  </ul>
  </div>
 </li>
 <li><code><a href="/ja/docs/Web/HTML/Element/meta/name/theme-color">theme-color</a></code>: 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 {{cssxref("&lt;color&gt;")}}.</li>
</ul>

<h3 id="Standard_metadata_names_defined_in_other_specifications" name="Standard_metadata_names_defined_in_other_specifications">他の仕様書で定義されている標準メタデータ名</h3>

<p>The CSS Color Adjustment specification defines the following metadata name:</p>

<ul>
 <li>
  <p><code>color-scheme</code>: specifies one or more color schemes with which the document is compatible.</p>

  <p>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.</p>

  <p>The value of the {{htmlattrxref("content", "meta")}} property for <code>color-scheme</code> may be one of the following:</p>

  <dl>
   <dt><code>normal</code></dt>
   <dd>The document is unaware of color schemes and should simply be rendered using the default color palette.</dd>
   <dt>[<code>light</code> | <code>dark</code>]+</dt>
   <dd>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.</dd>
   <dt><code>only light</code></dt>
   <dd>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.</dd>
  </dl>

  <p>For example, to indicate that a document prefers dark mode but does render functionally in light mode as well:</p>

  <pre class="brush: html notranslate">&lt;meta name="color-scheme" content="dark light"&gt;</pre>

  <p>This works at the document level in the same way that the CSS {{cssxref("color-scheme")}} property lets individual elements specify their preferred and accepted color schemes. Your styles can adapt to the current color scheme using the {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} CSS media feature.</p>
 </li>
</ul>

<p>The CSS Device Adaptation specification defines the following metadata name:</p>

<ul>
 <li>
  <p><code>viewport</code>: gives hints about the size of the initial size of the {{glossary("viewport")}}. Used by mobile devices only.</p>

  <table class="fullwidth-table">
   <caption>Values for the content of <code>&lt;meta name="viewport"&gt;</code></caption>
   <thead>
    <tr>
     <th scope="col">値</th>
     <th scope="col">Possible subvalues</th>
     <th scope="col">解説</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 web site 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 behaviour 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 behaviour 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="/ja/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 class="note"><strong>Notes:</strong>

  <ul>
   <li>Though unstandardized, this declaration is respected by most mobile browsers due to de-facto dominance.</li>
   <li>The default values may vary between devices and browsers.</li>
   <li>To learn about this declaration in Firefox for Mobile, see <a href="/ja/docs/Mobile/Viewport_meta_tag" title="Mobile/Viewport meta tag">this article</a>.</li>
  </ul>
  </div>

  <h5 id="Accessibility_concerns_with_viewport_scaling" name="Accessibility_concerns_with_viewport_scaling">ビューポートの拡大縮小についてのアクセシビリティの考慮</h5>

  <div>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.</div>

  <ul>
   <li><a href="/ja/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">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li>
  </ul>

  <h5 id="See_also" name="See_also">関連情報</h5>

  <p>The <a href="/ja/docs/Web/CSS/@viewport"><code>@viewport</code></a> CSS at-rule.</p>
 </li>
</ul>

<h3 id="Other_metadata_names" name="Other_metadata_names">その他のメタデータ名</h3>

<p>The <a class="external" href="https://wiki.whatwg.org/wiki/MetaExtensions">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 {{HTMLElement("meta")}} 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 behaviour that cooperative crawlers, or "robots", should use with the page. It is a comma-separated list of the values below:
  <table class="standard-table">
   <caption>Values for the content of <code>&lt;meta name="robots"&gt;</code></caption>
   <thead>
    <tr>
     <th scope="col">値</th>
     <th scope="col">解説</th>
     <th scope="col">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 class="external" href="https://support.google.com/webmasters/answer/79812">Google</a></td>
    </tr>
    <tr>
     <td><code>none</code></td>
     <td>Equivalent to <code>noindex, nofollow</code></td>
     <td><a class="external" href="https://support.google.com/webmasters/answer/79812">Google</a></td>
    </tr>
    <tr>
     <td><code>noarchive</code></td>
     <td>Requests the search engine not to cache the page content.</td>
     <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>, <a class="external" href="https://help.yahoo.com/kb/search-for-desktop/SLN2213.html">Yahoo</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">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 class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">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 class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a></td>
    </tr>
    <tr>
     <td><code>nocache</code></td>
     <td>Synonym of <code>noarchive</code>.</td>
     <td><a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td>
    </tr>
   </tbody>
  </table>

  <div class="note"><strong>Notes:</strong>

  <ul>
   <li>Only cooperative robots follow these rules. Do not expect to prevent e-mail 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>{{Glossary("robots.txt")}}</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 behaviour 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>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', '#standard-metadata-names', 'standard metadata names')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS Color Adjust', '#color-scheme-meta', 'the "color-scheme" metadata name')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Device', '#viewport-meta', 'the "viewport" metadata name')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-meta', 'the "referrer" metadata name')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("html.elements.meta.name")}}</p>