29日目:すべてに検索がかけられるようにする

どんな Webサイトもサイト内検索をつけるべき。以上。

良いサイト内検索のためのルール:

  1. 全ページに検索ボックスをつけよう。できれば "above the fold(ページが表示された時、スクロールせずに閲覧可能な可視領域。)"に。 (スクロールしなくても見えるようにね)
  2. 初期設定ではすべてを検索の対象にようにしておこう。投稿、コメント、両方を検索の対象にするオプションがついてるなら、「両方」を選んでおこう。
  3. 検索のボックスを詳細オプションをつけすぎてゴチャゴチャにならないように。オプションには、ブーリーン値(trueかfalse)、大文字小文字の区別、正規表現などなどがあるね。まずは Google をマネした初期設定(すべてのキーワードを含む、大文字小文字を無視、正規表現は使わない)にしておいて、あとは全部「詳細検索オプション」のほうへ移そう。
  4. 検索のボックスには 適したラベルアクセスキーを設定しよう。accesskey="4" がオススメ。(注:15日目で、どうやって accesskey を検索フォームに指定するか言ったけど、間違ってた。クロスブラウザ率を高めるためには、accesskey<input> じゃなくて <label> につけたほうがいいや。以下の正しい例を参照してください。

誰がトクする?

ジャッキーマイケルビルリリアンマーカスと、まぁその他世界中すべてのひとが、うまく作られた検索エンジンには助けられると思うよ。特にブログとかニュース系のサイトだと、コンテンツがまず時系列で整理されてるから、メインのページから外れた特定の記事を探すのはすごいイライラする。Google で使える "site:domainname.com" っていうの(検索対象を特定のドメインのみに絞ってくれる)を知ってる人は少ないし、Google がインデックスをするのはどうせ月に1回だからね。自分でサイト検索をつけよう。

どうしたらいい?

Movable Type ユーザは MT-Search プラグインを使ってみるといい。これから僕が MT でサイト作るときにはコレ使うことに決めてる。メインのブログ(投稿数900強)で使ったら割と遅かったけど、ページ数がそこまでないサイトならイイ感じらしい。アップデートはされてないみたいだけど使えるよ。(訳者注:MovableType 2.5 からは本家に導入されたので、プラグインの必要なし。バージョン2.5以降にはMovableType自体にすでに組み込まれている。)

独自ドメインでブログを運営してる人は、サードパーティの検索機能をつけてコンテンツをインデックス、検索結果をオンデマンドで表示することもできる。Atomz Express Search は Blogger.com のオススメ。(訳者注:2003年に Google が Blogger.com の運営会社 Pyra Labs を買収。以後 Blogger.com でも Google フリー検索 を奨めている。)Google フリー検索は、僕も自分のブログで使ってる。どっちもある程度カスタマイズできて、なかなか早い。ただコンテンツのインデックスは分刻み秒刻みで最新ってわけにはいかないけどね。検索ボックスの見ためがカスタマイズできるよ。僕のはこんなふう(<label>accesskey の使いかたに注目):

<form id="searchform" method="get" action="http://www.google.com/custom">
<p id="searchlabel"><label for="q" accesskey="4">このサイトを検索:</label></p>
<p id="searchinput"><input type="text" id="q" name="q" size="18" maxlength="255" value=" " /></p>
<p id="searchsubmit"><input type="submit" value="Search" />
<input type="hidden" name="cof" value="LW:116;L:http://diveintomark.org/images/eyes.jpg;LH:68;AH:left;GL:0;S:http://diveintomark.org/;AWFID:0d8ffcebe359c844;" />
<input type="hidden" name="domains" value="diveintomark.org" />
<input type="hidden" name="sitesearch" value="diveintomark.org" />
</p>
</form>

注:これは自分のブログにカット&ペーストできないから気をつけて。Google フリー検索を使うには、サインアップして、見えない cof 部分に入れるための自分専用のコードをもらってね。

さらなる情報源(英語)