<meta>: 文書レベルメタデータ要素

HTML の <meta> 要素は、他のメタ関連要素 (<base>, <link>, <script>, <style>, <title>) で表すことができない任意のメタデータを提示します。

コンテンツカテゴリ メタデータコンテンツ。 itemprop 属性がある場合はフローコンテンツおよび記述コンテンツ。
許可されている内容 なし。これは空要素です。
タグの省略 空要素であるため開始タグは必須であり、終了タグは置いてはいけません。
許可されている親要素 <meta charset> および <meta http-equiv>: <head> 要素。http-equiv がエンコーディング宣言ではない場合は、<head> 要素内にある <noscript> 要素の内部にも配置できます。
許可されている ARIA ロール なし
DOM インターフェイス HTMLMetaElement

属性

この要素はグローバル属性を持ちます。

メモ: name 属性は <meta> 要素において特別な意味を持ちます。また、 itemprop 属性は、 <meta> 要素にすでに name, http-equiv, charset のいずれかがある場合は設定してはいけません。

charset
この属性は、ページで使用している文字エンコーディングを宣言します。この属性は 文字エンコーディングの標準 IANA MIME name のひとつであることが必要です。標準仕様では特定の文字エンコーディングを要求していませんが、以下の推奨事項があります。
  • UTF-8 を使うことを強く推奨します。
  • セキュリティ上のリスクを防ぐために、 ASCII との互換性がないエンコーディングを使用するべきではありません。その様な文字コードに対応していないブラウザーでは、有害なコンテンツを HTML として解釈する可能性があります。該当するものは、 JIS_C6226-1983, JIS_X0212-1990, HZ-GB-2312, JOHAB, ISO-2022 ファミリー, EBCDIC ファミリーなどです

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

  • CESU-8, UTF-7, BOCU-1, SCSU を使用してはいけません。これらのエンコーディングでクロスサイトスクリプティング攻撃が実証されています。
  • UTF-32 を使用すべきではありません。これは、 HTML5 のエンコーディングアルゴリズムで UTF-16 と区別できないものがあるからです。
メモ:
  • 文字化けやセキュリティホールの発生を避けるため、宣言した文字エンコーディングはページを保存した文字エンコーディングと一致しなければなりません。
  • エンコーディングを宣言する <meta> 要素は <head> 要素の内部かつ HTML の始めから 1024 バイト以内に配置しなければなりません。これは、ページの文字集合を選択するまでに始めの部分しか確認しないブラウザーがあるためです。
  • この <meta> 要素はブラウザーが提供する、ページの ページの文字セットを判断するアルゴリズム の一部でしかありません。特に、HTTP の Content-Type ヘッダーやバイトオーダーマークはこの要素より優先します。
  • この属性を使用して文字エンコーディングを定義することを強く推奨します。ページで文字エンコーディングを定義しない場合は UTF-7 fallback cross-scripting technique のような、ページの利用者を攻撃するクロスサイトスクリプティング手法が実現する可能性があります。
  • charset 属性を持つ <meta> 要素は、 HTML5 より前の <meta http-equiv="Content-Type" content="text/html; charset=IANAcharset"> (IANAcharset は、同様の charset 属性の値に対応します) と同義です。この構文はまだ許容されていますが、今後は推奨されません。
content
この属性は状況に応じて、http-equiv 属性または name 属性に関連付けられた値を持ちます。
http-equiv
プラグマディレクティブを定義します。属性名が http-equiv(alent) なのは、利用できる値のすべてが特定の HTTP ヘッダーの名前だからです。
  • content-language
    ページの既定の言語を定義します。これはすべての要素の lang 属性に置き換えられました。

    警告: この値は廃止されたため、使用しないでください。 <html> 要素で lang 属性を使用することを推奨します。

  • content-security-policy
    この値により、ページ作者がページのコンテンツポリシーを定義できます。いくつかの例外を除き、ポリシーはサーバーオリジンやスクリプトのエンドポイントの指定に関与します。これは、クロスサイトスクリプティング攻撃の対策になります。
  • content-type
    文書の MIME type を定義するもので、後に文字エンコーディングの定義が続きます。これは HTTP の content-type エンティティヘッダーフィールドと同じ構文に従いますが、 HTML ページ内にあるため text/html を除くほとんどの値は使用できません。従って、この content として有効な構文は文字列 'text/html' に、 '; charset=IANAcharset という構文による文字集合を続けたものになります。 IANAcharset は、IANA で定義 されている文字集合の preferred MIME name です。

    警告: この値は廃止されたので使用しないでください。 <meta> 要素の charset 属性を使用してください。

    メモ: XHTML や HTML5 の XHTML シリアライズにおいて、 <meta> は文書の型を変更できないので、 <meta> の MIME 型に XHTML の MIME 型を設定しないでください。

  • refresh
    これは以下の指示をします。
    • content 属性に正の整数が1つだけ含まれている場合は、ページを再読み込みするまでの秒数。
    • content 属性に正の整数と、その後に文字列 ';url=' と有効な URL がある場合は、別のページにリダイレクトするまでの秒数。
  • set-cookie
    ページの Cookie を定義します。属性の値は IETF の HTTP Cookie 仕様書で定義している構文に従わなければなりません。

    警告: この方法は廃止されたため、使用しないでください。代わりに HTTP ヘッダーの Set-Cookie を使用してください。すでに標準から削除され、すでに Firefox 68 および Chrome 65 のどちらも対応していません。

