WithCodeMedia-1-pc
WithCodeMedia-2-pc
WithCodeMedia-3-pc
WithCodeMedia-4-pc
previous arrowprevious arrow
next arrownext arrow

WithCodeMedia-1-sp
WithCodeMedia-2-sp
WithCodeMedia-3-sp
WithCodeMedia-4-sp
previous arrowprevious arrow
next arrownext arrow

リダイレクトのやり方|基本からコードでの実装方法・便利なプラグインまでを徹底解説!

生徒

ペン博士!リダイレクトの設定をしたいのですが、やり方が分からなくて困っています…

ペン博士

リダイレクトの設定方法じゃな!仕組みを理解すれば簡単に実装できるから心配はいらんぞ!

生徒

そうなんですね!ありがとうございます!

サイト運営で「URL変更後にエラーが出た」「SEO評価が下がった」と悩んだことはありませんか。本記事では、リダイレクトの基本からコードでの実装方法、さらにWordPressプラグインによる設定までを解説します。読み終えるころには、ご自身のサイトに最適なリダイレクトを設定できるようになるでしょう。

「学習→案件獲得」につなげた受講生のリアルな体験談も公開中!
働き方を変えたい方にも響くストーリーです。

橋本さん
将来に繋がるスキルを身に付けたいと考え、プログラミングに出会う。在学中の大学ではプログラミングの講義がなかったため、独学で学習していたが、限界を感じWithCodeに入学を決意。短期集中カリキュラムでプログラミング学習に打ち込んだ結果、見事卒業テストに合格し、案件を勝ち取りました。現在は、新たな言語の習得に向けて学習を継続しながら就職活動に向けて準備を行っています。

詳しくはこちらの記事をご覧ください。

あわせて読みたい
【学生さん必見】大学生ながら案件を完走!案件を経験した後の活動状況もお聞きしました! ペン博士!大学生ながら案件をこなした方がいるって聞いたんですけど本当ですか? うむ、本当じゃ。わしが運営しておるプログラミングスクールの受講生じゃ。そして、そ...

橋本さんの主な制作実績はこちら

目次

リダイレクトとは?設定する目的

リダイレクトとは、特定のURLに対するアクセスを、自動的に別のURLへ転送する仕組みです。
導入の目的は二つあり、「ユーザーの利便性を守ること」 「SEO評価を引き継ぐこと」 が挙げられます。
いずれもサイト運営の継続性や信頼性に直結する重要な要素といえるでしょう。
ここから、それぞれを具体的に解説します。

ユーザーの利便性を維持する

リダイレクトを設定せずにURLを変更すると、404エラー(ページが見つかりません)が表示されます。
これは大きなストレスとなり、ユーザーの離脱につながります。

例えば以下のような場面でリダイレクトは効果的です。

  • サイトリニューアルでページ構造を変更したとき
  • 商品ページのURLを変更したとき
  • 独自ドメインに移行したとき

ブックマークや検索結果から旧URLにアクセスしても、新しいページへ自動転送されます。
その結果、ユーザーは目的の情報にスムーズに到達でき、満足度や信頼性も維持されます。

SEO評価を引き継ぐ

検索エンジンはURLごとにSEO評価を蓄積しており、被リンク数やアクセス実績も対象です。
そのためURLが変わってもリダイレクトを設定しなければ、新しいページと認識され、これまでのSEO評価が失われてしまいます。

特に長期間運営してきたページでは、このSEO評価が重要な資産といえます。
適切にリダイレクトを設定すれば、旧URLの評価を新しいURLに引き継げるため、検索順位の低下や流入数の減少を防ぐことが可能です。

生徒

なるほど。リダイレクトって“ページの引っ越し案内”みたいなものなんですね!SEO対策にも効果があるのは意外でした!

ペン博士

その通りじゃ。リンク切れを防ぎ、ユーザーを正しいページに導くのがリダイレクトの役目じゃよ。正しく設定すれば“ユーザーの満足度”と“検索評価”の両方を守れるのじゃ。

リダイレクトの種類

ペン博士

