SEOだけで満足できない人のためのmetaタグ情報まとめ (前編) 「http-equiv編」

検索エンジン対策、いわゆるSEOが流行した(している)おかげで、headタグ内にmetaタグの「keywords」(キーワード)と「description」(概要)を入れるのは当たり前になった風潮があります。すでにこのタグで検索順位が上がることはまずないでしょうが、適切に入れれば未だに有効であるのは間違いありません。

特にGoogleは検索結果にdescriptionを表示することが多い*1ので、全てのページに同じ概要を入れていると非常に残念な結果になることがあります。ちなみにYahoo!の場合は、カテゴリ登録されているとサイトのトップページ*2は本文やdescriptionを無視してその説明文が表示されるようになっています。(例)
1 : descriptionの文章が採用されないこともよくあり、いつも同じ挙動をするわけではない。 2 : 正確には「登録されているページ」はそうなる模様。普通はサイトのトップが登録されているので、こういう表現になる。

重複するメタデータ(descriptions)の記述されたページ、その後

ところでこのmetaタグ、別にSEOのためにキーワードや概要が設定できるだけではありません。実際は様々なメタデータ、つまりそのページ(HTML)についての情報を書き込むことができます。全てを網羅することはできませんが、その中でも一般的に使われている・有用だと思われるものを紹介していきます。

今回は前編として、metaタグの中でhttp-equiv属性を持つものを取り上げていきます。

meta http-equiv (http-equiv属性)とは

元々はサーバのHTTPヘッダを文章側(HTML)で上書きする仕様だったものです。しかし結局そのような仕様を持つサーバは出てこなかったため、現在は仕様が拡張され文章のデフォルト情報を埋め込む(書き込む)ものになっています。

各ユーザーエージェント(ブラウザやクローラ)は文章内のmetaタグを認識して、その内容によって(主に)ブラウザの挙動が決定されます。文字化けやページの自動移動という点で閲覧者に与える影響が大きく、非常に重要な属性です。

content-type - ファイルタイプ・文字コードを設定する

文章のファイルタイプと文字コードを設定します。一般的には文字コードの設定に使われるだけですが、ファイルタイプの設定もまれにおこなわれている*3ようです。
3 : 意味があるのか？については色々あるようですが、調べた限りほとんど意味はなさそうです。 metaタグのapplication/xhtml+xml - 徒書

<meta http-equiv="content-type" content="ファイルタイプ; charset=文字コード" />

文字コードを設定する場合、日本で主に使われているのは以下の3種類でしょう。HTTPヘッダで文字コードが設定されていない*4ときは、ブラウザはこの情報に基づいて表示する文字コードを設定します。必ず文章に合致した文字コードを設定するようにしましょう。
4 : 実際のWebサーバでもありますし、PCに保存したローカルなHTMLなどを開くときはHTTPヘッダーは送られません。

よくわからないからといってタグのコピーなどで適当な文字コードを設定すると、実際の文字コードとの違いが発生した場合、開いたときに必ず文字化けするファイルが出来上がってしまう可能性があります。文字コードが不明(調べられない)なら、まだ設定しない方がまだましかもしれません。

<meta http-equiv="content-type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="content-type" content="text/html; charset=EUC-JP" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

HTTPヘッダと文章中の文字コードが異なる場合は、HTTPヘッダの方が優先されます。逆にいえば、HTTPヘッダで文字コードが決められているときは、文字コードを任意に設定することはできないということです。

ファイルタイプの設定について

前出のとおりファイルタイプを設定することは(一般的には)ほとんどありませんが、もし設定する場合は以下のような例があります。

<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<meta http-equiv="content-type" content="text/xhtml; charset=UTF-8" />
<meta http-equiv="content-type" content="application/xml; charset=UTF-8" />

content-style-type - スタイルシートを設定する

デフォルトのスタイルシートを設定します。CSS(カスケードスタイルシート)以外が使われることはまずないので、以下のように設定しておけば問題ありません。

<meta http-equiv="content-style-type" content="text/css" />

ただし、content部分に「text/css」以外の不正な文字(間違った文字)を入れると、一部ブラウザ(Firefox)でCSSが無視されます。気をつけた方がいいでしょう。

content-script-type - スクリプトを設定する

デフォルトで使用されるスクリプトを設定します。CSSと同じように普通はJavascriptしか使われないので、(scriptタグを使う場合は)以下のように設定しておきましょう。

<meta http-equiv="content-script-type" content="text/javascript" />

content-language - 言語を設定する

デフォルトの言語を設定します。以下のように設定し、日本語の場合は「ja」を入れます。

