HTML5

META 要素

name 属性

 編集:2022.09.14 by T.A.

メタ データ名。

name 属性を持つ場合、文書のメタ データを設定する。文書のメタ データは、名前と値のペアの観点から表される。META 要素の name 属性が名前を与え、同じ要素の content 属性が値を与える。名前はメタ データのどの側面を設定するかを指定する。META要素がcontent属性を持たない場合、メタデータの名前と値のペアの値部分は、空文字列である。

名前は大文字・小文字を区別せず、かつ ASCII 大文字・小文字を区別しない方法で比較されなければならない。

name 属性のキーワード:

キーワード 備考
application-name ページが表すウェブ アプリケーションの名前。
author ページ著者のうちの一人の名前。
color-scheme ユーザー エージェントが希望のカラー スキームでページの背景をすぐにレンダリングするのを支援する。
description ページを説明する自由形式の文字列。
generator このページを生成したソフトウェアの識別子です。
keywords ページに関連するキーワード。
referrer 文書のデフォルトのリファラー ポリシーを定義する。
theme-color ユーザー エージェントがページや周囲のユーザー インターフェイスのの表示をカスタマイズするために使用すべき提案される色を定義する。
CSS Device Adaptation 仕様書:
キーワード 備考
viewport このビューポートの初期の寸法の大きさについてのヒントを指定します。モバイル端末でのみ使用されます。
: 一部
キーワード 備考
creator この文書の作成者の名前で、組織や機関などです。複数ある場合は、複数の <META> 要素を使用する必要があります。
googlebot robots と同様ですが、Googlebot(Google のインデックス作成用クローラー)のみが従います。
publisher この文書の発行者の名前です。
robots 協力的なクローラー、つまり「ロボット」がページに対して使用すべき動作です。
各name属性
application-name

値(content属性)は、ページが表すウェブ アプリケーションの名前を与える短い自由形式の文字列でなければならない。ページがウェブ アプリケーションでない場合、application-name メタ データ名を使用してはならない。それぞれの名前の言語を指定するlang属性を使用することで、ウェブ アプリケーション名の翻訳は与えられてもよい。

与えられる言語をもつ複数の META 要素が存在してはならず、かつ name 属性値が文書ごとに値 application-name と ASCII 大文字・小文字不区別で一致する。

タイトルはステータス メッセージを含むかもしれず、アプリケーションの名前であること代わりに特定の時点でページの状態に関連かもしれないので、ユーザー エージェントは、ページの TITLE 要素に優先して UI でアプリケーション名を使用してもよい。

指定された言語の順序付きのリスト(たとえばイギリス英語、アメリカ英語、英語)を使用するためにアプリケーション名を検索するには、ユーザー エージェントは次の手順を実行しなければならない:

¶省く

author

値は、ページ著者のうちの一人の名前を与える、自由形式の文字列でなければならない。

color-scheme

ユーザー エージェントが(ページ内のすべての CSS が読み込まれるのを待つのではなく)希望のカラー スキームでページの背景をすぐにレンダリングするのを支援するために、META 要素で 'color-scheme' 値を提供できる。

値は、CSS 'color-scheme' プロパティ値の構文と一致する文字列でなければならず、以下で説明するように、文書ルート要素の color-scheme 宣言とともにカスケードされる。

文書で color-scheme に ASCII 大文字・小文字不区別一致で設定される name 属性値をもつ複数の META 要素が存在してはならない。

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

次の宣言は、ページが暗い背景色と明るい前景色のカラー スキームを認識して、処理できることを示す:

<META name="color-scheme" content="dark">

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

description

値は、ページを説明する自由形式の文字列でなければならない。たとえば検索エンジン内など、値はページのディレクトリーで使用するために適切なものでなければならない。name 属性値が文書ごとの description に ASCII 大文字・小文字不区別で一致する場合、複数のMETA要素が存在してはならない。

generator

値は、文書を生成するために使用されるソフトウェア パッケージの 1 つを識別する自由形式の文字列でなければならない。この値は、たとえばマークアップがテキスト エディターでユーザーによって記述されたページのように、マークアップがソフトウェアによって生成されないページで使用してはならない。

"Frontweaver" と呼ばれるツールは、ページ生成のために使用されるツールとして自分自身を識別するために、ページのHEAD要素内にその出力で含むかもしれない:

<META name=generator content="Frontweaver 8.2">
keywords

値は、それぞれがページに関連するキーワードである、コンマ区切りトークンの集合でなければならない。

イギリスの高速道路上の書体に関するこのページは、ユーザーがページを検索するために使用するかもしれないキーワードを指定するMETA要素を使用している:

<!DOCTYPE HTML>
<HTML lang="en-GB">
 <HEAD>
  <TITLE>Typefaces on UK motorways</TITLE>
  <META name="keywords" content="british,type face,font,fonts,highway,highways">
 </HEAD>
 <BODY>
  ...
referrer

値(content属性)は、文書のデフォルトのを定義する、リファラー ポリシーでなければならない。A

