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
browser-compat: html.elements.meta.name
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">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><code>&lt;meta name="referrer"&gt;</code> を ({{domxref("Document.write", "document.write()")}} または {{domxref("Node.appendChild", "appendChild()")}} で) 動的に挿入すると、リファラーの動作が予測不能になります。</li>
   <li>相反する複数のポリシーが定義されている場合は、 <code>no-referrer</code> ポリシーが適用されます。</li>
  </ul>
  </div>
 </li>
 <li><code><a href="/ja/docs/Web/HTML/Element/meta/name/theme-color">theme-color</a></code>: ユーザーエージェントがページの表示や周辺のユーザーインターフェースをカスタマイズするために使用すべき推奨色を示します。 <code>content</code> 属性には、有効な CSS の {{cssxref("&lt;color&gt;")}} が含まれます。</li>
 <li>
  <p><code>color-scheme</code>: 文書と互換性のある 1 つ以上の複数のカラースキームを指定します。</p>

  <p>ブラウザーは、この情報をユーザーのブラウザーや端末の設定と合わせて使用し、背景や前景、フォームコントロールやスクロールバーなど、あらゆるものに使用する色を決定します。 <code>&lt;meta name="color-scheme"&gt;</code> の主な用途は、ライトモードとダークモードの互換性と優先順位を示すことです。</p>

  <p><code>color-scheme</code> の {{htmlattrxref("content", "meta")}} プロパティは次のうちの一つになります。</p>

  <dl>
   <dt><code>normal</code></dt>
   <dd>この文書は配色を意識していないので、既定のカラーパレットを使って描画する必要があります。</dd>
   <dt>[<code>light</code> | <code>dark</code>]+</dt>
   <dd>この文書で対応している 1 つ以上の配色。同じ配色を 2 回以上指定しても、 1 回だけ指定した場合と同じ効果が得られる。複数の配色を指定すると、この文書では最初の配色が優先されるが、ユーザーが好む場合は 2 番目に指定された配色でもよいことを示す。</dd>
   <dt><code>only light</code></dt>
   <dd>この文書がライトモード<em>のみ</em>に対応していることを示します。背景色が明るく、前景色が暗い色です。仕様書によれば、 <code>only dark</code> は有効ではありません。ダークモードに対応していない文書を強制的にダークモードで描画すると、コンテンツが読めなくなる可能性があるからです。主要なブラウザーは、特に設定されていなければ既定でライトモードになります。</dd>
  </dl>

  <p>例えば、この文書はダークモードを推奨するが、ライトモードでも機能的にはレンダリングできることを示すためには、次のようにします。</p>

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

  <p>これは、CSS の {{cssxref("color-scheme")}} プロパティで個々の要素が好みの配色と受け入れられる配色を指定できるのと同じように、文書レベルで機能します。スタイルは、 {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} という CSS メディア機能を使って、現在の配色に合わせることができます。</p>
 </li>
</ul>

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

<p>CSS Device Adaptation 仕様書は、以下のメタデータ名を定義しています。</p>

<ul>
 <li>
  <p><code>viewport</code>: この{{glossary("viewport", "ビューポート")}}の初期の寸法の大きさについてのヒントを指定します。モバイル端末でのみ使用されます。</p>

  <table class="fullwidth-table">
   <caption><code>&lt;meta name="viewport"&gt;</code> の content の値</caption>
   <thead>
    <tr>
     <th scope="col">値</th>
     <th scope="col">使用可能なサブ値</th>
     <th scope="col">解説</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td><code>width</code></td>
     <td>正の整数値、または <code>device-width</code> のテキスト</td>
     <td>ウェブサイトを表示させるビューポートのピクセル単位の幅を定義します。</td>
    </tr>
    <tr>
     <td><code>height</code></td>
     <td>正の整数値、または <code>device-height</code> のテキスト</td>
     <td>ビューポートの高さを定義します。どのブラウザーでも使用されていません。</td>
    </tr>
    <tr>
     <td><code>initial-scale</code></td>
     <td><code>0.0</code> と <code>10.0</code> の間の正の実数</td>
     <td>端末の幅 (縦長画面で <code>device-width</code>、横長画面で <code>device-height</code>) とビューポートの寸法の比率を定義します。</td>
    </tr>
    <tr>
     <td><code>maximum-scale</code></td>
     <td><code>0.0</code> と <code>10.0</code> の間の正の実数</td>
     <td>拡大縮小インする最大値を定義します。 <code>minimum-scale</code> 以上でなければ、動作は未定義です。ブラウザーの設定でこの規則を無視することができ、iOS 10 以降では既定で無視されます。</td>
    </tr>
    <tr>
     <td><code>minimum-scale</code></td>
     <td><code>0.0</code> と <code>10.0</code> の間の正の実数</td>
     <td>拡大縮小レベルの最小値を定義します。 <code>maximum-scale</code> 以下でなければ、動作は未定義です。ブラウザーの設定でこの規則を無視することができ、iOS 10 以降では既定で無視されます。</td>
    </tr>
    <tr>
     <td><code>user-scalable</code></td>
     <td><code>yes</code> または <code>no</code></td>
     <td><code>no</code> に設定された場合は、ユーザーがウェブページを拡大縮小することができなくなります。既定値は <code>yes</code> です。ブラウザーの設定でこの規則を無視することができ、iOS 10 以降では既定で無視されます。</td>
    </tr>
    <tr>
     <td><code>viewport-fit</code></td>
     <td><code>auto</code>, <code>contain</code>, <code>cover</code></td>
     <td>
      <p><code>auto</code> の値は、初期レイアウトのビューポートに影響を与えず、ウェブページ全体が表示されます。</p>

      <p><code>contain</code> の値は、ディスプレイに内接する最大の長方形に合わせてビューポートが拡大されることを意味します。</p>

      <p><code>cover</code> の値は、ビューポートが端末のディスプレイいっぱいになるように縮小されることを意味します。重要なコンテンツがディスプレイの外に出てしまわないように、 <a href="/ja/docs/Web/CSS/env">safe-area-inset-*</a> 変数を使用することを強くお勧めします。</p>
     </td>
    </tr>
   </tbody>
  </table>

  <div class="note"><strong>メモ:</strong>

  <ul>
   <li>この宣言は標準化されていませんが、事実上の優位性から、ほとんどのモバイルブラウザーで尊重されています。</li>
   <li>既定値は、端末やブラウザーによって異なる場合があります。</li>
   <li>Firefox for Mobile でのこの宣言については、<a href="/ja/docs/Mobile/Viewport_meta_tag">こちらの記事</a>を参照してください。</li>
  </ul>
  </div>

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

  <div><code>user-scalable</code> を <code>no</code> に設定して拡大縮小機能を無効にすると、弱視の人がページの内容を読んだり理解したりすることができなくなります。</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 WCAG を理解する、ガイドライン 1.4 の説明</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">関連情報</h5>

  <p>CSS の <a href="/ja/docs/Web/CSS/@viewport"><code>@viewport</code></a> アット規則</p>
 </li>
