HTML - meta 要素

概要

名前
meta
カテゴリー
  • Metadata content
  • Flow content: body要素に配置できる場合のみ。
  • Phrasing content: body要素に配置できる場合のみ。
配置できる場所
charset 属性がある場合、または http-equiv 属性がありエンコーディング宣言の場合は、head 要素の中。http-equiv 属性がありエンコーディング宣言ではない場合は、head 要素内の noscript 要素の中。
コンテンツモデル
空要素のため、子ノードを持ちません。
説明
meta 要素は、title 要素link 要素base 要素style 要素script 要素では表現できない様々な種類のメタデータ (文書自身に関する情報) を示すための要素です。meta 要素には、charset 属性・name 属性・http-equiv 属性のうち、いずれかひとつを必ず指定する必要があります。このうち、文字コードを指定する charset 属性は単独で指定できますが、name 属性、および http-equiv 属性は必ず content 属性とセットで指定する必要があります。
タグの省略
開始タグも終了タグも省略できません。
DOM Interface
HTMLMetaElement
仕様書
仕様書策定状況コメント
LS:現行の標準itemprop 属性を追加
REC:勧告charset 属性を追加
REC:勧告
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
1
○:Support ×:Not Support ?:未定義 n:以降の Version で Support

属性

サポートブラウザ
属性名 ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
charset1
content1
http-equiv1
name1
○:Support ×:Not Support ?:未定義 n:以降の Version で Support
グローバル属性
すべての要素で共通に利用できるグローバル属性を指定できます。
charset
この属性は、ページで使用している文字エンコーディングを宣言します。この属性は 文字エンコーディングの標準 IANA MIME name のひとつであることが必要です。標準仕様では特定の文字エンコーディングを要求していませんが、以下の推奨事項があります。
  • UTF-8 を推奨します。
  • セキュリティ上のリスクを防ぐために、 ASCII との互換性がないエンコーディングを使用するべきではありません。その様な文字コードに対応していないブラウザでは、有害なコンテンツを HTML として解釈する可能性があります。該当するものは、JIS_C6226-1983JIS_X0212-1990HZ-GB-2312JOHABISO-2022 ファミリー、EBCDIC ファミリーなどです。
content
この属性は、状況に応じて http-equiv 属性、または name 属性に関連付けられた値を持ちます。
http-equiv
プラグマディレクティブを定義します。
  • content-language: ページの既定の言語を定義します。これはすべての要素の lang 属性に置き換えられました。この値は廃止されたため、使用しないでください。html 要素lang 属性を使用することを推奨します。
  • content-security-policy: この値により、ページ作者がページのコンテンツポリシーを定義できます。いくつかの例外を除き、ポリシーはサーバオリジンやスクリプトのエンドポイントの指定に関与します。これは、クロスサイトスクリプティング攻撃の対策になります。
  • content-type: 文書の MIME type を定義するもので、後に文字エンコーディングの定義が続きます。これは HTTP の content-type エンティティヘッダーフィールドと同じ構文に従いますが、 HTML ページ内にあるため text/html を除くほとんどの値は使用できません。そのため、この content として有効な構文は文字列 text/html に、charset=IANAcharset という構文による文字集合を続けたものになります。IANAcharset は、Character Sets の一覧を参照してください。この値は廃止されたため、使用しないでください。meta 要素の charset 属性を使用してください。
  • refresh: これは以下の指示をします。
    • content 属性に正の整数が 1 つだけ含まれている場合は、ページを再読み込みするまでの秒数。
    • content 属性に正の整数と、その後に文字列 url と有効な URL がある場合は、別のページにリダイレクトするまでの秒数。
  • set-cookie: ページの Cookie を定義します。属性の値は IETF の HTTP Cookie 仕様書で定義している構文に従わなければなりません。この値は廃止されたため、使用しないでください。代わりに HTTP ヘッダーの Set-Cookie を使用してください。
