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

javascriptによるリダイレクトはブラウザで実行される機能です。サーバー側でのHTTPリダイレクトが使えない場合の対応になります。

301リダイレクトではないので、ページ価値を100％転送先へ継承できるものではありません。

リダイレクトコード生成ツールを使えば、アクセス解析のリダイレクト元記録を外したりリファラーURLを継承したりできます。

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

WEBページのリダイレクトには、サーバー側でできる転送（HTTPリダイレクト）とブラウザ側で行うリダイレクトとがあります。

そのケースに応じて最適なリダイレクト手段を利用する必要がありますね。

.htaccessによるリダイレクトはこちら

HTTPリダイレクトが使えないケース

サーバーによっては、HTTPによるリダイレクトが実行できない場合があります。

例えば無料で貸し出しをしているホームページスペースなどがそれにあたります（URLがサービス名のドメインだったりするところ）。

こういった無料サービスはサーバー設定に制限が掛かっているので、.htaccessなどが使えないのです。

そんな時にmetaタグやJavaScriptによる転送が、サーバーリダイレクトの代替策としてよく使われます。

javascriptによる転送とは

javascriptはブラウザで動くプログラム

HTTPによるリダイレクトがサーバー上で処理されるのに対し、javascriptはブラウザ側で実行されるものです。

そのため、javascript機能がOFFになっているブラウザでは動きません。ユーザーによってはOFFにしている場合もあります。

ユーザーの環境の影響を受けるので、全てのユーザーを完璧に転送する方法ではないと言えます。

現在はGoogleもjavascriptの挙動を把握できる

以前までGoogleのクローラーはjavascriptの挙動を認識できなかったため、転送設定がされている事の判別ができませんでした。

しかし今現在はGoogleのクローラーもjavascriptを実行できるため、転送が設定されている事がきちんと認識できます。

ですのでページ評価を移転後のページに引き継いでくれます。

301リダイレクト判定ではない

しかし.htaccessによるリダイレクト設定と違い、Googleなどに301リダイレクト（永久的な転送）である事などを通知する事ができません。

あくまで一時的な転送（302リダイレクト）の扱いとなり、厳密なリダイレクトではないと言えます。

新旧のページを残す必要

またjavaScriptを実行させるためには、ページを移転したあとも旧ページを残しておく必要があります。

そのため、同一コンテンツが複数存在することによるペナルティの対象になる可能性もあり、必ずしもおすすめできる方法ではありません。

javascript転送コード例

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

「転送先URL」のところにジャンプ先のアドレスが入ります。

setTimeout内の数字は「0」にしておき、瞬時に転送させる事でSEO的な考慮もしています。

javascript転送の課題

javascriptによる転送は簡単な設定ですが、いくつか注意しておくべきことがあります。

特にGoogleのアクセス解析データにおける問題です。

問題点1：流入元が正確に測定できない

サイトAからサイトBなどにリダイレクトを掛けた場合を例に取りましょう。

サイトAへの流入元が「自然検索」からだった場合、サイトBへリダイレクトした訳ですから流入元はそのまま「自然検索」と出て欲しいのが普通です。

しかしjavascriptによる302リダイレクト（一時的な転送）の場合は、301（永久転送）と違い、サイトAが間に入った判定になります。

ですので対策を取らないと、サイトBの流入元は「サイトA」という形で解析データが出てしまうのですね。

問題2：パラメータが保持されない

リダイレクト前にURLにアクセス解析用等パラメータを付与していた場合であっても、そのままではパラメータは保持されません。

常にjavascript内に指定された、URLパラメータのないURLに転送されてしまいます。

下で紹介するジェネレーターを使えば、このリダイレクト元URLやパラメータURLに関する問題を解消したコードを出力できます。。

ページ内リンク：javascriptURLリダイレクトジェネレーター

モバイル版の場合のリダイレクト例

リダイレクトは別ドメインサイトへ飛ばすだけでなく、WEBサイト内の特定コンテンツへ飛ばす場合もあります。

モバイル端末からアクセスがあった場合に、専用のスマホページへジャンプさせる方法を紹介します。

