かずきち。の日記

サーバサイドエンジニアのつぶやき

トップ > Program > 【アクセスアップ】はてなブログで記事が存在しないページのエラー表示をカスタマイズする方法【javascript47行】

【アクセスアップ】はてなブログで記事が存在しないページのエラー表示をカスタマイズする方法【javascript47行】

Program


インターネットではページのリンク切れは利用者を逃す

現代のインターネットの利用者流入は検索エンジン由来である。
しかしいざページを訪れたら「404エラー」でページが存在しないと閲覧者を逃してしまうことになる。
現実世界ではレストランに行って、お目当てのメニューがない場合に店員さんが

「〇〇フェアは終わってしまいましたが、✗✗フェアをやっていますので、こちらのメニューはいかがですか？」

と案内できますが、インターネットの場合、リンク切れは閲覧者の流出＝死に直結します。
それはすなわち広告収益の減益につながります。
今回はウェブページのリンク切れ、存在しないページに到達してしまった場合に任意のメッセージを強制的にウェブページに流し込む方法を紹介します。
しかし存在しないページにメッセージを流すなんて、そんなことできるのでしょうか？

テレビで11Chを選択したら、砂嵐が流れるのを
「11chは現在視聴できません。こちらのチャンネルはいかがでしょうか？」
とアナウンスができたら、親切です。
その機能を今回ははてなブログに実装していきましょう。

デザイン→ヘッダーに下記コードを記入します
<script>
  document.addEventListener('DOMContentLoaded', function() {
    if(document.querySelector('#main-inner').getElementsByClassName('no-entry').length === 0){
      return;
    }
    var ec = document.querySelector('.entry-content');
    if(!ec){
      return;
    }
    var h1s = ec.getElementsByTagName('h1');
    var ps = ec.getElementsByTagName('p');
    h1 = h1s && h1s[0];
    p = ps && ps[0];
    if(!(h1 && p)){
      return;
    }

    h1.innerText = 'Not Found\nお探しの記事を見つけられませんでした';
    p.innerText = '一時的にアクセスできない状況にあるか、\n移動、または、削除された可能性があります。\n\nおすすめ記事 または トップページからお探しください。\nサイドバーの検索も利用できます。';

    var h2 = document.createElement('h2');
    h2.appendChild(document.createTextNode("おすすめ記事"));
    ec.appendChild(h2);

    var hatena_module = document.createElement('div');
    hatena_module.setAttribute('class', 'hatena-module hatena-module-entries-access-ranking');
    hatena_module.setAttribute('data-count', '10');
    hatena_module.setAttribute('data-display_entry_category', '1');
    hatena_module.setAttribute('data-display_entry_image', '1');
    hatena_module.setAttribute('data-display_entry_image_size_width', '160');
    hatena_module.setAttribute('data-display_entry_image_size_height', '160');
    hatena_module.setAttribute('data-display_entry_body_length', '0');
    hatena_module.setAttribute('data-display_entry_date', '1');
    hatena_module.setAttribute('data-display_bookmark_count', '1');
    hatena_module.setAttribute('data-source', 'access');

    var hatena_module_body = document.createElement('div');
    hatena_module_body.setAttribute('class', 'hatena-module-body');
    hatena_module.appendChild(hatena_module_body);

    ec.appendChild(hatena_module);
    
    //var footer = document.createElement('p');
    //footer.appendChild(document.createTextNode("ありがとうございました"));
    //ec.appendChild(footer);
  });
</script>

これだけでエラー画面をカスタマイズします。
javascriptで存在しないウェブページに無理やりappendすることでエラーページを作っています。

完成形は？


存在しないページ　
https://kazukichi0914.hatenablog.com/111
にアクセスしてみましょう。

お探しのページが見当たりませんでしたというメッセージがjavascriptによって無理やりページに挿入されます。
上記のjavascriptをGoogleタグマネージャーでDOMReadyのタイミングで発火させるのがコツです。
DOMReadyとはコンピュータがウェブページの部品をかき集めて、ウェブページを表示するぞ！といきこんでいるタイミングで
ページがないときは違う画面を表示するように上書きすることでエラー画面を生成しています。
はてなブロガーの方でエラーハンドリングをしていない方は相談を受け付けますので、プロフィール画面からコンタクトしてみてください。
1回かぎりの有償で対応します。

注目記事