Webサイトリニューアル・ドメイン移転時のSEO損失を防ぐ：301リダイレクトの正しい設計と実装

Webサイトのリニューアルやサービスのドメイン移行を行う際、意外に見落としがちで重要なのが「URLの変更に伴うSEO評価の継承」です。

これまで構築してきた検索エンジンからの評価やブックマークからの流入を新しいURLへスムーズに引き継がないと、リニューアル直後にアクセス数が大幅に低下する原因となります。今回は、Webシステムの開発やリニューアルにおいて必須となる「301リダイレクト」の基本的な考え方と、具体的な実装アプローチについて解説します。

なぜ301リダイレクトが必要なのか

Webサイトの構造変更やドメイン変更によりURLが変わった場合、古いURLにアクセスしたユーザーに対して単に「404 Not Found（ページが見つかりません）」を返す状態にしておくのは避けるべきです。

検索エンジンのクローラーは、301リダイレクト（永久的な転送）を検知すると、「古いURLの評価やインデックス情報を新しいURLへ引き継ぐ」という処理を行います。これにより、リニューアル後も検索順位の急落を防ぎ、ユーザーを迷わせることなく新しいページへ誘導することが可能です。

逆に、一時的な移動を示す302リダイレクトを利用してしまうと、検索エンジンが古いURLのインデックスを維持し続けてしまい、新しいページの評価が分散する原因になるため注意が必要です。

301リダイレクトの設計におけるポイント

実装に入る前に、システム全体としてのリダイレクト方針を整理することが大切です。

URLマッピングの作成 移行前のURLと、移行後の新しいURLの対照表（マッピングリスト）を事前に作成します。全ページを個別に対応させるのが理想ですが、大規模サイトの場合は「特定のディレクトリ配下を一括で新ドメインへ転送する」といったルールベースの設計を組み合わせます。
無限リダイレクト（リダイレクトループ）の防止 AからBへ転送し、さらにBからAへ戻ってしまうようなループ構造や、多重のリダイレクトが発生しないようルーティングルールを検証します。
HTTPからHTTPSへの移行との切り分け 常時SSL化（HTTPからHTTPSへの移行）も同時に行う場合は、プロトコルの変更とパスの変更が混同して意図しない挙動にならないよう、順序を整理して実装します。

TypeScriptを用いた実装アプローチの例

モダンなWebアプリケーション開発において、Next.jsやRemix、あるいは独自のNode.js（Express等）サーバーで301リダイレクトを制御するケースが多々あります。ここでは、TypeScriptを用いたシンプルなリダイレクト制御のコード例をご紹介します。

TypeScript

type RedirectRule = {
  from: string;
  to: string;
  statusCode: 301 | 302;
};

// リダイレクトルールの定義
const redirectRules: RedirectRule[] = [
  { from: "/old-service-page", to: "/new-services", statusCode: 301 },
  { from: "/company/profile", to: "/about", statusCode: 301 },
];

export function handleRedirect(path: string): { destination: string; permanent: boolean } | null {
  const matchedRule = redirectRules.find((rule) => rule.from === path);

  if (!matchedRule) {
    return null;
  }

  return {
    destination: matchedRule.to,
    permanent: matchedRule.statusCode === 301,
  };
}

実際のフレームワーク（Next.jsの next.config.js やサーバーサイドのルーティングミドルウェアなど）に組み込む際は、上記のようなマッピングロジック、あるいは正規表現を用いた柔軟なパターンマッチングを適用することで、保守性の高いリダイレクト管理基盤を構築できます。