『7回目の出直し🌻』

好きなことを自分のペースで、のんびり更新

【後編】はてなブログの過去記事のURLを変えたときに、新しいURLに行く仕組み(設定編)

無いなら作ろうシリーズ 第1弾

昨日書いた記事は、自分でも長くて読めなかった。
ということで、記事数ドーピング 設置・設定に特化した部分をこの記事として分離しました。

この記事は

はてなブログで「404 Not Foundになったときの表示をカスタマイズして、新記事にリダイレクトする仕掛け」をブログに設定する手順の説明です。なんでこんなことをやったかの背景は前編に書いてあります。

この記事の前編はこちらです。 kanaxx.hatenablog.jp

さっそく、設定方法を書いていきます。

設定方法

エンジニア経験のない人には、ちょっと大変かもしれません。長い戦いになりますので、ついてきてください。 手順は1~6まであります。

基本的には自己責任ですので、修正する前にバックアップするなど自衛の方法をとってください。

1.プログラムのファイル

まず、Javascriptで書かれたファイルを持ってくる必要があります。作ったプログラムはGithubに置いてあります。

https://github.com/kanaxx/hatenablog-redirect へ行ってZipでダウンロードしておいてください。
f:id:kanaxx43:20200505221317p:plain

使うファイルは2つだけです。

  • microcms-schema.json
  • hatenablog-404-redirect.js

2.microCMSのアカウント準備

今回、microCMSというサービスを使いますので、まずはその準備をします。

microCMSのサイトにいき、「新規登録」
f:id:kanaxx43:20200505185944p:plain

メールアドレスとパスワードを入れて登録
f:id:kanaxx43:20200505190050p:plain

確認コードはメールで送られてくるので、確認コードを入力する
f:id:kanaxx43:20200505201047p:plain
f:id:kanaxx43:20200505201041p:plain

アカウント作成完了 f:id:kanaxx43:20200505201202p:plain

3.microCMSを設定する

アカウントができたら、引き続きサービスの設定をします。

サービス情報の入力画面です。サービスIDはあとで使います。 f:id:kanaxx43:20200505222221p:plain

APIの基本情報画面です。この通りに入れておいてください。 f:id:kanaxx43:20200505205638p:plain

APIのスキーマ定義画面です。こちらからのリンクを押して、zipでダウンロードしたmicrocms-schema.jsonをアップロードします。
f:id:kanaxx43:20200505201914p:plain

3つ増えているのを確認して、完了を押して設定は終わりです。 f:id:kanaxx43:20200506182347p:plain

4.データの入力

ここまではデータの入れ物を作っただけなので、新と旧のデータを入れます。

記事個別ページのときは、/entry/~ カテゴリページのときは、/archive/category/~ を入力します。

※/entryと/archive/category以外でも動作させたい場合は、コードの修正が必要です。

入力の方法

コンテンツ管理タブで、追加ボタンを押す
f:id:kanaxx43:20200505223832p:plain

追加画面の初期表示。3つの入力欄がある画面が出ます。
f:id:kanaxx43:20200506182518p:plain

1つ目には古いURL、2番目には新しいURLを入れます。メモ欄は自由につかってよいです。空でも大丈夫です。最後に公開ボタンを押します! f:id:kanaxx43:20200506182611p:plain

公開が終わったら、「記事マッピング」のリンクを押します。
f:id:kanaxx43:20200506183429p:plain

リストの表示に戻ります。登録したものが出てくれば登録完了です。入力するものがたくさんあるときは、これを何度も繰り返してください。
f:id:kanaxx43:20200506183119p:plain

データの編集方法

リスト状態で、編集したいアイテムをクリックすると編集画面が出てきます。

5.スクリプトに必要な情報を取る

あと少しです。
データの入れ物ができて、データが入れ終わったら、APIの設定を取り出します。

  • APIリファレンスのタブを開き、
  • エンドポイントの真ん中、GET/entry-mapping をクリックし、
  • 右に出てくる試してみるボタンを押します。

f:id:kanaxx43:20200505224924p:plain

赤い部分緑の部分を覚えておいてください。あとで使います。 f:id:kanaxx43:20200505225758p:plain

6.スクリプトの設定

やっとです。

スクリプトを編集する

手順1. でダウンロードしたhatenablog-404-redirect.jsファイルを開きます。 先頭2行を自分のものに書き換えます。手順5の赤い部分が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;
}

はてなブログの管理画面に置く

管理画面の、デザイン>カスタマイズ>フッタまでいきます。フッタのテキストエリアをクリックすると、スクリプトエリアが広がるので
f:id:kanaxx43:20200505231721p:plain

<script>と</script>は自分で書いておいて、
f:id:kanaxx43:20200505231828p:plain

Javascriptのコードを貼り付けます
f:id:kanaxx43:20200505232118p:plain

これで完了です。

テストする

ChromeかFirefoxのDev Toolで確認できます。

以下の2行分のログが出ていれば、スクリプト自体はちゃんと実行されています。
f:id:kanaxx43:20200506003409p:plain

404=>falseと表示されているときは、ちゃんと存在するページということなので、リダイレクトはしないです。

まとめ

これで、記事URLを変えてリンク切れになっても被害を最小に抑えることができそうです。 ページのURLが変わってしまうとGoogleからのSEO評価が下がる可能性もありますので、記事URLは気軽に変えるものではないことは、最後にお伝えしておきます。

Qiitaにも記事が書いてあります。こっちはプログラムの解説が中心です。
qiita.com

ダイレクト・リクルーティング -新しい採用の常識- (DOBOOKS)

ダイレクト・リクルーティング -新しい採用の常識- (DOBOOKS)

疲れた~