javascriptでリダイレクトする方法｜必要となるシーンや注意点も解説

2023/01/16

301リダイレクトなどのHTTPリダイレクトが利用できない場合、重宝するのがjavascriptによるリダイレクトです。

HTTPリダイレクトのようにサーバー側で設定するリダイレクトではないため完全なリダイレクト設定とはいえませんが、ブラウザ側でリダイレクトを実行することで、ページ評価を旧URLから新URLに引き継ぐことができます。

INDEX

なぜjavascriptでリダイレクトを行う必要があるのか
javascriptによるリダイレクトとは
javascriptのリダイレクトコード例
様々な用途に用いるjavascriptリダイレクト
画面幅を認識したリダイレクト
デバイスごとにページを切り替えるリダイレクト
秒数を指定したリダイレクト
パラメータをつけたリダイレクト
javascriptでリダイレクトする場合の注意点
まとめ

なぜjavascriptでリダイレクトを行う必要があるのか

Webサイトのリニューアル時やドメイン変更時、ページメンテナンス時になどにURLを転送する手段として用いられるのが「リダイレクト」ですが、主に利用されるのは「HTTPリダイレクト」とよばれるサーバー側で設定するリダイレクト方法です。

HTTPリダイレクトには「301リダイレクト」や「302リダイレクト」などがあり、旧URLのページランクを新URLへと引き継げることから、主要なリダイレクト方法として利用されています。

しかし、一方でWebサイトが使用しているサーバーによってはHTTPリダイレクトが行えないこともあるため、javascriptを使ったリダイレクトを実践する必要も出てきます。

HTTPリダイレクトについて詳しく知りたい方は「リダイレクトとは？種類や設定方法、警告について解説」を参考にしてください。

javascriptによるリダイレクトとは

上記の通り、自社サイトが使用しているサーバーでHTTPリダイレクトが使用できない場合は、javascriptを使ったリダイレクトを行う必要があります。

javascriptは、HTTPリダイレクトのようにサーバー側で設定するリダイレクト設定ではなく、ブラウザ側で実行されるリダイレクトです。

したがって、「301リダイレクト」のように旧URLのページランクを新URLへと正確に引き継ぐものではありません。

とはいえ、Googleの検索エンジンはjavascriptの挙動を認識できるようになったため、転送元のURLから転送後のURLへとページランクをある程度引き継げるようになったといわれています。

javascriptのリダイレクトコード例

javascriptのリダイレクトコード例は以下の通りです。リダイレクト設定を行いたいページの<head>内に記述していきます。

<script>
      window.location.href('転送先URL')
    </script>

「転送先URL」は変更を加える点です。

様々な用途に用いるjavascriptリダイレクト

HTTPリダイレクトの代わりに旧URLから新URLへリダイレクトさせるjavascriptですが、実は様々な用途に活用することができます。

以下、いくつかの活用方法について紹介します。

画面幅を認識したリダイレクト
デバイスごとに切り替えるリダイレクト
秒数を指定したリダイレクト
パラメータをつけたリダイレクト

例えば画面幅や閲覧ユーザーのデバイスを認識してリダイレクトを行う方法は、レスポンシブデザイン以外の方法でモバイル版ページを作成した場合に活用できます。

PC版ページとモバイル版ページのHTML・URLが異なる場合は、閲覧ユーザーの属性に合わせて最適なページへと転送することも可能です。

この際、転送先に使用するURLは相対パスと絶対パスのいずれを使用しても問題ありません。

モバイル版ページの作成でGoogleが推奨しているレスポンシブデザインについて知りたい方は「レスポンシブデザインとは｜実装のメリット・デメリット、作り方について解説」を参考にしてください。

ご紹介した活用方法について、その設定の仕方を詳しく解説していきます。

画面幅を認識したリダイレクト

まずは「閲覧ユーザーのデバイスの画面サイズを計測して、一定以上の値であった場合は転送先URLへリダイレクトさせる」方法についてです。

リダイレクト設定といえば旧URLから新URL、旧ドメインから新ドメイン、といった印象が強いですが、サイト内の「モバイル版ページへのリダイレクト」といった活用方法もあります。
下記がその設定方法です。

<script type="text/javascript">
  if (screen.width <= 767) {
    document.location = "転送先URL";
  }
</script>

デバイスごとにページを切り替えるリダイレクト

「閲覧ユーザーのデバイスごとに表示するページを切り替える」リダイレクト方法は、以下の通りとなります。

var ua = navigator.userAgent;
var redirectPass = '/sp/index.html';
if(ua.search(/iPhone/) != -1 || ua.search(/iPad/) != -1 || ua.search(/iPod/) != -1 || ua.search(/Android/) != -1){
    location.href = redirectPass;
}

画面サイズはデバイスごとで異なるため、それぞれのデバイスに最適化したページへとリダイレクトさせることが重要です。

秒数を指定したリダイレクト

「指定の秒数が経過した後に、転送先URLへリダイレクトさせる」には以下のコードを使用します。

setTimeout("redirect()", 0);
function redirect(){
    location.href="/sp/index.html";
}

上述のコードでは「0」と記述されているため、アクセス直後にリダイレクトが行われます。

パラメータをつけたリダイレクト

リダイレクト元のURLに追加されていたパラメータは、通常javascriptで転送される際に失われてしまいます。

したがって、パラメータを保持したままリダイレクトする追加の設定がが必要になります。その設定方法は下記の通りです。

var url = document.URL;
if(url.match(/separate/)){
  if(url.match(/\?/)){
    location.href = url + "&device=sp"
  }else{
    location.href = url + "?device=sp"
  }
}