値と意味;
no-referrer
HTTP の Referer ヘッダーを送信しません。
origin
文書のオリジンを送信します。
no-referrer-when-downgrade
現在のページと同等の安全性の URL([HTTP/HTTPS]→HTTPS) にはリファラーとして URL 全体を送信しますが、安全性が低い URL(HTTPS→HTTP)には送信しません。これは既定の動作です。
origin-when-cross-origin
同一オリジンへのリクエストでは URL 全体(引数を除く)を送信しますが、他の場合はオリジンのみ送信します。
same-origin
同一オリジンにはリファラーを送信しますが、オリジン間リクエストにはリファラーを含めません。
strict-origin
安全性が同等とみられる宛先([HTTP/HTTPS]→HTTPS)に対しては、リファラーとして文書のオリジンのみを送信しますが、安全性が劣る宛先(HTTPS→HTTP)には送信しません。
strict-origin-when-cross-origin
同一オリジンへのリクエストでは、 URL 全体(引数を除く)を送信します。現在のページと安全性が同等であると見られる宛先([HTTP/HTTP]→HTTPS)にはオリジンを送信します。それ以外は、リファラーを送信しません。
unsafe-URL
同一オリジンまたはオリジン間リクエストで、URL 全体(引数を除く)を送信します。
theme-color

値は、ユーザー エージェントがページや周囲のユーザー インターフェイスのの表示をカスタマイズするために使用すべき提案される色を定義する、CSS <color> 生成物とマッチする文字列でなければならない。たとえば、ブラウザーは、指定された値でページのタイトルバーに色をつけるかもしれず、またはタブ バーやタスク スイッチャーでカラー ハイライトとして使用するかもしれない。

文書ごとに theme-color に ASCII 大文字・小文字不区別一致で設定される name 属性値を持つ複数の META 要素が存在してはならない。

この標準自身は、テーマ カラーとして"WHATWG green"を使用している:

<META name="theme-color" content="#3c790a">
CSS Device Adaptation 仕様書で定義されている name 属性
viewport

このの初期の寸法の大きさについてのヒントを指定します。モバイル端末でのみ使用されます。

各値はカンマ「,」区切りでリストとする。サブ値はメイン値に「=」を続けた後に記述する。
使用可能なサブ値 解説
width 正の整数値、または device-width のテキスト ウェブサイトを表示させるビューポートのピクセル単位の幅を定義します。
height 正の整数値、または device-height のテキスト ビューポートの高さを定義します。どのブラウザーでも使用されていません。
initial-scale 0.010.0 の間の正の実数 端末の幅(縦長画面で device-width、横長画面で device-height)とビューポートの寸法の比率を定義します。
maximum-scale 0.010.0 の間の正の実数 拡大縮小インする最大値を定義します。minimum-scale 以上でなければ、動作は未定義です。ブラウザーの設定でこの規則を無視することができ、iOS 10 以降では既定で無視されます。
minimum-scale 0.010.0 の間の正の実数 拡大縮小レベルの最小値を定義します。maximum-scale 以下でなければ、動作は未定義です。ブラウザーの設定でこの規則を無視することができ、iOS 10 以降では既定で無視されます。
user-scalable yes または no no に設定された場合は、ユーザーがウェブページを拡大縮小することができなくなります。既定値は yes です。ブラウザーの設定でこの規則を無視することができ、iOS 10 以降では既定で無視されます。
viewport-fit autocontaincover auto の値は、初期レイアウトのビューポートに影響を与えず、ウェブページ全体が表示されます。

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

cover の値は、ビューポートが端末のディスプレイいっぱいになるように縮小されることを意味します。

重要なコンテンツがディスプレイの外に出てしまわないように、safe-area-inset-* 変数を使用することを強くお勧めします。

Note: メモ: この宣言は標準化されていませんが、事実上の優位性から、ほとんどのモバイルブラウザーで尊重されています。

ビューポートの拡大縮小についてのアクセシビリティの考慮:

user-scalable を no に設定して拡大縮小機能を無効にすると、弱視の人がページの内容を読んだり理解したりすることができなくなります。

関連情報:

CSS の @viewport アット規則。

例:

<meta name="viewport" content="width=device-width, initial-scale=1">
による name 属性(一部)
creator

この文書の作成者の名前で、組織や機関などです。複数ある場合は、複数の <META> 要素を使用する必要があります。

googlebot

robots と同様ですが、Googlebot(Google のインデックス作成用クローラー)のみが従います。

publisher

この文書の発行者の名前です。

robots

協力的なクローラー、つまり「ロボット」がページに対して使用すべき動作です。

以下の値をカンマで区切ったリストです。

解説 使用者(¶サイト?)
index ロボットがこのページをインデックスすることを許可します(既定値)。 すべて
noindex ロボットにこのページをインデックスしないよう要求します。 すべて
follow ロボットがこのページ上のリンクをたどることを許可します(既定値)。 すべて
nofollow ロボットにこのページ上のリンクをたどらないよう要求します。 すべて
all index、follow と同等です。 Google
none noindex、nofollow と同等です。 Google
noarchive 検索エンジンにこのページの内容をキャッシュしないよう要求します。
nosnippet 検索エンジンの結果でこのページの説明の表示を抑制します。 Google、Bing
noimageindex このページをインデックスされた画像の参照ページとして表示しないよう要求します。 Google
nocache noarchive と同等です。 Bing
Note: 協力的なロボットだけがこのルールに従っています。メールアドレスの自動収集プログラムを抑制できるとは期待しないでください。

テスト
HTML:

ここに表示
HTML:

ここに表示
スクリプト:


スクリプト:



表示内容:
表示内容: