404エラーページでSEO効果を得るための4つの要素

404エラーアイキャッチ

沈黙のWEBマーケティング後編の記事を上げたら、期間限定で書籍が半額セールで販売されていて、購入するかどうか悩んでいる苦労詐欺だ。
普通に買おうと思ったら2000円ぐらいするんだけど、1000円で購入できるのはお得だな～

沈黙のWEBマーケティングを現役SEO担当が読んでみた後編 - 現役seo担当が教えるよブログ

沈黙のWebマーケティング ?Webマーケッターボーンの逆襲? ディレクターズ・エディション

posted with カエレバ

松尾茂起エムディエヌコーポレーション 2015-01-30

Amazon

楽天市場

半額セールは6月頭ぐらいまでみたいだね。
とりあえず最終日までに購入するかどうか検討してみる。

さて、皆さんは404エラーページの存在を知っているかな？
実はこのエラーページ、SEOにとっても重要なページなので、今回はそのSEO効果やエラーページの作り方を教えるよ。

404エラーページが出現する条件

エラーページ出現条件

404エラーページは「エラー」とついていることからわかると思うけど、サイト内で何かしらのエラーが起こった際に表示されるページだよ。
エラーページが表示される条件は以下の3つだよ。

前は表示されていたが、消されてしまったページにアクセスした時
URLを入力ミスした状態でアクセスした時
リンク切れしている内部リンクをクリックした時

404はサイト内の存在しないURL・存在しないページにアクセスされた時に表示されるページだよ。
このページが表示されるってことは、ドメイン部分までは正しく入力されているけど、それより後ろが存在しないものになってるよってことだね。

このエラーページは基本的には用意されているところが多いよ。
FTPを繋げて、基本的に自作のHTML・CSSをアップロードしてるみたいなやり方をしているところだと、流石に設置されてないかな。

エラーページが一切設置されていない場合ってどうなるんだ？

確か「サイト自体が存在しません」みたいなページが表示されたと思うわよ。

なるほど、ユーザーはサイトが潰れたんだと思って、そのまま離脱していくな。

設置されているだけで、サイト自体は存在してるってことが伝わるわね。

消したページやドメインより後ろが存在しないURLにアクセスされた時に表示されるエラーページが404エラーページだよ。
このエラーページが表示されるってことは、ドメイン部分までは存在していて正しいけど、それ移行の部分が存在しないものになってるってことだよ。
何のサービスも使わないで、FTPを繋げてサイトをアップロードしているって場合じゃない限りは、基本的に設置されていることが多いよ。

404エラーページのSEO効果について

エラーページSEO効果

まず、リンク切れなんかで、404エラーがサイト内で出現したとしても、SEOとしてマイナスになるってことはないよ。
404エラーページの内容が「存在しないURLです」的な一文しか表示してなくても、検索エンジンからの評価に悪影響を与えたりはしないから大丈夫。

ただこの404エラーページをカスタムすれば、SEOとして↓のような効果を得られるんだよね。

アクセスしたユーザーの混乱を防ぐことで、利便性の向上に繋がる
ユーザーだけでなくクローラーの回遊率も上がることで評価を得られる

こういった効果を得られるから、デフォルトで設置されている「存在しないURL・ページです」だけの表記にするよりは、カスタムしておいたほうがいいと考えられるよ。
SEOとしての効果云々も大事だけど、アクセスしたユーザーが迷わないように誘導してあげるようなページにしてあげることが大事かなと思うよ。

そもそも、404ページを弄ることってできるものなの？

使っているサービスなんかにもよるわね～。

触れるやつもあれば、全く触れないやつもあるのか。

WPみたいなものであれば、自由に設置できるわね～。

404エラーページはリンク切れ等でサイト内に出現しても、SEOとしてサイトの評価が下がったりすることはないよ。
404エラーページの内容が「存在しないページ・URLです」一文だったとしても、検索エンジンからの評価に悪影響を与えるってことはないよ。
ただ、評価をもらえるようにカスタマイズすれば、利便性向上やクローラー回遊率UPで検索エンジンからの評価が上がる可能性があるよ。

SEO効果を得るための4つの要素

4つの要素

404エラーページをカスタマイズすることで、評価が上がりやすくなるわけだけど、実際にどのようにしたらいいのかを説明するよ。
404エラーページを作成する際に以下の4つの要素を盛り込むことで、検索エンジンからの評価UPに繋がると思うよ～。

アクセしてきたユーザーに対してページが見つからないことを明記している
404エラーページのデザインは他ページのデザインと統一させる
人気記事・投稿へのリンク、TOPページへの誘導リンクが設置されている
404HTTPステータスコードをサーバーに返すことができている

この要素に関しては、きちんとGoogle側で公式に定めているものだよ。
この内容に沿った404エラーページを作れば、検索エンジン側からある程度評価をもらえると考えられるよ。

404 ページのカスタマイズ - Search Console ヘルプ

一枚絵で「存在しない・見つからないページだよ」的ことが明記されていれば、それだけでも実は十分なんだよね。
ただ、エラーページでもきちんとユーザーのことを考えて作ってあげれば、SEOにも繋がるようになるよってことだね。

ページが存在しない・見つからないっていう明記だけでも、問題はないんだな。

そうね～、大体のサイトの404エラーページはそういった明記のみになっているわね。

エラーページでまで作り込まれている方がいい感じには見えるか。

そのほうが、よりユーザーのことを考えているサイトには見えるわね。

4つの要素を404ページに盛り込むことで、より検索エンジンから評価されやすいページにすることができるよ。
今回掲載した要素は、きちんとGoogle公式ページに掲載されているものになるよ。
「存在しない・見つからないページ」っていう明記だけでも問題ないけど、どうせならユーザーの利便性を考えたページにしてあげたいよね。