name

この属性は、文書レベルのメタデータの名前を定義します。 itemprop, http-equiv, charset 属性のいずれかが設定されている場合は設定するべきではありません。

このメタデータの名前は、 content 属性が持つ値と関連づけられます。 name 属性で使用できる値には以下のものがあります。

  • application-name は、ウェブページで実行するアプリケーションの名前を定義します。
    メモ:
    • ブラウザーは、これをアプリケーションの識別に使用することがあります。これは <title> 要素とは異なります。title 要素もアプリケーション名を持ちますが、文書の名前や状態といった特別な情報も含むことがあります。
    • 単純なウェブページで application-name を定義するべきではありません。
  • author は、文書の作者名を定義します。
  • description は、ページのコンテンツに関する簡潔で正確な概要を保持します。 Firefox や Opera など一部のブラウザーは、ページをブックマークに追加した際の既定の説明文として使用します。
  • generator は、ページを生成したソフトウェアの識別名を定義します。
  • keywords は、ページのコンテンツに関連する単語をカンマ区切りの文字列で保持します。
  • referrer は、この文書からリクエストを送信する場合に HTTP の Referer ヘッダーへ付加する内容を制御します。
    <meta name="referrer"> の content 属性の値
    no-referrer HTTP の Referer ヘッダーを送信しません。
    origin 文書のオリジンを送信します。
    no-referrer-when-downgrade 現在のページと同等の安全性の URL (https→https) にはリファラーとしてオリジンを送信しますが、安全性が低い URL (https→http) には送信しません。これは既定の動作です。
    origin-when-crossorigin 同一オリジンへのリクエストでは URL 全体（引数を除く）を送信しますが、他の場合はオリジンのみ送信します。
    same-origin 同一オリジンにはリファラーを送信しますが、オリジン間リクエストにはリファラー情報を含めません。
    strict-origin 安全性が同等とみられる宛先 (HTTPS->HTTPS) に対しては、リファラーとして文書のオリジンのみを送信しますが、安全性が劣る宛先 (HTTPS->HTTP) には送信しません。
    strict-origin-when-cross-origin 文書と同一のオリジンへのリクエストを行う際には完全な URL を送信し、安全性が同等とみられる宛先 (HTTPS->HTTPS) に対しては、リファラーとして文書のオリジンのみを送信し、安全性が劣る宛先 (HTTPS->HTTP) にはヘッダーを送信しません。
    unsafe-URL 同一オリジンおよびオリジン間のリクエストで URL 全体 (パラメーターは除く) を送信します。

    メモ:

    • ブラウザーによっては、 referrer に非推奨の値である always, default, never に対応していることがあります。
    • (document.write や appendChild により) 動的に <meta name="referrer"> を挿入すると、リファラーを送信するかの決定権を持たないものになります。
    • 競合するポリシーをいくつか定義すると、No-referrer ポリシーが適用されます。
  • theme-color はページや周囲のユーザーインターフェイスの表示をカスタマイズするために、ユーザーエージェントが使用する推奨される色を示します。 content 属性は有効な CSS の <color> が入ります。
  • color-scheme:

    文書が互換性を持つ1つ以上の色系統を指定します。ブラウザーはこの情報をユーザーのブラウザーや端末の設定と組み合わせて、背景・前景からフォームコントロールやスクロールバーまですべての色を作成するために使用します。 <meta name="color-scheme"> の主な使用法としては、明色モードや暖色モードの互換性と優先順位を示すというものがあります。

    color-scheme の content プロパティの値は以下のうちの一つになります。

    normal
    文書が色系統を意識しておらず、単に既定のカラーパレットを使用して描画されます。
    [light | dark]+
    文書が対応している1つ以上の色系統です。同じ色系統を2回以上指定した場合は、1回だけ指定した場合と同じ効果になります。複数の色系統を指定すると、最初の色系統が文書で推奨されますが、ユーザーの好みによって2つ目の色系統を使用することができます。
    only light
    この文書が明色モード、つまり明色の背景色に暗色の前景色の組み合わせのみに対応していることを示します。仕様書によれば、 only dark は暗色モードに対応していない文書に強制すると、内容が読めなくなる可能性があるので有効ではありません。主要なブラウザーはすべて、設定がない限りは明色モードです。

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

    <meta name="color-scheme" content="dark light">

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

