デザイン指針検討−メタタグ−

結構いろんな目的に使える便利なタグ。

詳しい情報は参考リンク先を見てもらうことにして、とりあえず、どのタグをどういう目的で使うか、というのをまとめていきます。

先に必ず入れることにするもの。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="keywords" content="キーワードを,区切りで入力。3〜5個。" / >
<meta name="description" content="ページの概要・キャッチコピーを記載。60〜180字。" />
<meta name="robots" content="index,follow" />
<meta name="creation date" content="November 22, 2009" / >

必ず入れるかどうか保留するもの

<meta name="Author" content="会社名。他の要素は入れない。"/>
<meta name="tel" scheme="電話番号″ />
<meta name="Copyright" content="Copyright (C) 20xx " />

そのほか場合によっては入れるもの

<meta http-equiv="Pragma" content="no-cache" />
<meta name="classification" content="ジャンル名" />
<meta name="revisit_after" content="n days" />

極力入れないもの

<meta http-equiv="Refresh" content="再読み込みまでの秒数" />
<meta http-equiv="Refresh" content="秒数;URL=" />
<meta http-equiv="Expires" content="Sun, 22 Nov 2009 21:00:00 GMT" />
<meta http-equiv="Page-Enter" content="blendTrans(Duration=n.m)" >
<meta http-equiv="Page-Enter" content="revealTrans(Duration=n.m,Transition=番号)" >

考察

1. コンテントタイプ

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
この3つは必須で。製作時にページ内にJavaScriptが無くても、Script-Typeは記述しておく。仕様変更や後日、JavaScriptをページ内に埋め込む状況が生じたときの手間を省くため。
とはいえ、商用サイトであればアクセス解析はほぼ必須だし、Ajaxを使う場面は今後増えると予想されるので入れないという状況はあまり考えられない。
ただ、ロールオーバーなどの視覚効果のためにjsを使うことは極力避けたい。CSSで代替できるものは極力CSSを使用する。

2. キーワード

SEO本には5〜10個とある。しかしここでは最大5個と設定。SEO業者は5個以上つけるはずなので、その裏を掻く。
そもそも、重要なキーワードが5個以上というのは、1ページに入れる情報量が多すぎると判断すべきだろう。基本単語を3個に絞れれば最上とする。
例えば、検索をするときに使うキーワードは、おおむね3個。そのときに完全一致することを目指す。5個はいわゆる両面待ち。5個以上は揺らぎ対策とする。

3. 概要

検索の順位が上位でなくても、概要がしっかりしていれば閲覧者をひきつけることができる。長すぎると読まれないし、短すぎると検索者にとって情報が少なすぎる。例えばはてなブックマークは100字だし、Twitterは140字。それをフルに使い切るとき、基本的に一文では収まらない。一文60字と仮定して3つまでとする。

4. 検索ロボット制御

<meta name="robots" content="index,follow" />
検索エンジンに登録させ、リンク先も巡回させる。これを原則とする。
おそらく、外的SEOでは次のタグを使用する。
<meta name="robots" content="noindex,follow" />
このサイトは検索エンジンに登録させないが、リンク先は巡回させる。外的SEOを行っている会社の顧客のサイトを調査する。すると、内的SEOはゴテゴテしていないのに、検索順位は高い。そこでリンクしている先をlink:URLで検索してもほとんど見つからない。多分、このタグが埋め込まれているのだろう、と思う。
もっとも、そんなSEOは邪道だと思うし、本来Google八部されるものなのでやらない。
<meta name="robots" content="index,nofollow" />
<meta name="robots" content="noindex,nofollow" />
ブログ、掲示板、コメント欄を設けるページではこれを使用する。主にスパム対策として。

5. 製作・更新日

<meta name="creation date" content="November 22, 2009″ / >
人間向けにはフッターあたりに明記、検索エンジン向けにこのタグ。検索エンジンが参照してるかどうかは知らないけど。まあ、あれば検索エンジンも楽ができるんじゃないかなと思ってる。

6. 保留対象

<meta name="Author" content="会社名。他の要素は入れない。"/>
フッターにaddressタグで囲ってやればそれでいいのではないか、という気がするので保留。
<meta name="tel" scheme="電話番号″ />
telの他、faxも同様。これは携帯サイトで活用されるようなものなのだろうか?要調査。
<meta name="Copyright" content="Copyright (C) 20xx " />
著作権表示。これもフッターに人が見える形で書けばそれでいいのではないかと思うので保留。

7. 場合によっては入れるもの

<meta http-equiv="Pragma" content="no-cache" />
ブラウザにキャッシュを残さない指示。サイト製作中には必ず入れることにする。
というのも、デザインの細かな修正を施したとき、ブラウザで確認したときに何も変わらない事が多々あり、これになかされることが多いからです。
時には何度再読み込みをしてもキャッシュが消えない、ブラウザのツール>オプションからキャッシュ消去の操作をしても前の状態で残る(おそらく表示中のページのキャッシュは残している)ということもあり、効率は悪いわストレスは溜まるわ。遠隔地にいる顧客にページを確認してもらっても、これが原因で「変わってないよ」というクレームが来ることもあります。このタグ一つでそれが回避できるのなら、使わない手は無い。
ブログシステムでの納入を行った場合、このキャッシュによって、
「修正したのに表示が変わらない。」
というクレームが入ることがあります。この場合、サイト製作後もこのメタタグを残しておく必要があります。しかし、このメタタグは、キャッシュを禁止しているわけですから、いかにも検索エンジンとの相性が悪そうです。SEO的に危ない。
そこで、そのような顧客の多くがWeb技術にあまり詳しくなく、使用しているブラウザがIEということを利用して、このメタタグをIEのみに限定するように細工します。即ち、
<!-- [if IE]>
<meta http-equiv="Pragma" content="no-cache" />
<![end if IE] -->

<meta name="revisit_after" content="n days" />
検索エンジンロボットに対し、n日後に再度クロールに来てね、というお願いタグ。更新頻度が高いサイトでは使いたいところ。多用すると検索エンジンの負荷が高くなるので控えめに。


<meta name="classification" content="ジャンル名" / >
サイトのジャンル。
general, business, computers, entertainment, internet, personalなどがあるらしい。
検索エンジンがこれを見てくれているなら、検索者の効率も上がりそうなので要検討。

8. 極力入れないもの

<meta http-equiv="Refresh" content="再読み込みまでの秒数" />
アクセシビリティが極端に悪化するため使用しない。
<meta http-equiv="Refresh" content="秒数;URL=" />
別のURLに飛ばす設定。やるなら301(永久移転)か302(一時移転)リダイレクトを使用する。
<meta http-equiv="Expires" content="Sun, 22 Nov 2009 21:00:00 GMT" />
ブラウザのキャッシュを消去する日時を指定するタグ。期間限定のイベント物に使うくらいしか用途が思いつかない。
<meta http-equiv="Page-Enter" content="blendTrans(Duration=n.m)" >
<meta http-equiv="Page-Enter" content="revealTrans(Duration=n.m,Transition=番号)" >
トランジションというらしい。IEのみ対応のようだが、今のWeb標準の流れの中でこれが今も残っているのか不明。とはいえ、現在も対応しているブラウザがあるなら、JavaScriptなどに頼らずとも面白い効果を演出できるので検討の余地はあると思う。