はてなブログの404ページを作成する

f:id:jr0704japan:20170526162649p:plain

WordPressでのサイト作成で、私の使っているテーマのSimplicityでは404画像の作成がとても簡単に出来てしまいます。

カスタマイズの「外観→レイアウト(全体・リスト)項目で、404画像を設定するだけなんです。

では、はてなブログの場合にはどうなのか??

ちょっと調べたのでメモ記事です。

404画像とは何か

404画像とは、ユーザーが間違ってサイトのアドレスを間違えた場合に表示されるページのことです。

404 NOT FOUNDとか出るやつですね。

これって、テーマによっては、検索エンジンにかからないような設定をしてある場合もあるので、あまり関係ない場合もあります。

グーグルでも、以下のようにいってますし。

404 エラーのほとんどは、そのサイトの Google 検索結果でのランキングに影響を及ぼすことはないため、エラーを無視しても問題はありません。

クロールエラーレポート（ウェブサイト） - Search Console ヘルプ

検索エンジン最適化スタートガイド

ですが、Googleの　検索エンジン最適化スターターガイド　には、404ページもカスタマイズして、より便利な404ページにした方がブログのアクセスアップにも効果があると書いてあります。

一部引用しますね。

時にユーザーはリンク切れしたリンクをたどったり、間違ったURLを入力したりして、サイトに存在しないページを訪れてしまうことがあります。

このようなとき、ユーザーをちゃんとしたページに導くための便利な404ページを作っておくと、ユーザーエクスペリエンスを飛躍的に高めることができます。

404エラーページでは、サイトのトップページや人気のあるページ、関連性のあるコンテンツなどへのリンクを提供すると良いでしょう。Googleでは、自動的にたくさんの便利な機能を提供する404ウィジェットを提供しており、あなたのサイトの404ページのカスタマイズにもご利用いただけます。また、Googleウェブマスターツールをご利用いただくことで、「ページが見つかりません」というエラーの原因についてもご確認いただけます。

なにげに、この　検索エンジン最適化スターターガイド　ですが、googleの社内向けに作成されたもので、かなり詳しい解説が載ってます。今度勉強してみます。

はてなブログの場合は

ですが、はてなブログの場合どうなのかぐっぐってみると、ユーザーへの配慮といった点でカスタマイズしていたほうが良いようですね。当然、グーグルにも検索して貰いたいですもんね。

特にはてなプロで、グーグルアドセンスなどを取得している場合には、気をつけたほうが良いようです。つまりは、ユーザーに気を使ってね、ということなんでしょうね。

コンテンツを含まないページ（手続き完了ページ、離脱ページ、ログインページ、エラーページなど）に広告を掲載することは許可されません。このようなページは、訪問者がドメインから離脱する可能性がある際や、購入やダウンロードなど、サイト上で特定のアクションを実行した後に表示されます。この種のページに広告を掲載すると、広告が実際のコンテンツだと誤解されてしまう可能性があるため、掲載は避けてください。

広告の配置に関するポリシー - AdSense ヘルプ　から引用

設定はヘッダに

はてなブログの場合には、すべて管理画面のデザイン→カスタマイズ→ヘッダ→タイトル下の中に書き込みます。

画像を埋め込む場合には、画像のアドレスを取得しておきます。

自分の場合分からなかったので、

記事に投稿してフォトライフを開きます。
画像を右クリックして、画像のアドレスをコビーします。

カスタマイズ　その1 ヘッダに

jQueryを「設定」-「詳細設定」の画面を開きます。
ここの下の方にある「headに要素を追加」に、404 Not Found時のJavaScriptコードを設定します。

色々虎威ゆるり色々とら威ゆるりさんのサイトを参考にしました。

とらが、何故か変換できなくて、ひらがなになってます。

トライをかけているんですね!

iro.hateblo.jp

自分は、色々と書きこんで自分のメモ記事だけが頼りなので、書いておきますね!

カスタマイズ　その2

結構色々な人が書いているのですが、私は非アクティビズムさんの所のソースをコピーして、画像部分とブログタイトルだけ変えて、貼り付けました。

www.in-activism.com

自分でカスタマイズした部分がわからなくなるので、記載です。

<script type="text/javascript">
 $(document).ready(function() {
 if ($('#main-inner').children().hasClass("no-entry")) {
 var content = "<img src='https://cdn-ak.f.st-hatena.com/images/fotolife/j/jr0704japan/20170526/20170526162649_120.jpg' width='80%'>";
 var content ="<p>いつも『50のてならい』をご利用いただきまして、誠にありがとうございます。大変申し訳ありませんが、あなたがアクセスしようとしたページは、削除されたか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>