この属性では、 WHATWG Wiki の MetaExtensions ページで定義されている拡張リストの値も使用できます。まだ正式には承諾されていませんが、一般的に使用される名前があります。

  • creator は、文書の制作者を定義します。これは組織名にできることに注意してください。複数の制作者がいる場合は、 <meta> 要素を複数使用すべきです。
  • googlebot は robots と同義ですが、 Google のインデックス作成クローラーである Googlebot だけが従います。
  • publisher は、文書の発行者の名前を定義します。
  • robots は、協力的なクローラーあるいは "robot" がページ上で行うべき動作を定義します。これは、以下のリストにある値をコンマ区切りで並べます:
    <meta name="robots"> の content の値
    値 説明 使用対象
    index robot にページのインデックス作成を許可する (既定値) すべて
    noindex ページのインデック作成を行わないことを robot に要求する すべて
    follow robot がページ上のリンクをたどることを許可する (既定値) すべて
    nofollow ページ上のリンクをたどらないことを robot に要求する すべて
    none noindex, nofollow と同義 Google
    noodp Open Directory Project に説明文がある場合、検索結果のページでその説明文をサイトの説明として使用しないようにする

    Google, Yahoo, Bing
    noarchive ページのコンテンツをキャッシュしないことを検索エンジンに要求する。 Google, Yahoo, Bing
    nosnippet 検索結果のページでページの説明を表示しないようにする。 Google, Bing
    noimageindex インデックス登録された画像の参照元としてページを表示しないように要求する Google
    nocache noarchive と同義 Bing
    メモ:
    • 協力的なロボットしかこれらの規則には従いません。電子メールを収集するようなものを寄せつけないようにするとは考えないでください。
    • これらの規則を読み取るため、ロボットがページにアクセスする必要があります。ネットワーク帯域の消費を抑えたい場合は、 robots.txt ファイルを使用してください。
    • インデックスからページを削除したい場合は、meta を noindex に変更すれば実現できますが、robot が再びページを訪れたときになります。robots.txt ファイルが再訪問を妨げないようにしてください。一部の検索エンジンは、ページを早急に削除するための開発者ツールを用意しています。
    • index と noindex、または follow と nofollow など、互いに排他的な値があります。同時使用した場合の robot の動作は未定義であり、robot により大きく異なるかもしれません。
    • Google、Yahoo、Bing など一部の検索エンジンのクローラー robot は、 HTTP の X-Robots-Tag ヘッダーで同じ値をサポートしています。これにより、画像など HTML 文書以外でも規則を使用できます。
  • slurp は robots と同義ですが、 Yahoo 検索のクローラーである Slurp のみが従います。
  • viewport は、ビューポートの初期サイズに関する助言を与えます。モバイル端末のみで使用されます。
    <meta name="viewport"> の content の値
    値 設定可能な値 説明
    width 正の整数または文字列 device-width ウェブサイトを描画したいビューポートの幅をピクセル数で定義します。
    height 正の整数またはテキスト device-height ビューポートの高さを定義します。どのブラウザーでも使用されていません。
    initial-scale 0.0 から 10.0 までの、正の数値 デバイスの幅 (ポートレートモードでの device-width またはランドスケープモードでの device-height) とビューポートの寸法との比率を定義します。
    maximum-scale 0.0 から 10.0 までの、正の数値 ズームの最大値を定義します。この値は minimum-scale と同じまたはより大きくしなければなりません。そうではないときの動作は未定義です。ブラウザーの設定でこの規則を無視できます。また、iOS 10 以降は既定で無視します。
    minimum-scale 0.0 から 10.0 までの、正の数値 ズームの最小値を定義します。この値は maximum-scale と同じまたはより小さくしなければなりません。そうではないときの動作は未定義です。ブラウザーの設定でこの規則を無視できます。また、iOS 10 以降は既定で無視します。
    user-scalable yes または no no を設定すると、ユーザーはページのズームができなくなります。既定値は yes です。ブラウザーの設定でこの規則を無視できます。また、iOS 10 以降は既定で無視します。
    仕様書 状態 備考
    CSS Device Adaptation
    <meta name="viewport"> の定義    		 草案 Viewport META 要素について、非規範的な説明を掲載
    @viewport もご覧ください。
    メモ:
    • この属性は標準化されていませんが、事実上優勢であるためほとんどのモバイルブラウザーで使用されています。
    • 既定値は端末やブラウザーにより異なる可能性があります。
    • モバイル版 Firefox におけるこの宣言について詳しく知るには、こちらの記事をご覧ください。
scheme
この属性は、メタデータを説明するスキーマを定義します。スキーマは、フォーマットなど content の値を正しく解釈するように導くコンテキストです。

メモ: この属性は廃止されたため使用しないでください。実際の使用例がなかったため、代替策はありません。

メモ

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

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

例

<meta charset="utf-8">

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

アクセシビリティの考慮事項

コンテンツの更新

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

ビューポートの拡大縮小

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

仕様書

仕様書 状態 備考
Referrer Policy
<meta name="referrer"> の定義		 勧告候補 <meta name="referrer"> の値やセマンティクスを定義
HTML Living Standard
<meta> の定義		 現行の標準 itemprop 属性を追加
HTML5
<meta> の定義		 勧告 charset 属性を追加
HTML 4.01 Specification
<meta> の定義		 勧告

ブラウザーの互換性

以下の情報は MDN の Github (https://github.com/mdn/browser-compat-data) から取得したものです。

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
metaChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
charsetChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
contentChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
http-equivChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
nameChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報