1. 2009年06月
  2. ≪
  3. 1
  4. 2
  5. 3
  6. 4
  7. 5
  8. 6
  9. 7
  10. 8
  11. 9
  12. 10
  13. 11
  14. 12
  15. 13
  16. 14
  17. 15
  18. 16
  19. 17
  20. 18
  21. 19
  22. 20
  23. 21
  24. 22
  25. 23
  26. 24
  27. 25
  28. 26
  29. 27
  30. 28
  31. 29
  32. 30
  33. 31
  34. ≫
  35. 2009年08月
  1. WebとPCのメモ帳
  2. スポンサー広告
  3. SEOだけで満足できない人のためのmetaタグ情報まとめ (前編) 「http-equiv編」
  1. WebとPCのメモ帳
  2. Web・Blog
  3. HTML・CSS
  4. SEOだけで満足できない人のためのmetaタグ情報まとめ (前編) 「http-equiv編」

Ads by Google

--
--/--(--)
Category
Tags
  • No Tag
上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
拍手する はてなスター
関連エントリ
ソーシャルブックマーク登録数
  • hatena
  • livedoor
  • Buzzurl
  • Yahoo!
  • FC2
  • Delicious

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

2008
09/04(Thu)
Category
Tags

検索エンジン対策、いわゆる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の子要素ですから、結果として内容を日本語と明示することができます。

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

ほぼ同等の機能としてlang属性を使う「<html lang="ja">」があるのですが、W3Cはmeta要素で言語を指定することを推奨しているようです。また、主言語を指定するのは1カ所であるべきだともいっています。

主言語を指定する場所は、推奨された1 ヶ所であるべきです。主言語は、META 要素で指定することが推奨されます。

HTML における主言語

W3Cの推奨をそのまま採用するなら、meta要素(content-language)で言語を指定して、<html lang>での言語設定は使わないということになるのでしょうか。ただ現在はXHTMLで「xml:lang」を設定することが多く、meta要素での言語設定はあまり使われていないようです。

このBlogの場合は冗長ですが、meta要素とlang属性の両方でjaを設定しています。FC2ブログはHTTPヘッダで「content-language=en」と送られているため、何となく「content-language=ja」に直しておかないと気持ち悪いというのが理由なんですが。

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

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タグ情報まとめ (後編) はてブ数

関連・参考サイト
拍手する はてなスター
関連エントリ
ソーシャルブックマーク登録数
  • hatena
  • livedoor
  • Buzzurl
  • Yahoo!
  • FC2
  • Delicious

コメント

lang 属性について

>ほぼ同等の機能としてlang属性を使う「<html lang="ja">」があるのですが、W3Cはmeta要素で言語を指定することを推奨しているようです。また、主言語を指定するのは1カ所であるべきだともいっています。

そのような規定を見たことがないのですが，根拠があればご教示いただければさいわいです。HTTP-Header　の Content-Language 欄で言語が指定されていれば UA は文書を取り寄せる前に言語を判別できて便利でしょうが，そういうことですか（それでも meta とは直接関係ありませんが）。

なお仕様書 [www.w3.org/TR/html401/struct/dirlang.html] には優先順位が以下のように説明されています。

An element inherits language code information according to the following order of precedence (highest to lowest):

* The lang attribute set for the element itself.
* The closest parent element that has the lang attribute set (i.e., the lang attribute is inherited).
* The HTTP "Content-Language" header (which may be configured in a server).
* User agent default values and user preferences.

HTTPサーバがmetaを読み取ってContent-Languageに反映してくれるような環境ならばともかく，そうでないのであればmetaの出る幕はなさそうに思います。

なお，言語コードとして例示されている US は誤りです。国コードですので。米国の英語なら en-US として示すことはできます。

No Title

ご指摘ありがとうございます。あの部分は検索中に見つかった資料と文中で引用したページの情報から書いたのですが、本家の仕様書の方はmeta情報のところばかり見てしまってチェックが不十分でした。

先ほど仕様書を見直してみましたが、確かに内容としては誤りが多いですね。サーバ側でHTTPヘッダを書き換えてくれるわけではない以上、「書くことはできても意味はない」「要素にlang属性が設定されていればそちらが優先される」ということになると。

ご指摘の部分はなるべく早く内容を修正して、アップロードし直そうと思います。ありがとうございました。

Comment Form
このエントリへコメントを書く
(任意)
(任意) 公開されません
(任意)
(必須) HTMLタグは使用できません
(任意) ID生成に使用します
(任意) チェックを付けた場合はコメント欄に何も表示されません。また、返答も基本的におこないません。

トラックバック

Trackback URI
http://128bit.blog41.fc2.com/tb.php/174-8f8b4095 この記事にトラックバックする(FC2ブログユーザーのみ)

スパム対策のため言及リンクのないトラックバックは反映されません

Page Top

ブログパーツ