WEBマーケティング

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

javascriptでリダイレクトする方法|必要となるシーンや注意点も解説
301リダイレクトなどのHTTPリダイレクトが利用できない場合、重宝するのがjavascriptによるリダイレクトです。

HTTPリダイレクトのようにサーバー側で設定するリダイレクトではないため完全なリダイレクト設定とはいえませんが、ブラウザ側でリダイレクトを実行することで、ページ評価を旧URLから新URLに引き継ぐことができます。
【無料のおすすめ資料】2024年版・絶対押さえるべきWEBマーケティング用語169選
WordPress基礎知識大全

「生成AI」「LLM」など、AI時代のWEBマーケティングを制する!
基礎から最新トレンドまで、169の必須用語を完全網羅。
今すぐ無料ダウンロードして、知識をアップデートしよう!

なぜ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"
  }
}

javascriptでリダイレクトする場合の注意点

javascriptでリダイレクト設定を行う場合は以下の3つに注意しましょう。

  • リダイレクト前のページが「流入ページ」として計測される
  • 旧ページを残す必要がある
  • javascriptオフのブラウザでは機能しない

javascriptでリダイレクトを行った際に困るのがアクセス解析です。

リダイレクト元のページに流入したユーザーは、301リダイレクトであれば、リダイレクト先のページの流入として計測されます。

しかし、javascriptでリダイレクトをした場合は、検索エンジンがリダイレクト元のページを「流入ページ」として認識してしまい、アクセスが引き継がれません。

また、HTTPリダイレクトの代表格「301リダイレクト」では、旧ページを残さなくても恒久的に新ページへとリダイレクトを行ってくれますが、javascriptのリダイレクト設定では、旧ページが残っていなければリダイレクトがなされません。

さらに、javascriptはブラウザ側で実行されるリダイレクト方法のため、javascriptオフの設定をしているユーザーのブラウザではリダイレクト設定が機能しません。

上記を踏まえ、せっかくモバイル版ページを用意しても、閲覧がしづらいPC版ページを表示させてしまう可能性があることを覚えておきましょう。

まとめ

HTTPリダイレクトが利用できない場合に活用するjavascriptリダイレクトですが、使い方によっては様々な用途に応用が利く方法ともいえます。

ただし、SEOへの影響やアクセス解析の観点からみればデメリットも存在するため、できるだけHTTPリダイレクトを活用するように心がけましょう。

【無料のおすすめ資料】WordPress基礎知識大全:SEO対策まで完全網羅
WordPress基礎知識大全

世界No.1 CMSのWordPressを徹底解説!
初心者でも簡単に始められる基本設定から、サイトの成功を左右するSEO対策まで網羅。新規ブロガーもベテランも必見の完全ガイドです。
今すぐ無料でダウンロードし、あなたのサイトを次のレベルへ!

【無料のおすすめ資料】2024年版・絶対押さえるべきWEBマーケティング用語169選
WordPress基礎知識大全

AI時代のWEBマーケティングを制する!
基礎から最新トレンドまで、169の必須用語を完全網羅。
「生成AI」「LLM」など注目キーワードも満載!
今すぐ無料ダウンロードして、知識とスキルをアップデートしよう!

Service Siteサービスサイト

CONTACT US

デジタルマーケティングに関することならお気軽にご相談ください

メルマガ登録

メールマガジンはこちらからご登録ください。

デジタルマーケティングに関するホットな情報をお届けいたします。

フォームからのお問い合わせ

GMO TECHへの業務依頼、発注を希望される方はこちらよりご連絡ください。

Please click to see profile.
dark_typeA_115x57.png