</ul>

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

<p><a href="https://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki の MetaExtensions のページ</a>には、まだ正式に受け入れられていない標準外のメタデータの名前が多数掲載されています。しかし、ここに掲載されている名前の中には、以下のように、すでに実際によく使われているものもあります。</p>

<ul>
 <li><code>creator</code>: この文書の作成者の名前で、組織や機関などです。複数ある場合は、複数の {{HTMLElement("meta")}} 要素を使用する必要があります。</li>
 <li><code>googlebot</code>: <code>robots</code> と同様ですが、Googlebot (Google のインデックス作成用クローラー) のみが従います。</li>
 <li><code>publisher</code>: この文書の発行者の名前です。</li>
 <li><code>robots</code>: 協力的なクローラー、つまり「ロボット」がページに対して使用すべき動作です。以下の値をカンマで区切ったリストです。
  <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">使用者</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td><code>index</code></td>
     <td>ロボットがこのページをインデックスすることを許可します (既定値)。</td>
     <td>すべて</td>
    </tr>
    <tr>
     <td><code>noindex</code></td>
     <td>ロボットにこのページをインデックスしないよう要求します。</td>
     <td>すべて</td>
    </tr>
    <tr>
     <td><code>follow</code></td>
     <td>ロボットがこのページ上のリンクをたどることを許可します (既定値)。</td>
     <td>すべて</td>
    </tr>
    <tr>
     <td><code>nofollow</code></td>
     <td>ロボットにこのページ上のリンクをたどらないよう要求します。</td>
     <td>すべて</td>
    </tr>
    <tr>
     <td><code>all</code></td>
     <td><code>index, follow</code> と同等です。</td>
     <td><a href="https://support.google.com/webmasters/answer/79812">Google</a></td>
    </tr>
    <tr>
     <td><code>none</code></td>
     <td><code>noindex, nofollow</code> と同等です。</td>
     <td><a href="https://support.google.com/webmasters/answer/79812">Google</a></td>
    </tr>
    <tr>
     <td><code>noarchive</code></td>
     <td>検索エンジンにこのページの内容をキャッシュしないよう要求します。</td>
     <td><a href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>, <a href="https://help.yahoo.com/kb/search-for-desktop/SLN2213.html">Yahoo</a>, <a 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>検索エンジンの結果でこのページの説明の表示を抑制します。</td>
     <td><a href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>, <a 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>このページをインデックスされた画像の参照ページとして表示しないよう要求します。</td>
     <td><a 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><code>noarchive</code> と同等です。</td>
     <td><a 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>協力的なロボットだけがこのルールに従っています。メールアドレスの自動収集プログラムを抑制できるとは期待しないでください。</li>
   <li>ロボットがこれらのルールを読むためには、ページにアクセスする必要があります。帯域幅の消費を防ぐには、 <em>{{Glossary("robots.txt")}}</em> ファイルを使用してください。</li>
   <li>ページを削除したい場合、 <code>noindex</code> で行うことができますが、ロボットがそのページに再びアクセスした後のことになります。 <code>robots.txt</code> ファイルが再訪問を妨害していないことを確認してください。</li>
   <li>値によっては互いに排他的なものがあります。例えば <code>index</code> と <code>noindex</code>、 <code>follow</code> と <code>nofollow</code> などです。このような場合、ロボットの動作は未定義であり、ロボット間で異なる可能性があります。</li>
   <li>Google、Yahoo、Bing など一部のクローラーロボットでは、 HTTP ヘッダーの X-Robots-Tag で提供された同じ値に対応しているものがあります。これにより、画像などの HTML 以外の文書でもこれらの規則を使用することができます。</li>
  </ul>
  </div>
 </li>
</ul>

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

<p>{{Specifications}}</p>

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

<p>{{Compat}}</p>