リダイレクトには サーバーサイド と クライアントサイド の2種類があるんじゃ!詳しく解説するぞ!

サーバーサイドリダイレクト

サーバーサイドリダイレクトは、サーバーがレスポンスを返す段階で転送先を指定する方式です。
処理がサーバー上で完結するため、ブラウザに余計な負担をかけず、新しいURLへすぐに転送できます。
SEOとユーザーの利便性の両面から見ても、最も効果的な方法です。

  • 301リダイレクト(恒久的移転)
    旧URLのSEO評価を新しいURLに引き継ぎます。ドメイン移転や恒久的なURL変更の際に利用します。
  • 302リダイレクト(一時的移転)
    メンテナンスやキャンペーンで、一時的に別ページへ切り替える場合に利用します。SEO評価は新しいURLに引き継がれません。

クライアントサイドリダイレクト

クライアントサイドリダイレクトは、サーバーではなくユーザーのブラウザ側で実行される仕組みです。
サーバー設定を直接操作できない場合や、条件ごとにページを切り替えたい場合に利用されます。
代表的な方法は「HTML metaタグ」と「JavaScript」です。

ただし検索エンジンは、サーバーサイドリダイレクトを正式に推奨しています。
クライアントサイド方式はSEO評価を引き継ぎにくいため、利用は補助的にとどめるのが安全です。

  • meta refresh
    HTMLの<head>に記述して転送。
    0秒なら即時、秒数を指定すれば遅延付きで転送できます。
  • JavaScript
    スクリプトで条件に応じて転送可能。
生徒

リダイレクトにもそれぞれ違いがあるんですね!

ペン博士

そうじゃ。用途を間違えるとSEOにも影響が出るぞ。リダイレクトの選択は“正しい案内標識”を立てるようなものじゃ。

サーバーサイドリダイレクトのやり方

ペン博士

サーバーサイドリダイレクトのやり方を具体的に解説するぞ!

.htaccessファイルでの設定 

「.htaccessファイル」はApacheサーバーで利用できる設定ファイルです。ディレクトリ単位で挙動を制御できるため、ページ単位からドメイン全体まで柔軟にリダイレクトが可能です。SEO評価を正しく引き継げるため、信頼性が高い方法のひとつとされています。

コード例
1ページ単位でリダイレクトする場合:

Redirect 301 /old-page.html https://example.com/new-page.html

ディレクトリ全体を移動させる場合:

RedirectMatch 301 ^/old-dir/(.*)$ https://example.com/new-dir/$1

ドメイン全体を移転する場合:

RewriteEngine on
RewriteCond %{http_host} ^oldsite.jp
RewriteRule ^(.*)$ https://newsite.jp/$1 [R=301,L]

設定の流れ

  1. サイトのルートディレクトリにある.htaccessファイルを開く
  2. 上記のリダイレクト設定を追記する
  3. 保存してサーバーにアップロードする

PHPでの設定

PHPを利用したリダイレクトは、動的なページや条件分岐が必要な場合に適しています。サーバー設定にアクセスできない場合にも導入可能です。ただし処理はページ読み込み後に行われるため、「.htaccess」に比べると速度面では劣ります。

コード例
基本的な301リダイレクト:

<?php
header("Location: https://example.com/new-page.html", true, 301);
exit();
?>

302リダイレクト(一時的):

<?php
header("Location: https://example.com/temp-page.html", true, 302);
exit();
?>

設定の流れ

  1. リダイレクトを設定したいPHPファイルを開く
  2. ファイルの冒頭に「header()関数」を追記する
  3. 保存してサーバーにアップロードする
生徒

.htaccessで設定するのって、最初はちょっと怖いな…。でも、編集してアップロードするだけでも動くのが便利ですね!

ペン博士

確かに、設定を間違えるとサイト全体が見れなくなることもある。慎重に扱うのじゃ。サーバーサイドのリダイレクトは“根本的な交通整理”。正しく設定すれば非常に安定するぞ。

クライアントサイドリダイレクトのやり方

ペン博士