<meta http-equiv="content-language" content="言語コード" />

文章内に複数の言語が含まれている場合は、カンマ(,)で区切ることにより複数の言語を指定することができます。(例は日本語と英語。)

<meta http-equiv="content-language" content="ja,en" />

ただmeta要素として記述できるものの、基本的にこのタグに意味はないようです。W3Cの仕様書によると、言語コードには以下のような優先順位が決められています。

ある要素は、次の優先順に従って言語コード情報を継承する。

  • 当該要素自身に設定されているlang属性。
  • lang属性が設定されている、最も近い祖先要素
  • HTTPの Content-Languageヘッダ(これはサーバによって設定され得る)。
  • ユーザエージェントのデフォルト値及びユーザの設定。

Language information and text direction (ja)

(一部省略して引用)

つまりmetaタグに書かれた内容がHTTPヘッダによって送られない限り、仕様としてはmetaタグで言語設定をしても意味がないということです。

同様に言語設定をおこなうものとしては「lang属性」がありますが、上記のとおり仕様ではこちらが優先されます。例えばXHTMLで以下のように記述したとします。

<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">

これでHTML要素にlang属性で「日本語(ja)」が設定されるため、HTTPヘッダーで「content-language」により別の言語が設定されていたとしても、日本語が優先されます。XML宣言をのぞき文章内に登場する全ての要素はHTMLの子要素ですから、結果として内容を日本語と明示することができます。

この段落の内容は不正確だったため、一度書き直されています。

refresh - 読み込みを制御する

ユーザーエージェント(ブラウザ)の読み込みとページ移動を制御します。一般的にはサイトの移転をしたときに、以下のように移転先を指定して自動で移動させるために使われることが多いようです。

<meta http-equiv="refresh" content="時間(秒数);URL=URI" />

ブラウザだけではなく、Yahoo!の検索エンジンはこのタグを読み取ってHTTPステータスコードと同じようにリダイレクト処理をさせることができます。

メタリフレッシュ：<meta http-equiv=”refresh” content=…>を使ったリダイレクトでは、即時にリダイレクトするように設定している場合は301、リダイレクト開始まで一定の時間を設定している場合は302、として扱われます。

Yahoo!検索 ヘルプ - リダイレクトを設定している場合、どちらのURLがデータベースに登録されますか？

タグを書き込むだけの手軽な手段のため、FC2ブログのようにテンプレートにタグが自由に書き込める場合は、使う機会は十分あるでしょう。そのときは、永続的なリダイレクトにするため時間の部分に「0」と入れる必要があります。ただし、Googleはmetaタグによるリダイレクトを推奨していないため、自前でHTTPステータスコードが自由に(301へ)変更できる場合は使用する必要はないでしょう。

リロードの制御

使う機会はあまりないと思いますが、content部分にURIを書き込まない場合は自動でリロードさせることもできます。

<meta http-equiv="refresh" content="時間(秒数)" />

ただ「勝手にリロードする」のを嫌う人もいるでしょうから、何か目的がない限り使用する必要はないと思います。

pragma & cache-control - キャッシュの制御

ブラウザに保存されるキャッシュを制御します。以下のように設定することによって、キャッシュさせない、つまり常に新しいファイルをサーバから読み込ませることができます。

<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />

前者の「pragma」は互換性のために残されているだけなので、新しく追加するなら後者の「cache-control」を使用した方がいいでしょう。ただ場合によっては正常に動作しないことがあるらしく、その時は以下のキャッシュの有効期限を設定すれば解決することがあるようです。

expires - キャッシュの有効期限を設定する

キャッシュの有効期限を設定します。content部分に秒数かGMTで期限を指定します。

<meta http-equiv="expires" content="秒数またはGMT" />

キャッシュをさせたくない場合は、以下のようにcontent部分に「0」を設定します。

<meta http-equiv="expires" content="0" />

設定値が「0」の他に「-1」と書かれているドキュメント*5も見つかるのですが、違いがよくわかりませんでした。0に設定すれば保存時間は0なので、問題はないはずなのですが。
5 : 古めのマイクロソフト系の資料など。

最後に

実はまだ視覚エフェクトを設定するタグもあるのですが、私自身が好きでない*6上にIEの独自拡張なのであえて触れませんでした。知りたい方は下記の関連リンクからどうぞ。
6 : Firefoxなら関係ありませんし、2008年現在で使っているところはほとんどないのですが。

http-equiv以外のmetaタグの解説は後編に続きます。

SEOだけで満足できない人のためのmetaタグ情報まとめ (後編) はてブ数

関連・参考サイト