2021年08月17日 -

javascriptでリダイレクト(転送)を設定する方法と注意点を徹底解説!

「javascriptで転送できるようにしたいけど、どうしたらいいのかわからない」と設定方法に困ってはいませんか?今回はjavascriptでリダイレクトを設定する方法、さらに状況に合わせたリダイレクトコードの例を紹介します。javascriptでリダイレクトする意味や注意点についても合わせて見ていきましょう。

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

javascriptによるリダイレクトは、HTTPリダイレクトやが使用できないときの代替案です。HTTPリダイレクトはサーバー側でおこなわれる一方で、javascriptによるリダイレクトはブラウザ側で実行されます。

サーバー側のリダイレクトまたは meta refresh リダイレクトを行えない場合にのみ、JavaScript リダイレクトを使用してください。

引用:リダイレクトを使用してページの URL を変更する | Google 検索セントラル

検索エンジンであるGoogleにおいても、javascriptによるリダイレクトをサポートしているため、移転前のページ評価を、移転後のページに一定程度は引き継げると言われています。
しかしクロールがリダイレクトを認識できない可能性があるなどの問題点もあるため、Google検索セントラルでは、あまり推奨されてはいません。通常のリダイレクトができるなら、そちらを優先して実装するようにしましょう。

通常のリダイレクトとの違い

Javascriptリダイレクト 通常のリダイレクト
Pagerankの引継ぎ
実行場所 プラウザ サーバー

リダイレクトとは、あるページから別のページに転送することを指します。

サイト全体の引っ越しや移転、サイトリニューアル、1ページ転送、スマホサイトの作成などの際に、リダイレクトが必要です。リダイレクトの設定をしないと、旧サイトやページのGoogle評価が消えてしまい、検索順位も下がってしまいます。

一般的にリダイレクトには、以下の2種類があります。

・301リダイレクト:旧ページから永続的に転送し続ける設定
・302リダイレクト:旧ページから一時的に転送する設定

リダイレクトを設定する際、最も利用されるのはHTTPによるリダイレクト(301リダイレクト)です。移転前のページ評価を、移転後のページに確実に引き継ぐと言われています。

ただしサーバーを経由して転送をおこなう方法であるため、サーバーの設定や種類によっては使用できないこともあります。そのようなときに、javascriptでのリダイレクトが活躍してくれます。

javascriptでリダイレクトする場面について

javascriptによるリダイレクトは、301リダイレクトなどのHTTPリダイレクトが利用できないときに使用するリダイレクトの方法です。javascriptは通常のリダイレクトと違い、ブラウザ側で実装できるため、HTMLファイル内に転送コードを直接書き込めるため、サーバーにアクセスできない場合は使われることも多いリダイレクトです。

Google検索セントラルのヘルプページでも、以下のように説明されています。

サイトの移転にあたっては 301 リダイレクトが最適ですが、ウェブサイトのサーバーにアクセスできない場合は、この目的で JavaScript によるリダイレクトを使用することもできます。

引用元:不正なリダイレクト|検索セントラル|

javascriptでリダイレクトを設定する方法

実際にjavascriptでリダイレクトをかけるなら、主に3つの方法があります。

・location.href
・location.assign
・location.replace

それぞれ解説していきます。

location.href インターフェースを利用したリダイレクト

location.href=”URL”

locationインターフェースを利用することで、任意のURLを転送できます。URLの部分に、転送させたいURLを入力しましょう。

location.assign() メソッドを利用したリダイレクト

location.assign(‘URL’);

location.hrefと特に変わらない方法で、上記と同様の動作が可能です。locationの前には「window」や「document」を入れても問題ありません。

location.replace() メソッドを利用したリダイレクト

location.replace(‘URL’);

こちらの方法でも転送が可能です。ただしブラウザの履歴が残らないため、ユーザーが「戻る」ボタンを押しても、前のページには戻れません。状況や場合によって、使い分けましょう。

javascriptでリダイレクトを設定する際の注意点

javascriptによるリダイレクトを設定する際、いくつかの注意点があります。

・一瞬、転送元のページが表示されてしまう
・javascriptを無効にしているブラウザでは実行できない
・旧ページを残しておく必要がある
・転送先のリファラ(参照元)がダイレクトになる

301リダイレクトでは、旧ページを残さずとも新ページへと永久的に転送してくれますが、javascriptの場合は、旧ページを残さなければいけません。

またjavascriptのリダイレクトの場合、検索エンジンはリダイレクト元(参照元)を流入ページと認識するため、何の設定もしなければ、アクセスがダイレクトになります。

これらの注意点を理解したうえで、javascriptのリダイレクトを設定しましょう。

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

javascriptのリダイレクトコードの具体例は、以下のとおりです。

<script type=”text/javascript”>
<!–-
setTimeout(“link()”, 0);
function link(){
location.href=’転送先URL’;
}
–>
</script>

「0」と「転送先URL」が変更を加える部分です。「0」は指定時間後にリダイレクトをする値になります。リダイレクト元のページにアクセスがあったとき、すぐにリダイレクト先へ転送できます。

ここから紹介するリダイレクトコードは、用途に合わせてご活用ください。

デバイスによってページを切り替えるリダイレクト

スマートフォンやタブレット、PCなどのアクセスに応じて、表示ページを切り替えてリダイレクトさせたいときは、以下のコードを使いましょう。

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に施されていたパラメータは、javascriptで転送させるときには、一般的には引き継がれません。そのため、パラメータを保持したままリダイレクトするには、以下の設定が必要です。

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

秒数を指定するリダイレクト

設定した秒数が経過したら、転送先URLへリダイレクトさせる方法もあります。

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

「0」の部分が変更可能です。「0」のままであれば、アクセス直後にリダイレクトされます。

状況に合わせてjavascriptでリダイレクトを設定しよう

HTTPリダイレクトが利用できないときに活躍するjavascriptは、状況に合わせた設定や使い方によって、代替策として応用の効く有効的な方法です。

ただしHTTPリダイレクトと比べると、デメリットもあります。javascriptのリダイレクト設定をする前に、まずはHTTPリダイレクトが使用できないかを確認・検討しましょう。Googleが推奨するように、HTTPリダイレクトを用いることが最善の方法だからです。

サーバーや環境が理由で301リダイレクトが使えない場合は、javascriptでリダイレクトの設定をおこないましょう。