実際にはてなブログで作ってみた

SEOブログでやってみた

ここまで404エラーページの役割やSEO効果について書いてきたわけだけど、今回は実際にこのSEOブログ内の404エラーページをカスタムしてみたよ。

現役SEO担当が教えるよブログ404エラーページ

↓はカスタムして設置したコンテンツの内容だよ。

エラーページ用画像
ページが見つからないことを明記＆トップへのリンク
サイト内検索窓
人気の記事・投稿一覧
カテゴリーリンク

ページが見つからないことを明記しして、サイト内検索や人気記事・カテゴリー内から目的のページを探せるようにしてあるよ。
まぁ、画像とページが見つからないことを明記している以外は全てサイドバーに掲載されている内容なんだけどね。

ちなみに設置してあるのは僕のアイコンの差分で王冠＆焦り顔Ver.だよ。
ミデモさん(id:saityo69)にリクエストして描いてもらったから、今回エラーページに設置して、このブログのブログアイコンとしても設定したよ。

ソースコードは↓で、コピーしてデザインカスタマイズのヘッダ内「タイトル下」にコードを貼り付けると実装されるよ。

<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
    if ($('#main-inner').children().hasClass("no-entry")) {
      var content = "<img src='画像URL' width='100%'>";
        content += "アクセス頂いたページは記事の削除・URLの変更などが原因で、ページが表示できなかったよ。<br />申し訳ない。<br />トップページへは<a href='サイトURL'>こちら</a>から戻れるよ<br />" ;
        content += "<h3>サイト内検索</h3>";
        content += "<div class='hatena-module hatena-module-search-box'>";
        content += "<div class='hatena-module-body'>";
        content += "<form class='search-form' role='search' action='http://www.seoteach.xyz/search' method='get'>";
        content += "<input type='text' name='q' class='search-module-input' value='' placeholder='記事を検索' required>";
        content += "</form>";
        content += "</div>";
        content += "</div>";
        content += "<input type='submit' value='検索' class='search-module-button' />";
        content += "<br /><hr>";
        content += "<h3>当サイトの人気記事から探す</h3>" ;
        content += "<br /><hr>";
        content += "<div class='hatena-module hatena-module-entries-access-ranking'";
        content += " data-count='10'";
        content += " data-display_entry_category='0'";
        content += " data-display_entry_image='1'";
        content += " data-display_entry_image_size_width='100'";
        content += " data-display_entry_image_size_height='100'";
        content += " data-display_entry_body_length='0'";
        content += " data-display_entry_date='0'";
        content += " data-display_bookmark_count='1'";
        content += " data-source='total_bookmark'";
        content += ">";
        content += " <div class='hatena-module-body'>";
        content += "</div>";
        content += "</div>";
        content += "<br /><hr>";
        content += "<h3>カテゴリーから探す</h3>";
        content += "<ul>";
        content += "<li><a href='http://www.seoteach.xyz/archive/category/seo'>seo</a></li>";
        content += "<li><a href='http://www.seoteach.xyz/archive/category/用語集'>用語集</a></li>";
        content += "<li><a href='http://www.seoteach.xyz/archive/category/WEB制作'>WEB制作</a></li>";
        content += "<li><a href='http://www.seoteach.xyz/archive/category/WEBマーケティング'>WEBマーケティング</a></li>";
        content += "<li><a href='http://www.seoteach.xyz/archive/category/初心者'>初心者</a></li>";
        content += "<li><a href='http://www.seoteach.xyz/archive/category/キーワード'>キーワード</a></li>";
        content += "<li><a href='http://www.seoteach.xyz/archive/category/キャラクター紹介'>キャラクター紹介</a></li>";
        content += "<li><a href='http://www.seoteach.xyz/archive/category/お問い合わせ'>お問い合わせ</a></li>";
        content += "</ul>";
        $('.entry-footer').addClass('sorry_content');
        $('.entry-footer').html(content); }
    });
// ]]>
</script>

これを貼り付けて、「画像URL」と「サイトURL」を自サイトのものに変更すれば、このSEOブログの404エラーページと同じページが実装されるよ。
このソースコードは↓のサイトを参考に僕がある程度カスタマイズしたものになるよ。

はてなブログ向け「404 Not Found」のカスタマイズ方法【404エラー】 - 非アクティビズム。
【修正しました】はてなブログの404 NOT FOUNDページをカスタマイズしました - 攻めは飛車角銀桂守りは金銀三枚

ちなみに、ソースコードを貼り付けて上手く実装されない場合は、↓のコードを「設定」→「詳細設定」→「検索エンジン最適化」→「headに要素を追加」に貼り付けてみよう。
このコードは「jquery」が使えるように定義されていないと実行されないからね。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

ちゃんと反映されたかどうか確認したい場合は自サイトのドメインの後ろに「/entry/xxx」のような存在しないページを指定すれば確認できるよ。
僕はドメインの後ろに「/xxx」ってつけて確認しようとしたらちゃんと表示されなかったら、必ず「/entry」はつけるようにしよう。

テーマによっては反映されない可能性があるから注意よ。

まぁ、苦労詐欺はエラーページを確認するためのURLミスってるところで苦戦してたけどな。

気がついたとき、本人が一番落ち込んでたからそっとしてあげて。

Twitterでエラーページが反映されないって嘆いてたの後悔してるらしい。

今回はユーザーの利便性向上を狙った感じで、SEOブログの404エラーページをカスタムしたよ。
JavaScriptで実装しているから、jqueryを使うためのコードを予め設置しておこう。
僕は確認するエラーページを間違っているだけだったのにTwitterで「エラーページが反映されない」って恥ずかしいつぶやきしちゃってたから、こうならないように気をつけよう。