meta要素

指定可能な属性
属性 説明
http-equiv プラグマ ディレクティブ (pragma directive) 値はcontent属性で指定します。
name 文書レベルのメタデータ
  • application-name
  • author
  • description
  • generator
  • keywords
  • creator
  • googlebot
  • publisher
  • robots
  • slurp
値はcontent属性で指定します。
content http-equiv属性、またはname属性の値を指定する。
charset 文字セットを宣言する。これはHTML5でサポートされます。
scheme (廃止)
属性 - meta 要素 - HTML | MDN

http-equiv属性

content-type

文書のContent-Typeを指定します。

文字セットの指定

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

charsetにはIANAのCharacter Setsの一覧にある、「Preferred MIME Name」の文字列を指定します。

HTML5ではcontent-typeは廃止されており、代わりにcharset属性で指定します。

<meta charset="utf-8">

HTTPヘッダのContent-Typeで文字セットが指定されている場合、meta要素の記述は無視されます。これはcharset属性で指定しても同じです。たとえばサーバがApacheならば、この文字セットの指定はAddCharsetで行えます。

既定の言語の指定

類似の指定値にcontent-script-typeとcontent-style-typeがあり、これらはそれぞれ既定のスクリプト言語とスタイル言語を指定します。

  • <meta http-equiv="content-script-type" content="text/javascript" />
  • <meta http-equiv="content-style-type" content="text/css" />

cache-control

キャッシュの扱いについて指示します。たとえばキャッシュしないようにするには、

<meta http-equiv="Cache-Control" content="no-cache" /> <!-- HTTP/1.1 -->
<meta http-equiv="Pragma" content="no-cache" /> <!-- HTTP/1.0 -->

のように指示します。

refresh

ページを再読み込み (リロード)、または転送 (リダイレクト) するように指示できます。

ブラウザの設定によっては、再読み込みや転送が拒否されることがあります。

content属性に正の整数を指定することで、再読み込みするまでの秒数を指定できます。

<meta http-equiv="refresh" content="3" />
<!-- 3秒後に 再読み込み -->

content属性で;url=に続けてURLを記述することで、そのページへ転送させられます。

<meta http-equiv="refresh" content="3;url=http://example.com/" />
<!-- 3秒後に http://example.com/へ転送 -->

次のリンクから、転送の動作を確認できます。

しかしこの方法ではHTTPのステータスが200となるため、Webクローラには転送の事実が伝わりません。よってサーバの設定を変更できるならば、Redirectを用います。

name属性

robots

クローラに指示します。しかしクローラが、それに従うとは限りません。

<meta name="robots" content="noindex" />

noindexでは、robotがページを訪問したときにインデックスしないように指示できます。一方でrobots.txtでは、ページを訪問しないように指示できます。

msapplication-config

Windows 8やIE11で、サイトがピン留めされたときの画像を指定します。

<meta name="msapplication-config" content="/browserconfig.xml" />

必要なファイルは、Create a Windows 8.1 tile for your site - Build My Pinned Site - Microsoft Internet Explorerで作成できます。

viewport

viewportの初期サイズに関するヒントを与えます。これは一部のモバイル デバイスで用いられていますが、標準化はされていません。

<meta name="viewport" content="width=device-width, initial-scale=1" />
設定可能な値 機能
width 正の整数 viewportの幅を、ピクセルで定義
文字列で'device-width' viewportの幅を、100%にズームしたときのスクリーンの幅に合わせる
height 正の整数 viewportの高さを、ピクセルで定義
文字列で'device-height' viewportの高さを、100%にズームしたときのスクリーンの高さに合わせる
initial-scale 0.0~10.0までの正の数値 デバイスの幅とviewportのサイズの比率を定義
※ポートレートモードではdevice-width、ランドスケープモードではdevice-height
maximum-scale ズームの最大値を定義
※この値はminimum-scale以上にしなければならない
minimum-scale ズームの最小値を定義
この値はmaximum-scale以下にしなければならない
user-scalable 論理値 ('yes'または'no') noを指定すると、ユーザーはページのズームができなくなる。既定値はyes
Using the viewport meta tag to control layout on mobile browsers - Mozilla | MDN
HTMLの情報サイトから、まとめて検索