訪問してきたユーザーがサイト上に存在しないURLにアクセスした時に表示されるページで、通常設定をしていないと、無味乾燥なエラーメッセージのみのページが表示される訳ですが、せっかく訪問、もしくはサイトのコンテンツを目当てにクリックして来てもらったのだから、ただのメッセージが表示されるのではなく、google検索窓でさらにサイト内を検索してもらって、お目当てのコンテンツまで行ってもらおうと言う主旨のサイト内検索機能を提供してくれるウィジット。

404などのエラーページはユーザーが離脱する可能性が一番高いページですので、該当コンテンツが存在しないとか、間違ったURLだとしてもなにかリンクの情報なり、ユーザーの求めるコンテンツや機能を提供したいところです。また、検索エンジン経由の場合だと検索エンジンに登録されているURL情報も誤っている可能性があるのでそれもただしておきたいところですね。（その件についてはまたあとで書くよ）

ちなみに、404ページを作成する意味ですが、

• ユーザーに探しているページが見つからないことを明確に伝えます。親しみやすくその気を起こさせるような言葉遣いを使用します。
• 404 ページをサイトのその他の部分と同じデザイン (ナビゲーションを含む) にします。
• 最も人気のある記事や投稿へのリンクのほか、ホームページへのリンクを追加することを検討します。
• 切れたリンクを報告する方法をユーザーに提供することを検討します。
• カスタム 404 ページがどれほど美しく有用であっても、おそらく Google 検索結果に表示したいとは思わないことでしょう。404 ページが Google や他の検索エンジンのインデックスに登録されないようにするため、見つからないページがリクエストされたときにウェブサーバーが実際の 404 HTTP ステータス コードを返すことを確認します。

CSSでデザインも変更することができるようなので、サイトにあったデザインにもできるのがいい感じです。

ただ、このgoogle提供のウィジットですが、検索窓に予めはいるワードがURLのディレクトリ名だったりします。英語のサイトだとかだったら、ディレクトリ名がコンテンツ検索のヒントになりそうなモノですが、日本語の場合ですと、かなり意味なしかも。ただ、ストレスなく次のアクションを提供できるので重宝しますね。

<style type="text/css">
    /* Widget content container */
   #goog-wm { }
 
    /* Heading for "Closest match"
   #goog-wm h3.closest-match { }
 
    /* "Closest match" link
   #goog-wm h3.closest-match a { }
 
    /* Heading for "Other things" */
   #goog-wm h3.other-things { }
 
    /* "Other things" list item */
   #goog-wm ul li { }
 
    /* Site search box */
   #goog-wm li.search-goog { display: block; }
</style>

そのほか404ぺーじいろいろ