Azure Static Web Apps でリダイレクト処理がし隊

本ブログを Azure Static Web Apps に移行しました
その際に設定したリダイレクト処理の備忘録です

リダイレクト処理とは

リダイレクトとは、web ページの URL が移転や削除によって変更になった際、旧ページに訪問するユーザーを新ページの URL へと転送する処理のことです
これにより、ユーザーは新しいページに自動的に誘導されます
これは、ユーザーの利便性を損なわないため、また SEO 評価を失わないために行われます

↑ の文書は bing に書いてもらいました
今回 WordPress から Hugo に移行するために URL を少し変更したのでリダイレクトの設定を入れました

Hugo 側の設定でもリダイレクトは実装できますが、SEO 的にはよくないそうです
そのため、今回は Azure Static Web Apps でリダイレクト設定を入れました

ざっくり手順

リダイレクト設定が必要な元ページの把握
リダイレクト先になるページの確認
確認したページの対応を設定ファイルに記載

1. リダイレクト設定が必要な元ページの把握

今回はリダイレクト処理が必要なページは以下の通りです

ホーム
- kentsu.website/
各記事
- kentsu.website/2023/05/03/hugo-のコンテナーイメージを試し隊/
- など
その他 (プライバシーポリシーなど)
- kentsu.website/privacy-policy-2/

2. リダイレクト先になるページの確認

Hugo では content フォルダ配下のフォルダ構造がそのままパスに利用されます
今回は content 配下は年単位で記事をまとめることにしました
また, 採用しているテーマの zzo は複数言語に対応しているので /ja/ といったパスが入ります
(本ブログは複数言語での執筆はしてませんが,,,)

そのため, 以下のようになります

ホーム
- kentsu.website/ja/
各記事
- kentsu.website/ja/posts/2023/hugo_container/
- など
その他 (プライバシーポリシーなど)
- /ja/privacy-policy

3. 確認したページの対応を設定ファイルに記載

対応関係が判明したので, これを設定ファイルにまとめます
やり方は公開情報を参考にします
Azure Static Web Apps を構成する | Microsoft Learn

staticwebapp.config.json の推奨される場所は、ワークフローファイルで app_location として設定されたフォルダー内です

とのことなので, 今回は root 配下に staticwebapps.config.json を作成します

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


{
    "routes": [
      {
        "route": "/記事一覧/",
        "redirect": "/ja/posts/",
        "statusCode": 301
      },
      {
        "route": "/",
        "redirect": "/ja/",
        "statusCode": 301
      }
    ],
    "mimeTypes": {
      ".json": "text/json"
    }
}

“route” には 1. で確認した元ページの相対パス
“redirect” には 2. で確認したリダイレクト先の相対パス
“statusCode” には SEO 対策として 301
としています

必要なリダイレクト設定を全部書いたら, Static Web Apps を更新して完了です

まとめ

リダイレクトをさせたい記事が多いと設定が大変なので
これからはサイトのパスを意識して色々構築していこうと思います