皆さんは404ページをカスタマイズしていますか？Googleの『検索エンジン最適化スターターガイド（以下、『SEOスターターガイド』と書きます）』にも書いてある通り、どうやら404ページもカスタマイズして、より便利な404ページにした方がブログのアクセスアップにも効果があるようです。本日は、そんな目立たないけど、ちょっと重要な404ページのカスタマイズ方法を解説したいと思います。
解説と言ってもほぼコピペでできますので、僕のようにコードに弱いブロガーさんは必見ですぞ。ちなみに初心者ブロガーさんのために念のためご説明しておきますが、404ページってのはこんな感じのヤツです↓
404ページカスタマイズのSEO的な効果
まずは、404ページのSEO的な効果についてちょっとだけ触れておきたいと思います。以下は『SEOスターターガイド』の抜粋となっていますので軽く一読してみてください。きっと404ページの重要性に気づくと思います。『はぁ？抜粋長すぎて読む暇ねぇーよ！ボケ』って方は、読み飛ばしてもらっても一向に構いません（笑）
抜粋①↓
時にユーザーはリンク切れしたリンクをたどったり、間違ったURLを入力したりして、サイトに存在しないページを訪れてしまうことがあります。このようなとき、ユーザーをちゃんとしたページに導くための便利な404ページを作っておくと、ユーザーエクスペリエンスを飛躍的に高めることができます。
抜粋②↓
404エラーページでは、サイトのトップページや人気のあるページ、関連性のあるコンテンツなどへのリンクを提供すると良いでしょう。Googleでは、自動的にたくさんの便利な機能を提供する404ウィジェットを提供しており、あなたのサイトの404ページのカスタマイズにもご利用いただけます。また、Googleウェブマスターツールをご利用いただくことで、「ページが見つかりません」というエラーの原因についてもご確認いただけます。
いかがでしたか？『どうやら404ページってやつはカスタマイズした方がいいな』ってことは分かっていただけたと思います。そんなわけで、次に404ページのポイントについてあげてみたい思います。『ポイントとかめんどくせーよ！カス』って方は、ここも読み飛ばしていただいてもOKです（笑）
404ページのポイント！
- 404ページは間違ったURLから訪問したユーザーを正しいページに誘導するためのもの。
- 『Not Found』などという曖昧なメッセージだけを表示するのは避ける。
- サイトのデザインにそぐわない404ページは使わない。
- 役立つ404ページを用意するようにカスタマイズする。
- トップページや人気ページ、関連性のあるページへのリンクでユーザーを誘導すると良い。
はてなブログで404ページをカスタマイズする方法
お待たせしました。いよいよ本題に入ります。はてなブログで404ページをカスタマイズする方法については、はてなブログ村の偉大なる先人の方々のお陰で、コードに弱い僕でも何とかカスタマイズすることができました。色白おばけさん(id:lightgauge)、虎ちゃんさん (id:itry)、本当にありがとうございました。僕が参考にさせていただいた記事は以下の２つです。
『攻めは飛車角銀桂守りは金銀三枚』さんの記事
【修正しました】はてなブログの404 NOT FOUNDページをカスタマイズしました - 攻めは飛車角銀桂守りは金銀三枚
『色々虎威 ゆるり』さんの記事
はてなブログの404 Not Found 画面をちょっとだけカスタマイズしてみた - 色々虎威 ゆるり
当ブログの404ページカスタマイズのソースコード
偉大なる先人のソースコードをもとに、ちょっとだけ僕なりにソースコードをいじってみました。当ブログのようなデザインの404ページでとりあえずいいやって方は、以下のコードをコピペして使ってみてください。コピペした後に、ご自分のブログデザインに合ったものに変更すると簡単だと思います。
javascript
下のソースコードを以下の手順でコピペしてください。当ブログのコードは、『攻めは飛車角銀桂守りは金銀三枚』さんのソースコードから画像を削除して、文書を多少変えただけです。
<script type="text/javascript">
$(document).ready(function() {
if ($('#main-inner').children().hasClass("no-entry")) {
var content ="<p>いつも『wepli.2(うぇぷり どっと に)』をご利用いただきまして、誠にありがとうございます。大変申し訳ありませんが、あなたがアクセスしようとしたページは、削除されたかURLが変更されています。お手数ですが、トップページからもう一度目的のページをお探しいただくか、または、当ブログの人気記事からお好みのページをご覧ください。</p>";
content +="<h3>当ブログおすすめの人気記事</h3>";
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>";
$('.entry-footer').addClass('sorry_content');
$('.entry-footer').html(content);
}
});
</script>
- ダッシュボードを開く
- デザインをクリック
- カスタマイズをクリック
- ヘッダをクリック
- タイトル下にコードを貼り付ける
CSS
CSSでお好みのデザインに変更できます。当ブログの場合は、フォントサイズを大きくしたりしました。当ブログのデザインと同じでいいなら、以下のコードを『デザインCSS』に貼り付けてください。
.sorry_content {
color: #434343;
font-size: 1.13em;
line-height: 170%;
}
- ダッシュボードを開く
- デザインをクリック
- カスタマイズをクリック
- デザインCSSにコードを貼り付ける
※ 当ブログのデザインテーマは『Written』を使用しています。
さいごに
『はてなブログで404をカスタマイズする方法』は以上のとおりです。本当でしたら、もっと充実した機能を404ページに追加したいのですが、僕の技術ではこれが限界です。本当なら『ブログ内検索』や『自動生成されるカテゴリー』を記事中に表示させた方がSEO的に良いのですが僕には無理でした。どなたかjavascriptに詳しい方、はてなブログ村のさらなる発展のために、404ページの高度なカスタマイズ記事を書いてください。よろしくお願いします。そしたら僕にも教えてくださいね（笑）