name
この属性は、文書レベルのメタデータの名前を定義します。itemprophttp-equivcharset 属性のいずれかが設定されている場合は設定するべきではありません。このメタデータの名前は、content 属性が持つ値と関連づけられます。name 属性で使用できる値には以下のものがあります。
  • application-name は、ウェブページで実行するアプリケーションの名前を定義します。
  • author は、文書の作者名を定義します。
  • description は、ページのコンテンツに関する簡潔で正確な概要を保持します。Firefox や Opera など一部のブラウザは、ページをブックマークに追加した際の既定の説明文として使用します。
  • generator は、ページを生成したソフトウェアの識別名を定義します。
  • keywords は、ページのコンテンツに関連する単語をカンマ区切りの文字列で保持します。
  • referrer は、この文書からリクエストを送信する場合に HTTP の Referer ヘッダーへ付加する内容を制御します。<meta name="referrer">content 属性値一覧は以下のとおりです。
    no-referrer
    HTTP の Referrer ヘッダーを送信しません。
    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 全体 (パラメーターは除く) を送信します。
  • creator は、文書の制作者を定義します。これは組織名にできることに注意してください。複数の制作者がいる場合は、meta 要素を複数使用すべきです。
  • googlebot は、robots と同義ですが Google のインデックス作成クローラーである Googlebot だけが従います。
  • publisher は、文書の発行者の名前を定義します。
  • robots は、協力的なクローラーあるいは robot がページ上で行うべき動作を定義します。<meta name="robots">content 属性値一覧は以下のとおりです。
    index
    robot にページのインデックス作成を許可する。(既定値)
    noindex
    ページのインデック作成を行わないことを robot に要求する。
    follow
    robot がページ上のリンクをたどることを許可する。(既定値)
    nofollow
    ページ上のリンクをたどらないことを robot に要求する。
    none
    noindexnofollow と同義。
    noodp
    検索結果のページでその説明文をサイトの説明として使用しないようにする。
    noarchive
    ページのコンテンツをキャッシュしないことを検索エンジンに要求する。
    nosnippet
    検索結果のページでページの説明を表示しないようにする。
    noimageindex
    インデックス登録された画像の参照元としてページを表示しないように要求する。
    nocache
    noarchive と同義。
  • slurprobots と同義ですが、 Yahoo! 検索のクローラーである Slurp のみが従います。
  • viewport は、ビューポートの初期サイズに関する助言を与えます。モバイル端末のみで使用されます。<meta name="viewport">content 属性値一覧は以下のとおりです。
    設定可能な値説明
    width正の整数、または device-widthウェブサイトを描画したいビューポートの幅をピクセル数で定義します。
    height正の整数、または device-heightビューポートの高さを定義します。どのブラウザでも使用されていません。
    initial-scale0.010.0 までの、正の数値デバイスの幅 (ポートレートモードでの device-width またはランドスケープモードでの device-height) とビューポートの寸法との比率を定義します。
    maximum-scale0.010.0 までの、正の数値ズームの最大値を定義します。この値は minimum-scale と同じまたはより大きくしなければなりません。そうではないときの動作は未定義です。ブラウザの設定でこの規則を無視できます。また、iOS 10 以降は既定で無視します。
    minimum-scale0.010.0 までの、正の数値ズームの最小値を定義します。この値は maximum-scale と同じまたはより小さくしなければなりません。そうではないときの動作は未定義です。ブラウザの設定でこの規則を無視できます。また、iOS 10 以降は既定で無視します。
    user-scalableyes または nono を設定すると、ユーザはページのズームができなくなります。既定値は yes です。ブラウザの設定でこの規則を無視できます。また、iOS 10 以降は既定で無視します。

サンプルコード

meta 要素のサンプルコードは以下のとおりです。

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        ...
    </body>
</html>
meta 要素のサンプルコード

関連記事

HTML の全般的な記事はHTML タグの基本と使い方を参照してください。

Category:
プログラミング
公開日:
更新日:
Pageviews:
46
Shares:
1
Tag:
HTML
hatebu icon
hatebu