meta要素とは、ウェブページの性質や管理情報などのウェブページ自体の情報であるメタデータを指定するための要素だ。meta要素の属性では、メタデータのプロパティ名、値、形式などを指定できる。著作者やキーワードなどをメタデータのプロパティ名として、プロパティ名に対する実際の情報を値に記述する。これらの情報はもちろんbody要素の内容としても書けるが、それでは閲覧者は理解できてもユーザーエージェントは理解できない。meta要素は、ブラウザやロボットなどのユーザーエージェント自身も理解できる形で様々な情報を提供したり、その動作を指示したりできる要素なわけだ。といっても、積極的に利用されてるメタデータってのはそんなにないけどな。
下記以外に、汎用属性のlang属性とdir属性が使用可能だが使うことはまずないでしょう。
meta要素はhead要素の子要素としてのみいくつでも記述できる。基本的に、meta要素の属性で、メタデータのプロパティ名と値を一組として指定する。メタデータのプロパティ名には、メタデータの値が示すものは何かを記述し、値にはそのプロパティ名に対する実際の情報を記述する。例えば、ウェブページの著作者を記述する場合は下記のようになる。
<meta name="author" content="Teal">
例ではname="author"でメタデータのプロパティ名は著作者であると指定し、content="Teal"でその値は Teal と指定している。
meta要素で指定できるメタデータのプロパティと値の組み合わせにはどんなものがあるのか…。実は特別に定義されていない…というか、誰でも自由に定義していいらしい（もちろん、HTTPヘッダの場合はHTTPヘッダとしての正しい書き方ってのがある）。しかし、自由に定義していいと言っても、UAがそれに対応していなければ意味はない。そんなわけで、主に、現時点でよく利用されているか利用されていなくてもよく見かけるものと、指定しておいた方が良いプロパティの種類と記述例を書いておく。
<meta http-equiv="Content-Type" content="text/html;charset=Shift-JIS">ウェブページを表示する際の文字セットを指定する。日本語の文字セットは、Shift-JISの他に、iso-2022-jp、EUC-jpなどがあるが、Shift-JISを指定しておけば問題ないだろう。文字セットを明示的に指定していないと文字化けの原因になることがあるので、文書内で日本語が現れる前に指定する必要がある。できれば、head要素の開始タグ直後に指定しておきたい。
<meta http-equiv="refresh" content="10">値で指定した時間（例では１０秒）が経過すると、そのページを再びロードするよう、ブラウザに指示する。すべてのブラウザでサポートされている機能ではないが、代表的なブラウザならまず問題ない。
<meta http-equiv="refresh" content="10; URL=ロードさせるページのURL">値で指定した時間（例では１０秒）が経過すると、URLで指定したページをロードするよう、ブラウザに指示する。すべてのブラウザでサポートされている機能ではないが、代表的なブラウザならまず問題ない。
<meta http-equiv="発生時期" content="RevealTrans(Duration=動作時間,Transition=効果の種類)">IE4.0以降では、トランジションフィルタという独自機能を利用して、ページ切り替え時にウィンドウ全体にビジュアル効果をつけることができる。"発生時期"には、Page-Enter（ページの読み込み）、Page-Exit（ページの終了）、Site-Enter（サイトの読み込み）、Site-Exit（サイトの終了）のいずれかを記述し、効果の発生時期を指定する。"動作時間"には、効果の開始から終了までの時間を秒数（最大３０秒）で指定する。動作時間が短か過ぎると効果が見えないが、長過ぎると閲覧者を待たせることになってしまうので、２〜３秒が適当だろう。"効果の種類"には、数字で 0 から 23 までのいずれかを記述し、発生させるトランジションを指定する。
実際に使用する際は下記のように記述し、head要素内のなるべく上の方で指定した方がいい。下の方で指定するとうまく動作しないことがあるからだ。下記の例では、ページを読み込んだ時に Circle in、ページを終了した時に Circle out の効果をそれぞれ２秒間つけるように指定している。IE4.0以降以外の、この機能をサポートしていないブラウザはこの情報を無視するだけなので、ページのアクセントとして使用するの良い。ただし、ページ切り替えの度に効果がつくのは鬱陶しいので、サイトの読み込みと終了の時くらいにしておきたい。あるいはトップページのみとか。
<meta http-equiv="Page-Enter" content="RevealTrans(Duration=2,Transition=2)">
<meta http-equiv="Page-Exit" content="RevealTrans(Duration=2,Transition=3)">
トランジションの種類と値は下記の通り。サンプルの動作時間はすべて２秒。サンプルページで効果を確認できるのはIE4.0以降のみです。
| トランジション名 | 値 | 説明とサンプル |
|---|---|---|
| Box in | 0 | 四角くフェードイン／アウト |
| Box out | 1 | |
| Circle in | 2 | 円くフェードイン／アウト |
| Circle out | 3 | |
| Wipe up | 4 | 上下カーテン |
| Wipe down | 5 | |
| Wipe right | 6 | 左右カーテン |
| Wipe left | 7 | |
| Vertical blinds | 8 | 左から／上からブラインド |
| Horizontal blinds | 9 | |
| Checkerboard across | 10 | 左から／上から格子状ブラインド |
| Checkerboard down | 11 | |
| Random dissolve | 12 | ランダムノイズ |
| Split vertical in | 13 | 中開きカーテン横 |
| Split vertical out | 14 | |
| Split horizontal in | 15 | 中開きカーテン縦 |
| Split horizontal out | 16 | |
| Strips left down | 17 | 左下／左上方向へカーテン |
| Strips left up | 18 | |
| Strips right down | 19 | 右下／右上方向へカーテン |
| Strips right up | 20 | |
| Random bars horizontal | 21 | 縦／横の棒状ノイズ |
| Random bars vertical | 22 | |
| Random | 23 | 0 〜 22 からランダム |
<meta name="description" content="要約">ウェブページの要約となる説明文を記述する。説明文の長さは全角８０文字程度までが適当。検索エンジンによっては検索結果にこの説明文が表示されるものもある。検索サービスの利用者はこの説明文をアクセスの判断基準とする場合があるので、分かり易く魅力的で正しい説明文にすることが肝心。
<meta name="keywords" content="キーワード１,キーワード２,キーワード３">ウェブページのキーワードとなる語句を半角のカンマ”,”で区切って必要なだけ書く。検索エンジンによってはキーワードを指定することによって、検索結果に積極的に反映させることができる。キーワードは、body要素内に実際に記述してあるものを書く。それ以外のキーワードを書いたり、同じキーワードを何度も繰り返し書くと、ウェブページ自体を検索の対象から外されることもある。また、キーワードの数があまりにも多いとキーワードを無視される場合もあるので注意しよう。なお、キーワードは出現順に重要視される傾向がある。
<meta name="robots" content="そのページの登録指定,そのページからの巡回指定">検索エンジンのロボットに、そのページの検索エンジンへの登録と、そのページからリンクしているページへの巡回を指定する。"そのページの登録指定"には、INDEX（登録を許可する）、NOINDEX（登録を許可しない）、のいずれかを記述し、"そのページからの巡回指定"には、FOLLOW（巡回を許可する）、NOFOLLOW（巡回を許可しない）、のいずれかを記述する。meta要素でこれを指定しない場合は、ロボットは自動的に全ページの登録及びリンク巡回を行う。
<meta name="author" content="著作者名">サイト名、本名、ペンネーム、ハンドル、会社名、店名など、好きなように。たまには役に立つこともある。
<meta name="copyright" content="Copyright (c) 2003 Teal">パクリや無断転載に対して多少の牽制にはなるかな…。
<meta name="generator" content="ウェブページ作成ソフト名">市販ソフトがよく勝手に書いてくれる。いらんちゅうの！
<meta name="coverage" content="サービス提供対象範囲">ウェブページで扱っている商品やサービスを提供する対象となる範囲を指定する。世界中が対象なら worldwide、日本国内であれば Japan と記述。
<meta name="Targeted Geographic Area" content="地理的対象範囲">ウェブページが対象とする地理的な範囲を指定する。日本が対象であれば Japan、アジアが対象であれば Asia と記述。
<meta name="classification" content="カテゴリ名">ウェブページが属するカテゴリを指定する。general, business, computers, entertainment, internet, miscellaneous, personal などを記述。
<meta name="rating" content="閲覧対象年齢層">ウェブページが対象とする利用者層を指定する。全ての年齢層が対象であれば general、子供向けであれば child、大人向けであれば adult、子供が見ても良いと特に指定したいなら safe for kids などと記述。