無いなら作ろうシリーズ 第1弾
昨日書いた記事は、自分でも長くて読めなかった。
ということで、記事数ドーピング 設置・設定に特化した部分をこの記事として分離しました。
この記事は
はてなブログで「404 Not Foundになったときの表示をカスタマイズして、新記事にリダイレクトする仕掛け」をブログに設定する手順の説明です。なんでこんなことをやったかの背景は前編に書いてあります。
この記事の前編はこちらです。 kanaxx.hatenablog.jp
さっそく、設定方法を書いていきます。
設定方法
エンジニア経験のない人には、ちょっと大変かもしれません。長い戦いになりますので、ついてきてください。 手順は１～６まであります。
基本的には自己責任ですので、修正する前にバックアップするなど自衛の方法をとってください。
１．プログラムのファイル
まず、Javascriptで書かれたファイルを持ってくる必要があります。作ったプログラムはGithubに置いてあります。
https://github.com/kanaxx/hatenablog-redirect へ行ってZipでダウンロードしておいてください。
使うファイルは2つだけです。
- microcms-schema.json
- hatenablog-404-redirect.js
２．microCMSのアカウント準備
今回、microCMSというサービスを使いますので、まずはその準備をします。
microCMSのサイトにいき、「新規登録」
メールアドレスとパスワードを入れて登録
確認コードはメールで送られてくるので、確認コードを入力する
アカウント作成完了
３．microCMSを設定する
アカウントができたら、引き続きサービスの設定をします。
サービス情報の入力画面です。サービスIDはあとで使います。
APIの基本情報画面です。この通りに入れておいてください。
APIのスキーマ定義画面です。こちらからのリンクを押して、zipでダウンロードしたmicrocms-schema.jsonをアップロードします。
3つ増えているのを確認して、完了を押して設定は終わりです。
４．データの入力
ここまではデータの入れ物を作っただけなので、新と旧のデータを入れます。
記事個別ページのときは、/entry/～ カテゴリページのときは、/archive/category/～ を入力します。
※/entryと/archive/category以外でも動作させたい場合は、コードの修正が必要です。
入力の方法
コンテンツ管理タブで、追加ボタンを押す
追加画面の初期表示。3つの入力欄がある画面が出ます。
1つ目には古いURL、2番目には新しいURLを入れます。メモ欄は自由につかってよいです。空でも大丈夫です。最後に公開ボタンを押します！
公開が終わったら、「記事マッピング」のリンクを押します。
リストの表示に戻ります。登録したものが出てくれば登録完了です。入力するものがたくさんあるときは、これを何度も繰り返してください。
データの編集方法
リスト状態で、編集したいアイテムをクリックすると編集画面が出てきます。
５．スクリプトに必要な情報を取る
あと少しです。
データの入れ物ができて、データが入れ終わったら、APIの設定を取り出します。
- APIリファレンスのタブを開き、
- エンドポイントの真ん中、
GET/entry-mappingをクリックし、 - 右に出てくる試してみるボタンを押します。
赤い部分と緑の部分を覚えておいてください。あとで使います。
６．スクリプトの設定
やっとです。
スクリプトを編集する
手順1. でダウンロードしたhatenablog-404-redirect.jsファイルを開きます。
先頭2行を自分のものに書き換えます。手順５の赤い部分が2行目、緑の部分が3番目ですね。シングルクオートを消さないように気を付けてください。
//setting your environment const myEndpoint = 'https://--yourdomain--.microcms.io/api/v1/--yourcontents--'; const myKey = '--your api key--';
あと、26行目あたりに「404だったとしてもAPIを呼び出さない」ケースを分岐しているので、固定ページなど自分のブログで全般的にリダイレクトチェックする場合には、コメントアウトしてしまってよいです。
//microCMSへの確認をするURLを選別 //apiの呼び出し回数が気にならなければ、条件なしでもよい。 if( !pathName.startsWith('/entry/') && !pathName.startsWith('/archive/category/') ){ console.log('Hatenablog-redirect| This page is not supported this script.'); return; }
はてなブログの管理画面に置く
管理画面の、デザイン＞カスタマイズ＞フッタまでいきます。フッタのテキストエリアをクリックすると、スクリプトエリアが広がるので
<script>と</script>は自分で書いておいて、
Javascriptのコードを貼り付けます
これで完了です。
テストする
ChromeかFirefoxのDev Toolで確認できます。
以下の2行分のログが出ていれば、スクリプト自体はちゃんと実行されています。
404=>falseと表示されているときは、ちゃんと存在するページということなので、リダイレクトはしないです。
まとめ
これで、記事URLを変えてリンク切れになっても被害を最小に抑えることができそうです。 ページのURLが変わってしまうとGoogleからのSEO評価が下がる可能性もありますので、記事URLは気軽に変えるものではないことは、最後にお伝えしておきます。
Qiitaにも記事が書いてあります。こっちはプログラムの解説が中心です。
qiita.com
疲れた～
