<span class="mt-enclosure mt-enclosure-image" /><img alt="404 not foundページを拡張するウェブマスターツールの新機能" src="http://web-marketing.zako.org/images/404-not-found.jpg" width="514" height="204" style="" /></span>

<p>これは良い！まだテスト機能だそうですが、404ページにコードを貼り付けるだけで間違いの候補を表示してくれる優れもの。まるでGoogle検索でキーワードを間違えたときのようなものになっています。</p>


<!--more-->
<h3 class="header-label">404 Not Foundページを強化する新機能</h3>
<p>このウェブマスターツールの拡張機能が実現してくれるものは下記の3点。</p>
<ul>
<li>サイトの検索ボックスと検索の候補を表示</li>
<li>間違った URL に対する URL の候補を提示</li>
<li>サイトマップページへのリンクを表示</li>
</ul>
<p>また、表示された検索ボックスに、関連しそうなキーワードが既定値として入力されているのも特徴、実装したイメージは以下の通りです。</p>
<p><img src="http://lh3.ggpht.com/sigeos15/SKv5CbZOSZI/AAAAAAAACio/EF8bH6vBbN8/s400/404-not-found-suggest.jpg" /></p>
<p>これが表示されるようになると万一ページがない場合にも親切ですよね。なにしろGoogleの技術が自分のサイトに反映されるという捉え方をすると嬉しい気もしますｗ</p>
<p>そんなことよりもステータスコード 404をしっかり返すほうが重要というものもありますが、今回はせっかくきてもらった人を逃がさないという観点でご紹介。</p>

<p>以下に拡張の手順など4点を書き留めておきます。<br />
早速試したい方は<a class="google" href="https://www.google.com/webmasters/tools/dashboard?hl=ja" onclick="window.open('https://www.google.com/webmasters/tools/dashboard?hl=ja'); return false;">Google ウェブマスター ツール</a>へどうぞ。</p>
<ol>
<li>404ページ拡張手順</li>
<li>拡張部分のデザイン変更</li>
<li>独自404ページの設定方法</li>
<li>404ページのガイドライン</li>
</ol>

<h4 class="header-label">404ページ拡張手順</h4>
<p>404ページ拡張機能を利用するには<strong class="red">Googleアカウント</strong>と<strong class="red">Googleウェブマスターツールへのサイト登録</strong>が必要です。</p>
<ol>
<li><a class="google" href="https://www.google.com/webmasters/tools/dashboard?hl=ja" onclick="window.open('https://www.google.com/webmasters/tools/dashboard?hl=ja'); return false;">Google ウェブマスター ツール</a>を開きます</li>
<li>サイドメニューの「運用ツール」&gt;「拡張された 404 ページ」をクリック</li>
<li>下記のように言語を選択し、コードを取得して404ページへ貼り付ければOK<br /><img src="http://lh5.ggpht.com/sigeos15/SKv924SmPmI/AAAAAAAACiw/UZgZIpeUZto/s400/404-not-found-suggest-2.jpg" /></li>
</ol>

<h4 class="header-label">デザインの変更</h4>
<p>デザインの変更は下記のような部分のCSSをいじることで可能になっています。</p>
<textarea name="code" class="css" cols="60" rows="5" id="code">
<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></textarea>
<p>影響しそうなのは"h3"の部分でしょうか、その部分を変更するだけでもデザインをあわせることができそうです。</p>
<h4 class="header-label">独自404ページの設定方法</h4>
<p>ブログサービスを利用している場合は独自で作ることができないことが多いと思いますし、カンタンに設定可能なサーバーもあるでしょう。ここでは.htaccessを使って設定する方法を明記しておきます。</p>
<p>一番簡単な方法は<a class="web-site-link" href="http://www.htaccesseditor.com/#a_errorPage" onclick="window.open('http://www.htaccesseditor.com/#a_errorPage'); return false;">「.htaccess Editor」</a>を利用してエラーページの設定をします。</p>
<p>既に.htaccessファイルを使用していたり、実際にやってみたい方は、下記のコードをテキストファイルに貼り付け、「htaccess.txt」という名前で保存。サーバーに<a rel="nofollow" class="tool-link" href="http://www.vector.co.jp/soft/win95/net/se061839.html" onclick="window.open('http://www.vector.co.jp/soft/win95/net/se061839.html'); return false;">FFFTP</a>などを使い、その404ページがあるディレクトリへアップロードしてください。（※サブドメインを使っている場合などで場所が変わると思います。）</p>
<p>404ページを「404.html」という名前でトップディレクトリにおいた場合。</p>
<code>ErrorDocument 400 設置するサイトの相対パス/404.html</code>
<p>ここで相対パスにしておくと、404ページが表示された際に間違ったURLのままになるので、下記画像のように、URLの候補が表示されるようです。</p>
<p><img src="http://lh5.ggpht.com/sigeos15/SKwd5eOjmLI/AAAAAAAACjQ/GJ9nqsj6m9A/s400/404-not-found-suggest-3.jpg" /></p>
<h4 class="header-label">404ページのガイドライン</h4>
<p><a class="google" href="http://www.google.com/support/webmasters/bin/answer.py?answer=93641&amp;hl=ja" onclick="window.open('http://www.google.com/support/webmasters/bin/answer.py?answer=93641&amp;hl=ja'); return false;">ウェブマスター向けヘルプ センター</a>に良いことが書いてあったので引用。</p>
<blockquote><ul>
<li>ユーザーに探しているページが見つからないことを明確に伝えます。親しみやすくその気を起こさせるような言葉遣いを使用。</li>
<li>404 ページをサイトのその他の部分と同じデザイン (ナビゲーションを含む) にする</li>
<li>最も人気のある記事や投稿へのリンクのほか、ホームページへのリンクを追加することを検討</li>
<li>切れたリンクを報告する方法をユーザーに提供することを検討</li>
<li>カスタム 404 ページがどれほど美しく有用であっても、おそらく Google 検索結果に表示したいとは思わないことでしょう。404 ページが Google や他の検索エンジンのインデックスに登録されないようにするため、見つからないページがリクエストされたときにウェブサーバーが実際の 404 HTTP ステータス コードを返すことを確認します。</li>
</ul></blockquote>
<p>つまりは404ページはサイト運営者による不備で読者に迷惑をかけてしまっているのだから、最大限に気を遣うようにしようということです。そして404のステータスコードを返すことも忘れないこと。私はこれを怠ってしまってましたが、やはりちゃんとやっておかないといけないんですね。。。</p>

<p>Via:<a class="web-site-link" href="http://googlewebmastercentral.blogspot.com/2008/08/make-your-404-pages-more-useful.html" onclick="window.open('http://googlewebmastercentral.blogspot.com/2008/08/make-your-404-pages-more-useful.html'); return false;">Official Google Webmaster Central Blog</a></p>