404 Not found ページをより効果的にする方法

　
　目的があってページを訪れようとしたユーザが"404 Not found"に遭遇した場合、Webブラウザの戻るボタンを押して1つ前に戻ったり、タブを閉じて再検索をかけたりする。これはちょっともったいない話だ。タイプミスやコピー&ペースト時のミスであれば、目的のページにたどり着けるようにナビゲートする方法ないものか。
　
　この点に関してはOfficial Google Webmaster Central Blogで公開されているMake your 404 pages more usefulで興味深い対処方法が公開されている。"404 Not found"のページにURLの補完候補を表示するようにして、ユーザに正しいURLへのジャンプを促すという方法だ。
　
　GoogleはWebmaster Toolsに新しく実験的な試みとして"Enhance 404 pages"セクションを用意しており、補完されたURLの提示や検索ボックス、サイト検索クエリなどの提案をおこなうJavaScriptスニペットを提供している。"Enhance 404 pages"セクションで生成されるJavaScriptスニペットをカスタム"404 Not found"ページに貼り付ければ、ユーザは提供されるURLを使って補完されたURLへのジャンプや親ディレクトリへのジャンプ、検索クエリの実行やサイト内検索を実施できるようになる。
　
　提供されるJavaScriptスニペットで表示されるコンテンツはCSSを使ったカスタマイズが可能だ。Changing the appearance of the custom 404 widgetで紹介されているようにCSSをカスタマイズすればいい。この方法ならWebサイトのデザインに合わせながら、ユーザに適切なコンテンツへの道を示すことができる。同機能はまだ実験的な側面が強く提案されるURLは適切ではないこともあるというが興味深い機能だ。補完機能は現在改善を続けている段階にあるとされ今後の機能強化が期待される。
　

Changing the appearance of the custom 404 widget
　
　If you're familiar with CSS, you can use it to change the appearance of the 404 widget on your custom 404 page. To change the appearance of your widget, add the following code to your custom 404 page:
　
　

Then edit the CSS to change the element you want. For example, the code below specifies:

* The width, padding, border, and background color for the 404 widget container (#goog-wm).
* The color of the Closest match text, its border and padding, font size, and margin (#goog-wm h3.closest-match).
* The color of the Other things heading (#goog-wm h3.other-things).
* The presence of the Google site search box. In the sample below, the value display:none turns the Google site search box off (#goog-wm li.search-goog). The site search box is visible by default; add this value only if you don't want the site search box to appear (the search box is visible by default).

#goog-wm {
width: 800px;
padding: 1em;
border: 3px solid #aebd63;
background-color: white;
}

#goog-wm h3.closest-match {
color: #8f2831;
border-bottom: 3px dashed #aebd63;
padding-bottom: 0.5em;;
font-size: 170%;
margin: 0;
}

#goog-wm h3.closest-match a { }

#goog-wm h3.other-things {

color: #8f2831;
}

#goog-wm ul li { }

#goog-wm li.search-goog {
display: none;
}