メタ情報
meta(メタ)には、そのページの情報を記述しておけます。(ブラウザや検索ロボットが必要とする情報を記述しておく場所と考えればいいです)メールアドレス、作成者、更新日など記述できる情報はたくさんありますが、やりすぎるとセキュリティ的にまずくなるので注意。例えば、メールアドレスを記述しておいたら、迷惑メールがくるとか。
■文字コードの指定
【XHTML】
<meta http-equiv="content-type" content="text/html;charset=shift_jis" />
【HTML4.01】
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
【HTML5】
<meta charset="shift_jis">
■キーワード
【XHTML】
<meta name="keywords" content="meta,metaタグ,meta要素" />
【HTML4.01】
<meta name="keywords" content="meta,metaタグ,meta要素">
■ページの説明
【XHTML】
<meta name="description" content="metaについての簡単なメモ" />
【HTML4.01】
<meta name="description" content="metaについての簡単なメモ">
■ページの登録
【XHTML】
<meta name="robots" content="noindex,nofollow" />
【HTML4.01】
<meta name="robots" content="noindex,nofollow">
文字コードの指定
そのページがどんな文字コードで書かれているのかをブラウザに教えることで、ブラウザの誤認識によるページの文字化けを防ぎます。
文字コードにはシフトJISを指定するのが一般的です。(シフトJISはMac、Windowsの標準の文字コード)
【XHTML】
<meta http-equiv="content-type" content="text/html;charset=shift_jis" />
【XHTMLでも文字コードをメタに書く理由】
本当はXHTMLの場合、metaで文字コードの指定する必要はありません。(文字コードの指定はXML宣言のところで行うため)しかし、 古いブラウザとの互換性を考えれば、XML宣言のところだけでなく、metaにも書いておいたほうが良いということになり上記のように記述することになります。
【文字コードはタイトルの前に】
タイトル(title)のあとに文字コードを指定すると、1ページまるごと何も表示されなかったり、文字化けしたりする時があります。タイトル、というより日本語を使う前に文字コードの指定をするようにします。
【XHTML】
<meta http-equiv="content-type" content="text/html;charset=shift_jis" />
<title>メタ情報</title>
【UTF-8】
UTF-8などのUnicode系は、比較的新しい文字コードでユーザー環境によっては対応していないことがあるということで避けられてきました。が、現実にはもう使えるのではないかと思います。(むしろ最近作成されたページはUTF-8が多いです)
Unicodeでは今まで機種依存文字だからと避けられていたローマ数字や丸数字の使用が可能になります。
もういいだろうとは思うんですけどね……それでも他者の環境がわからないのでなかなか使えません。
UTF-8のテストページ
*私のMac環境からは問題なく閲覧できます。
キーワード(keywords)
Googleなどのロボット型の検索エンジン対策としてよく使われます。ページに書かれている内容のキーワードとなる言葉を記述しておくと、ひっかかりやすくなるという。
カンマで区切ることで、いくつでも記述できますが、ページの内容と関係のないキーワードを記述したり、上位表示させようと多くのキーワードを書きすぎたりするとユーザーの利便性を損ね、かえって検索の精度を下げるということでNGになっています。このような書き方に対してペナルティを課す検索エンジンもあるため、必要と思われるキーワードだけを記述します。
【XHTML】
<meta name="keywords" content="meta,metaタグ,meta要素" />
ページの説明(description)
ロボット型の検索で、検索結果が表示されるときに、descriptionにページの説明を記述しておくと、その説明文が表示されます。これも多くの検索エンジンで利用されており、上記のキーワードとセットで利用されることが多いです。
【XHTML】
<meta name="description" content="metaについての簡単なメモ" />
ページの登録(robots)
時には検索ロボットに拾われたくないページもありますね。そのような時はrobotsで指定できます。
- このページを拾われたくないとき…noindex
- ページ内のリンクを辿(たど)られたくないとき…nofollow
【XHTML】
<meta name="robots" content="noindex,nofollow" />
検索ロボットによっては「拾わないで」と指定しても、持って行ってしまうことがあるので、必ずしも有効というわけではないです。
ただ日本の場合、Yahoo! JAPANとGoogleでシェア9割近く占めるため、それなりに効果はあります。