meta要素はHTML文書のエンコード方式、スタイルシート、著者、キーワードなど、HTML文書そのものに対する情報を付加するための要素です。
meta要素は閉じタグを記述してはいけない空要素です。
meta要素にはcontent属性が必須ですが、content属性は値を指定するためのもので余り重要ではありません。
それよりもそのmeta要素が何を表しているかが重要です。
そのmeta要素が何を表しているかを指定するためにname属性とhttp-equiv属性が存在しますが、これは一つのmeta要素にどちらか一つしか使用できません。
こういった理由からmeta要素の説明が難しいのですが、ここでは簡単のために何を設定したいかに焦点を当てて説明していきます。
HTML文書に日本語(厳密には日本語に限らずASCII以外の文字)を使用したい場合、その文字が現れるよりも先にエンコード方式を指定しなければなりません。
つまり、titleなどに日本語を使用したい場合にはまず先にエンコード方式の指定が必須となります。
HTML文書のエンコード方式を指定するにはhttp-equiv属性の値を"Content-type"とし、content属性の値を"text/html; charset=文字コード"とします。
日本語を使用するページではEUC-jpやShift_JIS、UTF-8などが指定できますが、Windowsで作成している限り何も指定しないとShit_JIS方式で保存されるため、Shift_JISを指定すれば問題ないでしょう。
以下にShift_JISをエンコード方式に指定した場合の例を示します。
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
HTML文書の表示にスタイルシートを使用する場合、まずはどんな種類のスタイルシートを使用するかを指定しなければなりません。
つまり使用するスタイルシート(のファイル)の指定よりも先にスタイルシートの種類の指定が必要となります。
スタイルシートを指定するにはhttp-equiv属性の値を"Content-Style-type"とし、content属性の値を"スタイルシートの種類"とします。
普通使用するスタイルシートは、HTMLでもっとも普及しており、W3Cも推奨しているCSSなので、スタイルシートの値の部分はtext/cssが入ると思っておいてもいいでしょう。
以下にCSSをスタイルシートに指定した場合の例を示します。
<meta http-equiv="Content-Style-type" content="text/css">
スクリプトを使用する場合にもスタイルシートのときと同様のことが言えます。
詳細はスタイルシートの項目に譲るとして、ここではJavaScriptを使用する場合の記述方法についての例を挙げます。
<meta http-equiv="Content-Script-type" content="text/javascript">
HTML文書の著者(作者)、著作権、出版社などを指定する場合に記述します。
こういった情報はあったほうがいいのですが、W3Cで推奨されてはいますが必須ではありませんので、詳しい説明は行いません。
<meta name="author" content="著者の名前"> <meta name="copyright" content="著作権保持者"> <meta name="publisher" content="出版社の名前">
meta要素の値にdescriptionやkeywords、robotsを指定することで、ロボット型の検索エンジンをある程度コントロールできます。
descriprionやkeywordsはそのままの意味で、"HTML文書の説明"と"検索キーワード"を示しますが、最近ではこれらに偽の情報を書くサイトが増え、無視されることも多くなりました。
これらよりも重要なのがrobotsで、検索ロボットの情報収集方法を指示します。
robotsを使用することで検索ロボットの検索対象からはずしたり、そのページのリンクを辿るかどうかを決めたり出来ます。
検索対象からはずすことで意味不明な途中からの文書を開かせることを防ぎます。
使い方は例を見てください。
<!-- noindexはそのページを検索対象からはずします。 nofollowはそのページのリンクをロボットに辿らせません。 複数指定する場合はコンマで区切ります。 noindex、nofollow以外にもありますが、よく使用されるのはこの2つです。 --> <meta name="robots" content="noindex, nofollow">
(CSSと日本語を使用するという前提)最低限以下の記述はしておきましょう(勿論環境によって値を変更した上で)。
<head> <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-type" content="text/css"> <link rel="stylesheet" href="main.css" type="text/css"> <title>title</title> </head>