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

---
title: '<meta>: 文書レベルメタデータ要素'
slug: Web/HTML/Element/meta
tags:
  - HTML
  - HTML マイクロデータ
  - HTML 文書メタデータ
  - 'HTML:フローコンテンツ'
  - 'HTML:メタデータコンテンツ'
  - 'HTML:記述コンテンツ'
  - Reference
  - ウェブ
  - メタデータ
  - リファレンス
  - 文書
  - 要素
translation_of: Web/HTML/Element/meta
---
<div>{{HTMLRef}}</div>

<p><strong>HTML の <code>&lt;meta&gt;</code> 要素</strong>は、他のメタ関連要素 ({{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, {{HTMLElement("title")}}) で表すことができない任意の{{Glossary("Metadata","メタデータ")}}を提示します。</p>

<table class="properties">
 <tbody>
  <tr>
   <th><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th>
   <td>メタデータコンテンツ。 {{htmlattrxref("itemprop")}} 属性がある場合は<a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>および<a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>。</td>
  </tr>
  <tr>
   <th>許可されている内容</th>
   <td>なし。これは{{Glossary("empty element", "空要素")}}です。</td>
  </tr>
  <tr>
   <th>タグの省略</th>
   <td>空要素であるため開始タグは必須であり、終了タグは置いてはいけません。</td>
  </tr>
  <tr>
   <th>許可されている親要素</th>
   <td><code>&lt;meta charset&gt;</code> および <code>&lt;meta http-equiv&gt;</code>: {{HTMLElement("head")}} 要素。{{htmlattrxref("http-equiv", "meta")}} がエンコーディング宣言ではない場合は、{{HTMLElement("head")}} 要素内にある {{HTMLElement("noscript")}} 要素の内部にも配置できます。</td>
  </tr>
  <tr>
   <th scope="row">許可されている ARIA ロール</th>
   <td>なし</td>
  </tr>
  <tr>
   <th>DOM インターフェイス</th>
   <td>{{domxref("HTMLMetaElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes" name="Attributes">属性</h2>

<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">グローバル属性</a>を持ちます。</p>

<div class="note">
<p><strong>メモ:</strong> {{htmlattrxref("name", "meta")}} 属性は {{HTMLElement("meta")}} 要素において特別な意味を持ちます。また、 {{htmlattrxref("itemprop")}} 属性は、 <code>&lt;meta&gt;</code> 要素にすでに {{htmlattrxref("name", "meta")}}, {{htmlattrxref("http-equiv", "meta")}}, {{htmlattrxref("charset", "meta")}} のいずれかがある場合は設定してはいけません。</p>
</div>

<dl>
 <dt>{{htmlattrdef("charset")}}</dt>
 <dd>この属性は、ページで使用している文字エンコーディングを宣言します。この属性は <a class="external" href="https://www.iana.org/assignments/character-sets">文字エンコーディングの標準 IANA MIME name</a> のひとつであることが必要です。標準仕様では特定の文字エンコーディングを要求していませんが、以下の推奨事項があります。
 <ul>
  <li><a href="/ja/docs/Glossary/UTF-8"><code>UTF-8</code></a> を使うことを強く推奨します。</li>
  <li>セキュリティ上のリスクを防ぐために、 ASCII との互換性がないエンコーディングを使用するべきではありません。その様な文字コードに対応していないブラウザーでは、有害なコンテンツを HTML として解釈する可能性があります。該当するものは、 <code>JIS_C6226-1983</code>, <code>JIS_X0212-1990</code>, <code>HZ-GB-2312</code>, <code>JOHAB</code>, ISO-2022 ファミリー, EBCDIC ファミリーなどです</li>
 </ul>

 <div class="note">
 <p><strong>メモ:</strong> ASCII と互換性がないエンコーディングとは、8ビットのコードポイント <code>0x20</code> から <code>0x7E</code> が Unicode のコードポイント <code>0x0020</code> から <code>0x007E</code> に対応していないエンコーディングです。</p>
 </div>

 <div class="warning">
 <ul>
  <li><code>CESU-8</code>, <code>UTF-7</code>, <code>BOCU-1</code>, <code>SCSU</code> を使用しては<strong>いけません</strong>。これらのエンコーディングで<a href="/ja/docs/Glossary/Cross-site_scripting">クロスサイトスクリプティング</a>攻撃が実証されています。</li>
  <li><code>UTF-32</code> を使用すべきではありません。これは、 HTML5 のエンコーディングアルゴリズムで <code>UTF-16</code> と区別できないものがあるからです。</li>
 </ul>
 </div>

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

 <ul>
  <li>文字化けやセキュリティホールの発生を避けるため、宣言した文字エンコーディングはページを保存した文字エンコーディングと一致しなければなりません。</li>
  <li>エンコーディングを宣言する {{HTMLElement("meta")}} 要素は {{HTMLElement("head")}} 要素の内部かつ HTML の<strong>始めから 1024 バイト以内</strong>に配置しなければなりません。これは、ページの文字集合を選択するまでに始めの部分しか確認しないブラウザーがあるためです。</li>
  <li>この {{HTMLElement("meta")}} 要素はブラウザーが提供する、ページの <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html#encoding-sniffing-algorithm" title="Algorithm charset page">ページの文字セットを判断するアルゴリズム</a> の一部でしかありません。特に、HTTP の {{HTTPHeader("Content-Type")}} ヘッダーや{{Glossary("Byte-Order Mark","バイトオーダーマーク")}}はこの要素より優先します。</li>
  <li>この属性を使用して文字エンコーディングを定義することを強く推奨します。ページで文字エンコーディングを定義しない場合は <a class="external" href="https://code.google.com/p/doctype-mirror/wiki/ArticleUtf7"><code>UTF-7</code> fallback cross-scripting technique</a> のような、ページの利用者を攻撃するクロスサイトスクリプティング手法が実現する可能性があります。</li>
  <li><code>charset</code> 属性を持つ {{HTMLElement("meta")}} 要素は、 HTML5 より前の <code>&lt;meta http-equiv="Content-Type" content="text/html; charset=<em>IANAcharset</em>"&gt;</code> (<em><code>IANAcharset</code></em> は、同様の {{htmlattrxref("charset", "meta")}} 属性の値に対応します) と同義です。この構文はまだ許容されていますが、今後は推奨されません。</li>
 </ul>
 </div>
 </dd>
 <dt>{{htmlattrdef("content")}}</dt>
 <dd>この属性は状況に応じて、{{htmlattrxref("http-equiv", "meta")}} 属性または {{htmlattrxref("name", "meta")}} 属性に関連付けられた値を持ちます。</dd>
 <dt>{{htmlattrdef("http-equiv")}}</dt>
 <dd>プラグマディレクティブを定義します。属性名が <code><strong>http-equiv</strong>(alent)</code> なのは、利用できる値のすべてが特定の HTTP ヘッダーの名前だからです。
 <ul>
  <li><code>content-language</code> {{obsolete_inline}}<br>
   ページの既定の言語を定義します。これはすべての要素の <a href="/ja/docs/Web/HTML/Global_attributes/lang">lang</a> 属性に置き換えられました。
   <div class="warning">
   <p><strong>警告:</strong> この値は廃止されたため、使用しないでください。 {{HTMLElement("html")}} 要素で <code>lang</code> 属性を使用することを推奨します。</p>
   </div>
  </li>
  <li><code>content-security-policy</code><br>
   この値により、ページ作者がページの<a href="/ja/docs/Web/Security/CSP/CSP_policy_directives">コンテンツポリシー</a>を定義できます。いくつかの例外を除き、ポリシーはサーバーオリジンやスクリプトのエンドポイントの指定に関与します。これは、クロスサイトスクリプティング攻撃の対策になります。</li>
  <li><code>content-type</code> {{obsolete_inline}}<br>
   文書の <a href="/ja/docs/Glossary/MIME_type">MIME type</a> を定義するもので、後に文字エンコーディングの定義が続きます。これは HTTP の <code>content-type</code> エンティティヘッダーフィールドと同じ構文に従いますが、 HTML ページ内にあるため <code>text/html</code> を除くほとんどの値は使用できません。従って、この <code>content</code> として有効な構文は文字列 '<code>text/html</code>' に、 '<code>; charset=<em>IANAcharset</em></code> という構文による文字集合を続けたものになります。 <code>IANAcharset</code> は、<a class="external" href="https://www.iana.org/assignments/character-sets">IANA で定義</a> されている文字集合の <em>preferred MIME name</em> です。
   <div class="warning">
   <p><strong>警告:</strong> この値は廃止されたので使用しないでください。 {{HTMLElement("meta")}} 要素の {{htmlattrxref("charset", "meta")}} 属性を使用してください。</p>
   </div>

   <div class="note">
   <p><strong>メモ:</strong> XHTML や HTML5 の XHTML シリアライズにおいて、 {{HTMLElement("meta")}} は文書の型を変更できないので、 <code>&lt;meta&gt;</code> の MIME 型に XHTML の MIME 型を設定しないでください。</p>
   </div>
  </li>
  <li><code>refresh</code><br>
   これは以下の指示をします。
   <ul>
    <li>{{htmlattrxref("content", "meta")}} 属性に正の整数が1つだけ含まれている場合は、ページを再読み込みするまでの秒数。</li>
    <li>{{htmlattrxref("content", "meta")}} 属性に正の整数と、その後に文字列 '<code>;url=</code>' と有効な URL がある場合は、別のページにリダイレクトするまでの秒数。</li>
   </ul>
  </li>
  <li><code>set-cookie</code> {{non-standard_inline}} {{obsolete_inline}}<br>
   ページの <a href="/ja/docs/cookie">Cookie</a> を定義します。属性の値は <a class="external" href="https://tools.ietf.org/html/draft-ietf-httpstate-cookie-14">IETF の HTTP Cookie 仕様書</a>で定義している構文に従わなければなりません。
   <div class="warning">
   <p><strong>警告:</strong> この方法は廃止されたため、使用しないでください。代わりに HTTP ヘッダーの {{HTTPHeader("Set-Cookie")}} を使用してください。すでに標準から削除され、すでに <a href="https://www.fxsitecompat.dev/en-CA/docs/2019/setting-cookies-with-meta-http-equiv-is-no-longer-allowed/">Firefox 68</a> および <a href="https://www.chromestatus.com/feature/6170540112871424">Chrome 65</a> のどちらも対応していません。</p>
   </div>
  </li>
 </ul>
 </dd>
 <dt>{{htmlattrdef("name")}}</dt>
 <dd>
 <p>この属性は、文書レベルのメタデータの名前を定義します。 {{htmlattrxref("itemprop")}}, {{htmlattrxref("http-equiv", "meta")}}, {{htmlattrxref("charset", "meta")}} 属性のいずれかが設定されている場合は設定するべきではありません。</p>

 <p>このメタデータの名前は、 {{htmlattrxref("content", "meta")}} 属性が持つ値と関連づけられます。 name 属性で使用できる値には以下のものがあります。</p>

 <ul>
  <li><code>application-name</code> は、ウェブページで実行するアプリケーションの名前を定義します。

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

   <ul>
    <li>ブラウザーは、これをアプリケーションの識別に使用することがあります。これは {{HTMLElement("title")}} 要素とは異なります。title 要素もアプリケーション名を持ちますが、文書の名前や状態といった特別な情報も含むことがあります。</li>
    <li>単純なウェブページで application-name を定義するべきではありません。</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> {{experimental_inline}} は、この文書からリクエストを送信する場合に 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 の <code>Referer</code> ヘッダーを送信しません。</td>
     </tr>
     <tr>
      <td><code>origin</code></td>
      <td>文書の<a href="/ja/docs/Glossary/Origin">オリジン</a>を送信します。</td>
     </tr>
     <tr>
      <td><code>no-referrer-when-downgrade</code></td>
      <td>現在のページと同等の安全性の URL (https→https) にはリファラーとして<a href="/ja/docs/Glossary/Origin">オリジン</a>を送信しますが、安全性が低い URL (https→http) には送信しません。これは既定の動作です。</td>
     </tr>
     <tr>
      <td><code>origin-when-crossorigin</code></td>
      <td>同一オリジンへのリクエストでは URL 全体（引数を除く）を送信しますが、他の場合は<a href="/ja/docs/Glossary/Origin">オリジン</a>のみ送信します。</td>
     </tr>
     <tr>
      <td><code>same-origin</code></td>
      <td><a href="/ja/docs/Web/Security/Same-origin_policy">同一オリジン</a>にはリファラーを送信しますが、オリジン間リクエストにはリファラー情報を含めません。</td>
     </tr>
     <tr>
      <td><code>strict-origin</code></td>
      <td>安全性が同等とみられる宛先 (HTTPS-&gt;HTTPS) に対しては、リファラーとして文書のオリジンのみを送信しますが、安全性が劣る宛先 (HTTPS-&gt;HTTP) には送信しません。</td>
     </tr>
     <tr>
      <td><code>strict-origin-when-cross-origin</code></td>
      <td>文書と同一のオリジンへのリクエストを行う際には完全な URL を送信し、安全性が同等とみられる宛先 (HTTPS-&gt;HTTPS) に対しては、リファラーとして文書のオリジンのみを送信し、安全性が劣る宛先 (HTTPS-&gt;HTTP) にはヘッダーを送信しません。</td>
     </tr>
     <tr>
      <td><code>unsafe-URL</code></td>
      <td>同一オリジンおよびオリジン間のリクエストで URL 全体 (パラメーターは除く) を送信します。</td>
     </tr>
    </tbody>
   </table>

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

   <ul>
    <li>ブラウザーによっては、 referrer に非推奨の値である <code>always</code>, <code>default</code>, <code>never</code> に対応していることがあります。</li>
    <li>(<a href="/ja/docs/Web/API/Document/write"><code>document.write</code></a> や <a href="/ja/docs/Web/API/Node/appendChild"><code>appendChild</code></a> により) 動的に <code>&lt;meta name="referrer"&gt;</code> を挿入すると、リファラーを送信するかの決定権を持たないものになります。</li>
    <li>競合するポリシーをいくつか定義すると、No-referrer ポリシーが適用されます。</li>
   </ul>
   </div>
  </li>
  <li><code>theme-color</code> はページや周囲のユーザーインターフェイスの表示をカスタマイズするために、ユーザーエージェントが使用する推奨される色を示します。 <code>content</code> 属性は有効な CSS の <code><a href="/ja/docs/Web/CSS/color_value">&lt;color&gt;</a></code> が入ります。</li>
  <li><code>color-scheme</code>:
   <p>文書が互換性を持つ1つ以上の色系統を指定します。ブラウザーはこの情報をユーザーのブラウザーや端末の設定と組み合わせて、背景・前景からフォームコントロールやスクロールバーまですべての色を作成するために使用します。 <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> は暗色モードに対応していない文書に強制すると、内容が読めなくなる可能性があるので<em>有効ではありません</em>。主要なブラウザーはすべて、設定がない限りは明色モードです。</dd>
   </dl>

   <p>例えば、文書で暗色モードを推奨しているが、明色モードでも機能する場合は次のようにします。</p>

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

   <p>これは CSS の {{cssxref("color-scheme")}} プロパティでそれぞれの要素に推奨または受付可能な色系統を指定するのと同じ方法で文書レベルに動作します。スタイルを現在の色系統に合わせるには、 CSS メディア特性の {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} を使用します。</p>
  </li>
 </ul>

 <p>この属性では、 <a class="external" 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> と同義ですが、 Google のインデックス作成クローラーである Googlebot だけが従います。</li>
  <li><code>publisher</code> は、文書の発行者の名前を定義します。</li>
  <li><code>robots</code> は、協力的なクローラーあるいは "robot" がページ上で行うべき動作を定義します。これは、以下のリストにある値をコンマ区切りで並べます:
   <table class="standard-table">
    <caption><code>&lt;meta name="robots"&gt;</code> の content の値</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>robot にページのインデックス作成を許可する (既定値)</td>
      <td>すべて</td>
     </tr>
     <tr>
      <td><code>noindex</code></td>
      <td>ページのインデック作成を行わないことを robot に要求する</td>
      <td>すべて</td>
     </tr>
     <tr>
      <td><code>follow</code></td>
      <td>robot がページ上のリンクをたどることを許可する (既定値)</td>
      <td>すべて</td>
     </tr>
     <tr>
      <td><code>nofollow</code></td>
      <td>ページ上のリンクをたどらないことを robot に要求する</td>
      <td>すべて</td>
     </tr>
     <tr>
      <td><code>none</code></td>
      <td><code>noindex, nofollow</code> と同義</td>
      <td><a class="external" href="https://support.google.com/webmasters/answer/79812">Google</a></td>
     </tr>
     <tr>
      <td><code>noodp</code></td>
      <td><a class="external" href="https://www.dmoz-odp.org/">Open Directory Project</a> に説明文がある場合、検索結果のページでその説明文をサイトの説明として使用しないようにする</td>
      <td>
       <p><a class="external" href="https://support.google.com/webmasters/answer/35624#nodmoz">Google</a>, <a class="external" href="https://help.yahoo.com/kb/search-for-desktop/meta-tags-robotstxt-yahoo-search-sln2213.html#cont5">Yahoo</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></p>
      </td>
     </tr>
     <tr>
      <td><code>noarchive</code></td>
      <td>ページのコンテンツをキャッシュしないことを検索エンジンに要求する。</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>検索結果のページでページの説明を表示しないようにする。</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>インデックス登録された画像の参照元としてページを表示しないように要求する</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><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>メモ:</strong>

   <ul>
    <li>協力的なロボットしかこれらの規則には従いません。電子メールを収集するようなものを寄せつけないようにするとは考えないでください。</li>
    <li>これらの規則を読み取るため、ロボットがページにアクセスする必要があります。ネットワーク帯域の消費を抑えたい場合は、 <em>{{Glossary("robots.txt")}}</em> ファイルを使用してください。</li>
    <li>インデックスからページを削除したい場合は、meta を <code>noindex</code> に変更すれば実現できますが、robot が再びページを訪れたときになります。<code>robots.txt</code> ファイルが再訪問を妨げないようにしてください。一部の検索エンジンは、ページを早急に削除するための開発者ツールを用意しています。</li>
    <li><code>index</code> と <code>noindex</code>、または <code>follow</code> と <code>nofollow</code> など、互いに排他的な値があります。同時使用した場合の robot の動作は未定義であり、robot により大きく異なるかもしれません。</li>
    <li>Google、Yahoo、Bing など一部の検索エンジンのクローラー robot は、 HTTP の <code>X-Robots-Tag</code> ヘッダーで同じ値をサポートしています。これにより、画像など HTML 文書以外でも規則を使用できます。</li>
   </ul>
   </div>
  </li>
  <li><code>slurp</code> は <code>robots</code> と同義ですが、 Yahoo 検索のクローラーである Slurp のみが従います。</li>
  <li><code>viewport</code> は、{{glossary("viewport", "ビューポート")}}の初期サイズに関する助言を与えます。モバイル端末のみで使用されます。
   <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>
    </tbody>
   </table>

   <table class="standard-table">
    <thead>
     <tr>
      <th scope="col">仕様書</th>
      <th scope="col">状態</th>
      <th scope="col">備考</th>
     </tr>
    </thead>
    <tbody>
     <tr>
      <td>{{SpecName('CSS3 Device', '#viewport-meta', '&lt;meta name="viewport"&gt;')}}</td>
      <td>{{Spec2('CSS3 Device')}}</td>
      <td>Viewport META 要素について、非規範的な説明を掲載</td>
     </tr>
    </tbody>
   </table>

   <div>{{cssxref("@viewport")}} もご覧ください。</div>

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

   <ul>
    <li>この属性は標準化されていませんが、事実上優勢であるためほとんどのモバイルブラウザーで使用されています。</li>
    <li>既定値は端末やブラウザーにより異なる可能性があります。</li>
    <li>モバイル版 Firefox におけるこの宣言について詳しく知るには、<a href="/ja/docs/Mobile/Viewport_meta_tag" title="Mobile/Viewport meta tag">こちらの記事</a>をご覧ください。</li>
   </ul>
   </div>
  </li>
 </ul>
 </dd>
 <dt>{{htmlattrdef("scheme")}} {{obsolete_inline}}</dt>
 <dd>この属性は、メタデータを説明するスキーマを定義します。スキーマは、フォーマットなど {{htmlattrxref("content", "meta")}} の値を正しく解釈するように導くコンテキストです。
 <div class="warning">
 <p><strong>メモ:</strong> この属性は廃止されたため使用しないでください。実際の使用例がなかったため、代替策はありません。</p>
 </div>
 </dd>
</dl>

<h2 id="Notes" name="Notes">メモ</h2>

<p>属性の組み合わせに応じて、メタデータの種類は以下のいずれかになります。</p>

<ul>
 <li>{{htmlattrxref("name", "meta")}} を設定すると、<em>文書レベルのメタデータ</em>になり、ページ全体に適用されます。</li>
 <li>{{htmlattrxref("http-equiv", "meta")}} を設定すると、<em>プラグマディレクティブ</em>になります。どのようにウェブページが提供されるかについて、通常ウェブサーバーから与えられる情報です。</li>
 <li>{{htmlattrxref("charset", "meta")}} を設定すると、<em>文字集合宣言</em>になります。ウェブページで使用する文字エンコーディングです。</li>
 <li>{{htmlattrxref("itemprop")}} を設定すると、<em>ユーザー定義メタデータ</em>になります。ユーザー固有のメタデータの意味付けとして、ユーザーエージェントからは透過的になります。{{experimental_inline}}</li>
</ul>

<h2 id="Examples" name="Examples">例</h2>

<pre class="brush: html">&lt;meta charset="utf-8"&gt;

&lt;!-- 3秒後にページをリダイレクト --&gt;
&lt;meta http-equiv="refresh" content="3;url=https://www.mozilla.org"&gt;
</pre>

<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>

<h3 id="Refreshing_content" name="Refreshing_content">コンテンツの更新</h3>

<p><code>refresh</code> の値が設定されたページには、時間が短すぎるというリスクがあります。読み上げソフトのような支援技術を使用して操作している人は、全文を読むことができず、自動的にリダイレクトされる前のページの内容を理解できない可能性があります。いきなりで予告なしのページコンテンツの更新は、弱視の人々を惑わせる可能性もあります。</p>

<ul>
 <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_—_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN "WCAG を理解する ― ガイドライン 2.1 の解説"</a></li>
 <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">MDN "WCAG を理解する ― ガイドライン 3.1 の解説"</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html">Understanding Success Criterion 2.2.1 | W3C Understanding WCAG 2.0</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html">Understanding Success Criterion 2.2.4 | W3C Understanding WCAG 2.0</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-no-extreme-changes-context.html">Understanding Success Criterion 3.2.5 | W3C Understanding WCAG 2.0</a></li>
</ul>

<h3 id="Viewport_scaling" name="Viewport_scaling">ビューポートの拡大縮小</h3>

<p><code>user-scalable</code> の値を <code>no</code> に設定してズーム機能を無効にすると、弱視の人々がページのコンテンツを読んだり理解したりすることを妨げます。</p>

<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>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-meta', '&lt;meta name="referrer"&gt;')}}</td>
   <td>{{Spec2('Referrer Policy')}}</td>
   <td><code>&lt;meta name="referrer"&gt;</code> の値やセマンティクスを定義</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-meta-element', '&lt;meta&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td><code>itemprop</code> 属性を追加</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-meta-element', '&lt;meta&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td><code>charset</code> 属性を追加</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.4.2', '&lt;meta&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

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

<p>以下の情報は MDN の Github (<a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>) から取得したものです。</p>

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

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

<ul>
 <li>他のメタデータを持つ要素: {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("link")}}, {{HTMLElement("style")}},{{HTMLElement("title")}}</li>
</ul>