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 です。メモ: XHTML や HTML5 の XHTML シリアライズにおいて、
<meta>
は文書の型を変更できないので、<meta>
の MIME 型に XHTML の MIME 型を設定しないでください。refresh
これは以下の指示をします。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 ポリシーが適用されます。
- ブラウザーによっては、 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 に説明文がある場合、検索結果のページでその説明文をサイトの説明として使用しないようにする 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> の定義 |
勧告 |
ブラウザーの互換性
BCD tables only load in the browser
以下の情報は MDN の Github (https://github.com/mdn/browser-compat-data) から取得したものです。