<meta>タグは、その文書に関する情報(メタデータ)を指定する際に使用します。
メタデータとは、“情報に関する情報”のことですが、HTMLの仕様では“その文書に関する様々な情報”を意味します。
HTML文書のメタデータは<head>~</head>の中に、
<title>(タイトル)・
<base>(基準URL)・
<link>(リンク情報)・
<style>(スタイルシート)・
<script>(スクリプト)
などのタグで指定しますが、
これらのタグで表現できないその他の様々なメタデータは<meta>で表します。
<meta>タグは<head>~</head>の中に配置します。
meta要素を指定する際には、
name属性、http-equiv属性、charset属性のうち、少なくとも一つを指定する必要があります。
また、name属性、http-equiv属性を指定する際には、必ずcontent属性とセットで利用します。
セットで利用することでメタデータの定義(名前)とその内容が関連付けられます。
メタデータには様々なものがありますが、以下に使用頻度の高いメタデータの指定方法を紹介します。
charset属性は、文書の文字エンコーディングを指定する際に使用します。
日本語の文字エンコーディングの値としては、”utf-8″・”shift_jis”・”euc-jp”などが挙げられます。大文字と小文字の違いは区別されません。
charset属性を指定したmeta要素は、一つの文書に一つだけしか配置できません。
尚、XML文書にmeta要素のcharset属性を指定する場合には、値には”utf-8″を指定します。
meta要素で文字エンコーディングを指定する場合、HTML 4では以下のように記述していました。
HTML5でも上の記述方法のままで問題ありませんが、charset属性を使用すれば以下のように短くすることができます。
文字エンコーディングを指定しないと、例えば、日本語で作成されたウェブページに英語版のブラウザでアクセスした場合などに文字化けが起きることがあります。
必須ではありませんが、できるだけ指定したほうが良いでしょう。
name=”keywords”は、そのHTML文書がどのような内容を示したものかキーワードで指定します。
複数のキーワードを指定する場合には、半角カンマ(,)区切りで指定します。
name=”description”は、その文書の説明を短文で指定します。
ここで指定する値は、Googleの検索結果に表示されるなど、多くの検索エンジンで利用されるので慎重に言葉を選んでください。
また、name=”robots” content=”noindex,nofollow”は、検索エンジンのクローラ(ロボット)に対して
URLをインデックスしないように(noindex)、
文書内のリンクをたどらないように(nofollow)知らせるための指定です。
この指定はすべての検索エンジンに対して有効ではなく、
この情報を参照する検索エンジンに対してのみ有効となる指定なので注意してください。
検索エンジン対策として一般的に利用されていますが、W3Cの仕様には記載されていません。
name=”author”は、その文書の作者を示す際に指定します。
name=”generator”は、文書作成に使用したツールやソフトウェアを示すものです。
これは、ツールやソフトウェアを使用してウェブページが自動生成された際に、
そのツール自身がウェブページを出力する際にhead要素内に挿入するものです。
手作りしたウェブページに使用するものではないので注意してください。
meta要素にhttp-equiv属性を指定すると、そのmeta要素はプラグマ指示子(pragma directive)となります。
プラグマ指示子とは“実行命令を指示するもの”のことで、ユーザーエージェント(ブラウザ)に対して文書の“状態・挙動”を指示する役割があります。
http-equiv属性の値には、以下の4つのキーワードを指定することができます。
http-equiv=”content-language”は、文書の主言語を指定します。
言語はcontent属性で指定します。例えば、日本語ならcontent=”ja”、英語ならcontent=”en”となります。
その他の主な言語には、
zh(中国語)、ko(韓国語)、de(ドイツ語)、fr(フランス語)、it(イタリア語)、es(スペイン語)、ru(ロシア語)、ar(アラビア語)
などがあります。
http-equiv=”content-type”は、ファイルタイプや文字エンコーディングを指定します。
ファイルタイプを指定する場合には、例えばHTML文書ならcontent=”text/html”と指定します。
また、文字エンコーディングを指定すれば、charset属性の代わりとして機能します。
http-equiv=”default-style”は、デフォルトスタイルを指定します。
具体的には、例えば、content=”default.css”のように記述して、デフォルトスタイルとなるCSSファイルのURIを指定します。
この指定をすると、link要素で複数のCSSファイルを指定している場合に、
その中で優先して利用するCSSファイルをブラウザに伝えることができます。
http-equiv=”refresh”は、別のURLへのリダイレクトや現在ページの再読み込みを指定します。
content属性の値には何秒後にリフレッシュするかと、
ジャンプ先のURLを指定します。
例えば、5秒後にnewpage というページにリダイレクトする場合には以下のように記述します。
また、5分ごとに現在のページを再読み込みする場合には以下のように記述します。
※めも:w3.orgによれば、
meta要素によるrefreshを多用しているウェブサイトは、検索エンジンのリストから削除されることがあるようです。
それを避けたい場合には、代わりに301リダイレクトを使用すると良いとのことです。
HTML5では、name属性の値として”application-name”が追加されています。
name=”application-name”は、ウェブアプリケーションの名前を示すものです。
これはウェブアプリケーションを作成する場合に利用する値であり、
ページがウェブアプリケーションでない場合には使用してはいけません。
また、使用する場合には一つの文書に一つだけ指定します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”content-language” content=”ja”>
<meta charset=”UTF-8″>
<meta name=”keywords” content=”HTML,CSS,JavaScript,特殊文字,リファレンス”>
<meta name=”description” content=”HTML・CSS等の早見表的リファレンス”>
<meta name=”robots” content=”noindex,nofollow”>
<meta name=”author” content=”HTMQ”>
<title>HTMLクイックリファレンス</title>
</head>
<body>
<p>HTML・CSSについて紹介します。</p>
</body>
</html>