クライアントサイドリダイレクトのやり方を具体的に解説するぞ!

metaタグでの設定

metaタグを使ったリダイレクトは、ブラウザに一定時間後の転送を指示する仕組みです。
サーバー設定を変更できない環境では、最低限のリダイレクトを実現する手段として利用されます。

コード例
即時転送する場合:

<meta http-equiv="refresh" content="0;url=https://example.com/new-page.html">

5秒後に転送する場合:

<meta http-equiv="refresh" content="5;url=https://example.com/new-page.html">

設定の流れ

  1. リダイレクトを設定したいHTMLファイルを開く
  2. <head>タグ内にmetaタグを追記する
  3. 保存してサーバーにアップロードする

JavaScriptでの設定

JavaScriptを使ったリダイレクトは、ブラウザ上でスクリプトを実行して新しいURLへ移動させる方法です。
ユーザーの環境や条件を判定して切り替えられるため、柔軟に制御できます。

コード例
基本的なリダイレクト:

<script>
  window.location.href = "https://example.com/new-page.html";
</script>

条件付きリダイレクト(ユーザーのブラウザ言語に応じて適切なページに誘導):

<script>
  var lang = navigator.language || navigator.userLanguage;
  if (lang.startsWith("ja")) {
    window.location.href = "https://example.com/ja/";
  } else {
    window.location.href = "https://example.com/en/";
  }
</script>

設定の流れ

  1. リダイレクトを設定したいHTMLファイルを開く
  2. <head>または<body>内にJavaScriptコードを追記する
  3. 保存してサーバーにアップロードする
生徒

metaタグとかJavaScriptでもリダイレクトできるんですね!

ペン博士

そうじゃが、あくまで“補助的な手段”として使うのが良い。検索エンジンによっては評価が分かれるのじゃ。

生徒

なるほど、ユーザー体験を重視する場合には慎重に使う必要があるんですね。勉強になります!

WordPressでのページリダイレクトのやり方|おすすめプラグイン

ペン博士

「WordPressを利用している場合、コードを直接編集せずにプラグインでリダイレクトを設定するのが一般的じゃ。ここでは代表的な2つのプラグインを紹介するぞ!

Redirection

Rediretionは、世界中で広く利用されている無料のWordPressプラグインです。操作が直感的で、初心者から大規模サイトの運営者まで幅広く活用されています。主な特徴を以下にまとめます。

基本操作の簡単さ
管理画面に旧URLと新URLを入力するだけでリダイレクトを設定可能
直感的なUIで、初心者でも使いやすい

対応するリダイレクトの種類
301リダイレクトに対応(恒久的な転送に最適)
条件付きリダイレクト(ログイン状態、リファラーなど)を設定可能

エラーログの収集機能
404エラーログを自動収集
無効なURLが発生した際に迅速に対応できる

高度なルール設定
正規表現を利用した複雑なリダイレクト設定が可能
大規模サイトや複雑なURL構造でも効率的に整理できる

ログ管理機能
リダイレクト履歴を追跡でき、運用面での改善に役立つ

Simple 301 Redirects

Simple 301 Redirectsは、その名の通り「301リダイレクト」に特化したシンプルなプラグインです。余計な機能を省き、軽量で扱いやすいのが魅力です。主な特徴を以下にまとめます。

基本機能に特化
管理画面に旧URLと新URLを入力するだけでリダイレクトを設定可能
直感的なUIで、初心者でも使いやすい

外部ドメインへの転送対応
サイト内だけでなく、外部のドメインを転送先に指定できる

シンプルなインターフェース
無駄のないUIで直感的に操作可能
必要最低限の機能に絞られているため軽量

利用シーン
複雑なルール設定や正規表現を必要としないケースに最適
小規模なサイトや外部サービスへの導線作成に向いている

生徒

プラグインでリダイレクト設定できるのって、すごく楽ですね!

ペン博士

うむ、『Redirection』や『Simple 301 Redirects』のようなプラグインを使えば、初心者でも安全に設定できる。WordPressでは“安全に操作できる仕組み”を活用するのが賢いやり方じゃ。

