★HTML Living Standard リファレンス
<meta>タグは、文書に関するメタデータを表す際に使用します。
title要素、 base要素、 link要素、 style要素、 script要素 を使っても表現できない様々な種類のメタデータは、meta要素を使って指定します。
meta要素の終了タグについて
HTMLの仕様では、meta要素には終了タグ</meta>はありません。
■属性
- name属性
- メタデータの名前を指定します。
- http-equiv属性
- プラグマディレクティブ（Pragma directive＝文書がどのように挙動するかの指示）を定義します。 具体的な挙動内容はcontent属性で指定します。
- content属性
- 挙動の指示に関する具体的な内容や値などを指定します。
- charset属性
- 文字エンコーディングを指定します。
- media属性
- 対応メディアを指定します。
- all …… すべてのデバイス
- print …… プリンタ、および、「印刷プレビュー」で文書を表示するブラウザなど、 印刷された表示を再現することを目的としたデバイス
- screen …… print で一致しないすべてのデバイス（≒一般的なディスプレイ）
以下は、メディアタイプとして定義されていますが、非推奨となっています。 可能ならば、使用を避けた方が良いでしょう。
- tty …… 固定文字サイズの端末
- tv …… テレビ
- projection …… プロジェクタ
- handheld …… ハンドヘルドデバイス
- braille …… 点字の触角デバイス
- embossed …… 点字プリンタ
- aural …… 音声出力デバイス
- speech …… 読み上げブラウザ
meta要素のname属性の値
以下に、meta要素のname属性に指定できるメタデータの名前を紹介します。 メタデータの名前は、大文字と小文字を区別しません。
- application-name
- ウェブアプリケーションの名称
- author
- 文書の作者の名前
- description
- 文書の説明文
- generator
- 文書の生成に使用されたソフトウェアが識別できるように自由テキストを指定します。
この値は、作者がテキストエディタを使ってマークアップを記述したページのように、 マークアップがソフトウェアによって生成されていないページでは使用しません。
- keywords
- 文書に関連するキーワード
複数のキーワードを指定する場合、カンマ（ , ）で区切って記述します。
- referrer
- 文書のデフォルトのリファラーポリシーを指定します。 値に指定できるキーワードは、以下の通りです。
- no-referrer …… リファラー情報を送信しません。
- no-referrer-when-downgrade …… httpsからhttpへはリファラー情報を送信しません。
- same-origin …… 同一オリジンの場合のみリファラー情報を送信します。
- origin …… オリジン情報のみを送信します。例えば「https://example.com/page.html」の文書からは、「https://example.com/」というリファラー情報が送信されます。
- strict-origin …… オリジン情報のみを送信します。ただし、httpsからhttpへはリファラー情報を送信しません。
- origin-when-cross-origin …… 同一オリジンの場合のみリファラー情報を送信します。異なるオリジン間ではオリジン情報のみを送信します。
- strict-origin-when-cross-origin …… 同一オリジンの場合のみリファラー情報を送信します。異なるオリジン間ではオリジン情報のみを送信します。ただし、httpsからhttpへはリファラー情報を送信しません。これが初期値です。
- unsafe-url …… リファラー情報を送信します。機密性の高い文書にこのリファラーポリシーを設定する際には、慎重に検討してください。
- "" …… 空の文字列を指定すると、文書レベルではリファラーポリシーが指定されていないことを示します。別の場所で指定したリファラーポリシーがあれば、それが適用されるかもしれません。
- theme-color
- カラーコード値やカラーネームで、文書のテーマカラー指定します。
- color-scheme
- カラースキーム（配色体系）を指定します。 値に指定できるキーワードは、以下の通りです。
- normal …… ノーマル配色。これが初期値です。
- light …… 明るい配色（ライトモード）
- dark …… 暗い配色（ダークモード）
- only …… ユーザーエージェントによる配色のオーバーライドを禁止します。
- カスタム識別子 …… 作者が任意の文字列で定義したオリジナルの配色を指定します。
■meta name="generator" の使用例
以下のサンプルは、「Frontweaver」というツールによってページが生成されたことを示しています。 この場合、meta要素は出力のページのhead要素のなかに含めます。
HTMLソース
<!doctype html> <html> <head> <meta name="generator" content="Frontweaver 8.2"> </head> <body> ...■meta name="keywords" の使用例
以下のサンプルは、ユーザーがページを探すために使用する可能性があるいくつかのキーワードを、カンマ（ , ）区切りで指定しています。 ただし、多くの検索エンジンは meta name="keywords" で指定されたキーワードを考慮していません。 これは、この機能が検索エンジンへのスパム行為に利用されてきた歴史があり信頼性が低いためです。
HTMLソース
<!doctype html> <html lang="ja"> <head> <title>高速道路で使用される書体</title> <meta name="keywords" content="書体,字体,フォント,高速道路"> </head> <body> ...■meta name="referrer" の使用例
以下のサンプルは、meta name="referrer"で文書レベルのリファラーポリシーを指定しています。 値に「origin」を指定すると、リファラー情報としてオリジン情報のみを送信するように指定したことになります。 オリジン情報のみを送信するとは、例えば「https://example.com/page.html」の文書からは、「https://example.com/」というリファラー情報が送信されるということです。
HTMLソース
<!doctype html> <html> <head> <meta name="referrer" content="origin"> </head> <body> ...■meta name="color-scheme" の使用例
以下のサンプルは、meta name="color-scheme"でカラースキーム（配色体系）を指定しています。 content="dark"を指定しているので、 ページがダークモード（暗い背景色と明るい前景色のカラースキーム）で処理できることを示します。
HTMLソース
<meta name="color-scheme" content="dark">■meta name="theme-color" の使用例
以下のサンプルは、meta name="theme-color"で文書のテーマカラーを指定しています。 文書のテーマカラーとは、ユーザーエージェントがこの文書に関するインターフェースの表示をカスタマイズする際の推奨色です。 例えば、ブラウザは指定されたテーマカラーを、この文書のタイトルバーの背景色として利用するかもしれません。
HTMLソース
<!doctype html> <title>HTML Standard</title> <meta name="theme-color" content="#3c790a"> ...media属性で対応メディアを指定
上記サンプルにmedia属性を追加することで、どのような場面でテーマカラーを使用するのかを指定できます。 以下のサンプルは、ダークモードのみでテーマカラーを使用するために、media属性の値に prefers-color-scheme: dark を指定しています
HTMLソース
<!doctype html> <title>HTML Standard</title> <meta name="theme-color" content="#3c790a" media="(prefers-color-scheme: dark)"> ...meta要素のhttp-equiv属性の値
meta要素にhttp-equiv属性を指定すると、そのmeta要素はプラグマディレクティブとなります。 プラグマディレクティブ（Pragma directive）とは、文書がどのように挙動するかの指示です。 具体的な挙動内容はcontent属性で指定します。
以下に、http-equiv属性に指定できるキーワードを示します。
- content-language
- コンテンツ言語を指定します。 この機能は規格に適合していないため、代わりにlang属性を使用することが推奨されています。
- content-type
- エンコーディング宣言（文字コード）を指定します。
content属性には、"text/html;" のあとに空白スペースを入れて charset=utf-8 が続きます。
ただし、この機能はcharset属性の単なる代替形式に過ぎません。 文字コードを指定する場合には、charset属性を使用するほうが短く記述できます。
<meta http-equiv="content-type" content="text/html; charset=utf-8">ひとつの文書内に、エンコーディング宣言状態のhttp-equiv属性を持つmeta 要素と、 charset属性を持つmeta要素の両方を含めてはなりません。<meta charset="utf-8"> - default-style
- デフォルトのCSSスタイルシートセットの名前を指定します。
<meta http-equiv="default-style" content="緑スタイル"> - refresh
- 再読み込みや他のURLへのリダイレクトを指定します。content属性には、秒数とURLを指定します。
正の整数で秒数、セミコロン（ ; ）、空白スペース、URL=文字列の順序で記述します。
秒数だけを指定してURL=文字列を省略すると、現在のページをリロードします。
5分（300秒）ごとにリロードします。
<meta http-equiv="refresh" content="300">20秒後にpage4.htmlへリダイレクトします。
<meta http-equiv="refresh" content="20; URL=page4.html"> - set-cookie
- Cookieをセットするという指示ですが、この機能は規格に適合していません。 この指定をしてもユーザーエージェントに無視される可能性があり効果はありません。
- x-ua-compatible
-
X-UA互換を指定するための機能です。
Internet Explorer8.0以降で互換モードで表示したい場合などに指定します。
この指定をしてもユーザーエージェントに無視される可能性があります。
Internet Explorerで表示した際に、作者の意図に近い表示にできるかもしれません。
<meta http-equiv="x-ua-compatible" content="IE=edge"> - content-security-policy
- 文書にコンテンツ セキュリティ ポリシーを適用します。
以下のサンプルでは、インラインJavaScriptの実行を防止し、 すべてのプラグインコンテンツをブロックするように指定しています。 この指定により、クロスサイト・スクリプティング攻撃のリスクが軽減するかもしれません。
<meta http-equiv="content-security-policy" content="script-src 'self'; object-src 'none'">
文書の文字エンコーディングの指定
文書内に文字エンコード宣言を配置する場合には、 文書ごとにmeta要素による文字エンコーディング宣言を1つだけ含めることができます。
■使用例
HTML文書では、文字エンコーディングが UTF-8 であることを宣言するために、 以下のマークアップを文書の上部（head要素のなか）に含めます。
HTMLソース
<!doctype html> <html> <head> <meta charset="utf-8"> <title>ページのタイトル</title> </head> <body> ...エンコーディング標準では、「utf-8」を使用する必要があります。 文書内に文字エンコード宣言を配置するかどうかに関係なく、 文書で実際に使用される文字エンコードは UTF-8 でなければなりません。 UTF-8 以外のエンコーディングを使用すると、 フォーム送信やURLエンコーディングで予期しない結果が生じる可能性があります。
XML文書では、文書の最上部に配置するXML宣言のなかで、 文字エンコーディングが UTF-8 であることを宣言します。
XMLソース
<?xml version="1.0" encoding="utf-8"?>iframe要素のsrcdoc属性で指定される文書には、文字エンコーディング宣言が含まれていてはなりません。 この場合、ソースはiframeを含む文書の一部となるため、すでにデコードされています。
meta要素の属性の使用ルール
meta要素を使用する場合、name属性、http-equiv属性、charset属性、itemprop属性のうち、いずれか1つを指定する必要があります。
name属性、http-equiv属性、itemprop属性のいずれかが指定されている場合は、同時にcontent属性を指定する必要があります。 それ以外の場合は、content属性を指定しません。
name属性は、メタデータの名前を指定します。 文書のメタデータは、name属性で指定するメタデータの名前と、content属性で指定するメタデータの値のペアで表されます。 content属性が指定されていない場合、メタデータの値は空の文字列となります。
http-equiv属性は、プラグマディレクティブ（Pragma directive＝文書がどのように挙動するかの指示）を定義します。 挙動の具体的な内容は、content属性で指定します。
charset属性は、文書で使用される文字エンコーディングを宣言します。 ひとつの文書のなかに、charset属性を持つmeta要素が複数あってはなりません。
media属性は、メタデータが適用されるメディアを示します。
■関連項目
広告Sponsors
広告MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる！【A8.net】
Node.jsコース
はじめてのプログラミングコース
© HTMQ