画面幅を感知してリダイレクト

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

スマホ端末を感知してリダイレクト

どちらかというとjavascriptの転送を使う場合、下記事例の方が馴染みがあるのではないでしょうか。

<script type="text/javascript"> if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) { location.href = '/sp/'; //転送先URLが入る } </script>

SSL（HTTPS）へのリダイレクト例

最近はSSL化の流れもあり、下記リダイレクト例はよく使われます。

http:のURLへのアクセスをhttps:のアドレスへ転送する場合ですね。

コード例

<script type="text/javascript"> var url = location.href if(url.indexOf('http:') >= 0) { // 判定方法の修正 // url文字列の書き換え var newUrl = url.replace('http:', 'https:'); // 書き換え方法の修正 // リダイレクト location.replace(転送先URL); //httpsのアドレス } </script>

SSL化ができている証である「鍵マーク」が付くように、前もってWEBサイト内は整備をしておく必要があります。

javascriptURLリダイレクトツール

javascriptURLリダイレクトジェネレーター

javascriptによるURLリダイレクトのコードを作成するためのオンラインツールです。

転送先のURLを入力するだけで自動的にコードを作ってくれますので、それを貼り付けるだけです。

クロスブラウザ対応、スクリプトなしバージョン、SEO対応コードなどまでセットで出力します。

コード例

<link rel="canonical" href="https://lpeg.info/"> //転送先が本来のURLである事を宣言 <noscript> <meta http-equiv="refresh" content="0;URL=転送先URL"> </noscript> <!--[if lt IE 9]><script type="text/javascript">var IE_fix=true;</script><![endif]--> <script type="text/javascript"> var url = "転送先URL"; if(typeof IE_fix != "undefined") // IE8以下のブラウザの場合 { document.write("redirecting..."); // この行は削除せずにそのまま（表示はされない）。 var referLink = document.createElement("a"); referLink.href = url; document.body.appendChild(referLink); referLink.click(); } else { window.location.replace(url); } // 他ブラウザ向け </script>

リンク先：javascriptURLリダイレクトジェネレーター

コードの説明

まず一番上のcanonicalタグは、他のmetaタグと一緒の位置に置いてください。

ここで指定したURLを本来のサイトとGoogleが認識するため、SEO上有効です。

次のnoscriptの部分（meta refresh）が、JavaScriptが無効なブラウザ用向けに用意されたコードです。

最終的なリダイレクトスクリプトには、window.location.href = urlではなくwindow.location.replace（url）を使用しています。

コード内でサポートされる課題

まとめ：なぜjavascriptによる転送が必要か

今はHTTPリダイレクトができるサーバーがほとんどですから、あえてjavascriptによるリダイレクトを掛ける必要はないと思う事でしょう。

しかし世の中にはまだサーバー設定の効かないWEBサーバーを使ったサイトがたくさんあります。

現在はそれぞれサービス終了を迎えたり、老朽化による処理速度遅延の状態にある様です。

そこでこのjavascriptを使ったリダイレクトが使えるようであれば、利用しています。

次々とサービス終了を迎える無料スペースWEBサイト

先日も無料スペースのWEBサイトがサービス終了する事になったので、何とかして欲しいという問い合わせがありました。

無料で貸し出しされているサーバーはURLもそのサービス提供側のドメインであることが多く、ドメイン名を継承する事ができません。

そうなると新しいサイトをとにかく立ち上げて、そちらへとリダイレクト設定を掛けるしかない訳ですね。

javascriptのリダイレクトも不十分だがしないよりはまし

サービス終了間際（あるいは解約日間際）になって問い合わせてくる方が多いので、結果間に合わないという事もあります。

価値を継承するのにもやはりある程度時間が掛かります。

もちろん301リダイレクトではないので、100％その元サイトの価値を引き継げる保証はありません。

javascriptの場合、新旧両方のページを残しておかなければならない事もネックになります。

そういった意味でも、無料スペースWEBサイトの価値を継承する策としては不十分だと言えるでしょう。

しかし少しでも可能性を信じ、canonical、meta refreshと併用して実施するようにしています。

一押し人気コーナー紹介