リダイレクト設定の注意点

ペン博士

リダイレクトは便利な仕組みじゃが、設定を誤るとSEO評価の低下やユーザー体験の悪化につながってしまうんじゃ。ここでは特に注意すべき3つのポイントを紹介するぞ!

関連性のあるページ同士で行う

リダイレクト先のページは、できるだけ元の内容に近いものを選ぶことが大切です。
例えば旧商品ページを会社概要に転送すると、ユーザーは必要な情報を得られず離脱する原因につながります。また、関連性が低いと判断し、SEO評価を正しく引き継がない場合があります。
そのため、旧ページと最も関連性の高い新ページへ転送することを意識しましょう。その結果、ユーザーの利便性とSEO評価の双方で効果的です。

リダイレクトループに注意

誤った設定により、ページが無限に行き来する「リダイレクトループ」が発生する場合があります。
例えば「A→B→A」と転送が繰り返される状態です。このような状態になると、ページが表示されなくなり、検索結果にも反映されにくくなります。
その結果、サイト全体の評価が下がり、アクセスが減る原因となります。

ループを防ぐには、あらかじめ転送の流れを整理し、1方向で終わるように設定することが大切です。
また「A→B→C→D」と経路が長くなりすぎると動作が遅くなるため、できるだけ短くまとめるのが望ましいでしょう。

検索エンジンへの反映期間と維持すべき期間

リダイレクトの設定が検索結果に反映されるまでには時間がかかります。
検索エンジンが新しいURLを認識し、データが更新されるまでには、数週間から数か月かかることが一般的です。
大規模なサイトでは、さらに時間が延びる場合もあります。

またリダイレクトは短期間で解除せず、少なくとも1年間は維持するのが望ましいとされています。
十分な期間を設ければ評価が正しく引き継がれ、検索順位の安定につながるでしょう。

生徒

ペン博士、リダイレクトの仕組みやコードでの実装方法、WordPressプラグインの使い方まで理解できました!

ペン博士

うむ!これでリニューアルやURL変更のときも安心じゃな。今後のWebサイト運用に生かすんじゃぞ!

生徒

ありがとうございます!この学びを今後のWebサイト制作に役立てます

まとめ

本記事では、リダイレクトの仕組みや設定方法について詳しく解説しました。
リダイレクトの基本ポイントを以下にまとめます。

・リダイレクトとは、アクセスされたURLから別のURLへ自動的に転送する仕組み。
・基本はサーバーサイドリダイレクト(301=恒久/302=一時的)
・サーバーにアクセスできない場合は、metaタグやJavaScriptを使ったクライアントサイドリダイレクトでも対応可能。
・WordPressの場合は、プラグインを使うことで簡単に導入可能。

リダイレクトを正しく活用すれば、ユーザーの利便性とSEO評価を守り、安定したWebサイト運営につなげられます。

WithCodeを体験できる初級コース公開中!

初級コース(¥49,800)が完全無料に!

  • 期間:1週間
  • 学習内容:
    ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
    正しい学習方法で「確かな成長」を実感できるカリキュラム。

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか?

未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください!

この記事を書いた人

WithCode(ウィズコード)は「目指すなら稼げる人材」をビジョンに、累計400名以上のフリーランスを輩出してきた超実践型プログラミングスクールです。150社以上の実案件支援を特徴にWeb制作・Webデザインなどの役立つ情報を現場のノウハウに基づいて発信していきます。

– service –WithCodeの運営サービス

  • WithCode
    - ウィズコード -

    スクール

    「未経験」から
    現場で通用する
    スキルを身に付けよう!

    詳細はこちら
  • WithFree
    - ウィズフリ -

    実案件サポート

    制作会社のサポート下で
    実務経験を積んでいこう!

    詳細はこちら
  • WithCareer
    - ウィズキャリ -

    就転職サポート

    大手エージェントのサポート下で
    キャリアアップを目指そう!

    詳細はこちら

公式サイト より
今すぐ
無料カウンセリング
予約!

目次