meta要素の配置
meta要素はHTMLのメタデータで、<title>、<link>、<script>などのタグで表現できない様々なメタデータを定義し、<head>~</head>の間に配置する。
metaタグの属性
metaタグでは、以下の属性の少なくとも一つを指定する。
- charset属性
- name属性
- http-equiv属性
- この属性には、必ずcontent属性をセットで記述する
- メタデータの定義とその内容が関連付けられる。
charset属性
meta要素のcharset属性で文字エンコーディングを指定する。charset属性を指定したmeta要素は、一つの文書に一つしか配置できない。
1 |
<meta charset="エンコーディングの値"> |
日本語のエンコーディングとしては以下を指定。
大文字と小文字の区別はされない。
- utf-8
- shift_jis
- euc-jp
HTML4では、meta要素を指定する場合、以下の用に記述していた。
1 |
<meta http-equiv="Content-Type" content="text/htmll;charset=UTF-8"> |
name属性
name属性でメタデータ名を定義し、content属性でその内容を指定する。
1 |
<meta name="メタデータ名" content="値"> |
メタデータ名の一覧
- keywords
- 文書の内容に関するキーワードを値に記述。複数のキーワードを指定する場合はcomma”,”で区切る。ここで指定される値は検索エンジンで利用される可能性がある。
- description
- 文書の説明を短文で値に記述。指定した値は検索結果に表示されるなど検索エンジンに利用される。
- robots
- 検索エンジンのクローラ(ロボット)に対しての無効指定(noindex,nofollow)を値に記述。この情報を参照する検索エンジンに対してのみ有効。W3Cの仕様には記載されていない。
- author
- 文書作成に使用したアプリケーションを示す。アプリケーションを利用してドキュメントが作成された際に、アプリケーションにより挿入される。
- generator
- 文書作成に使用したアプリケーションを示す。アプリケーションを利用してドキュメントが作成された際に、アプリケーションにより挿入される。
- application-name
- HTML4.01からHTML5へのバージョンアップで追加。Webアプリケーションの名前を示すもので、ページがWebアプリケーションの場合のみ使用し、一つの文書に一つだけ指定。
1<meta name="application-name" content="Gmail"> - viewport
- 文書の表示領域を設定。スマートフォン向けの機能であり、表示幅の画面へのフィッティングやスケーラビリティを設定。
- format-detection
- ・・・・・
http-equiv属性
meta要素が実行命令を指示する「プラグマ指示子」(pragma directive)となる。プラグマ指示子はブラウザに対して文書の状態・挙動を指示する。
1 |
<meta http-equiv="値1" content="値2"> |
nameの値1には、以下の4つを指定可能。
- content-language
- コンテンツ言語の指定。contentの値2に指定する言語は、ja(日本語)、en(英語)、zh(中国語)、zo(韓国語)、de(ドイツ語)、fr(フランス語)、it(イタリア語)、es(スペイン語)、ru(ロシア語)、ar(アラビア語)など。
1<meta http-equiv="content-language" content="ja"> - content-type
- HTMLやCSSなどのファイルタイプや文字エンコーディングの指定。charset属性の代わりに、contentの値の中で文字エンコーディングを指定可能。
123<meta http-equiv="content-type" content="text/html"><meta http-equiv="content-type" content="text/css"><meta http-equiv="content-type" content="text/html; charset=UTF-8"> - default-style
- デフォルトスタイルの指定。この指定により、link要素で複数のCSSを指定している場合に、その中で優先して利用するCSSファイルをブラウザに伝達可能。
- refresh
- リダイレクト/再読み込みの指定。リフレッシュ/リダイレクトまでの遅延時間)と、リダイレクト先のURLを指定。URL指定がなければ、そのページをリフレッシュする。遅延時間の単位は秒。
12<meta http-equiv="refresh" content="5; url=another_page.html"><meta http-equiv="refresh" content="180">