Web制作者がおさえておくべきmeta要素プロパティの種類
公開日：2014年4月29日
最終更新日：2014年7月13日
meta要素(メタタグ)は、ユーザーエージェント(ブラウザ、クローラーなど)がWebページを読み込んだ時の動作を決めるために使用されます。meta要素のプロパティ(設定項目)にはたくさんの種類がありますが、Web制作者として最低限知っておくべきものを解説します。
meta要素には、ページがどのようにできているかHTML文書自体の情報(メタデータ)を、指定します。
meta要素のプロパティの種類はたくさんありますが、ほとんど使われていないものや記述していても効果が不明のものも存在します。実際W3Cではプロパティの名前と値を定義しておらず、meta要素の中でどのプロパティをサポートするか、またどう解釈するかはユーザーエージェント次第です。サポートしないmeta要素の記述は無視されます。
HTML文書内でmeta要素の挿入する場所は、<head>～</head>の間です。
ここで解説する記述例はXHTMLを基準にしています。
【コンテンツ】
meta要素属性
覚えておくべきは次の４つの属性です。
name属性
一般的なメタデータ用として、プロパティ名を指定します。
必ずcontent属性とセットで使用し、値はcontent属性に記述します。
http-equiv属性
当初はname属性の代わりとして働き、HTTPサーバーがHTTP応答メッセージヘッダに用いる情報収集のために使われるよう規定されました。現在はユーザーエージェントにとって、HTTP応答メッセージヘッダと同等の働きをするメタデータを記述するために使われています。
必ずcontent属性とセットで使用し、値はcontent属性に記述します。
content属性
name属性あるいはhttp-equiv属性で指定したプロパティの値を指定します。
charset属性
HTML5で追加された属性で、文書で使われる文字エンコーディングを指定します。
文書中にcharset属性を持ったmeta要素は２つ以上記述してはいけません。
ファイルタイプ・文字エンコーディングの指定
http-equiv属性を用い、文書で使われるファイルタイプと文字エンコーディングを指定します。
日本語が現れる前に指定する必要があるので、headタグの直後に書くのが良いでしょう。
【記述例】
日本で使用される文字エンコーディングは、だいたい以下の３種類のいずれかです。
|
1 2 3 |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" /> |
なお、文字エンコーディングの値は大文字/小文字を区別しませんので、
'UTF-8'は、'utf-8'でも可です。
HTML5文書での文字エンコーディングの指定は、charset属性を用いて以下のように記述します。
|
1 |
<meta charset="UTF-8"> |
スタイルタイプ・スクリプトタイプの指定
http-equiv属性を用い、デフォルトで使用されるスタイルシート・スクリプトを指定します。
【記述例】
通常はスタイルシートはCSS、スクリプトはJavaScriptですので、以下のように指定します。
|
1 2 |
<meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> |
HTML5ではデフォルトのスタイルシートはCSS、スクリプトはJavaScriptとなりますので、記述を省略する場合が多いです。
ページ内容の説明
Google検索結果のスニペットに表示されるなど、多くの検索エンジンで利用されますので、利用者から見て適切にページ内容を表すように、ページごとの文章を記述します。
ただSEO的には、現在ほとんど効果がないと言われています。
【記述例】
|
1 |
<meta name="description" content="ページ内容の説明" /> |
ページのキーワード
ページ内容に関連するキーワードを指定します。複数キーワードを指定する場合には、半角カンマ(,)で区切って指定します。
現在主要な検索エンジンでは、検索順位評価において考慮していません。
【記述例】
|
1 |
<meta name="keywords" content="キーワード1,キーワード2,キーワード3" /> |
検索エンジン(クローラー)の制御
クローラーがどのようにそのページを扱って欲しいかを指定します。この指定に従うかはクローラーの処理次第です。
【記述例】
|
1 |
<meta name="robots" content="値1,値2,値3" /> |
値としては、以下が設定できます。
| index | ページをインデックスに登録することを許可する |
|---|---|
| noindex | ページをインデックスに登録することを拒否する |
| follow | リンク先のページをたどることを許可する |
| nofollow | リンク先のページをたどることを拒否する |
| archive | ページのキャッシュリンクを表示することを許可する |
| noarchive | ページのキャッシュリンクを表示することを拒否する |
| noodp | 検索結果のスニペットにODP/DMOZの説明文を使用しない |
| all | index,followと同じ |
| none | noindex,nofollowと同じ |
なお、GoogleのクローラーであるGooglebotだけを制御したい場合は、
「name="Googlebot"」とします。
viewportの設定
スマホ画面向けに、ページの表示領域を設定する場合に記述します。
【記述例】
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
スポンサーリンク
