JavaScriptでリダイレクト、meta refreshでリダイレクトさせる方法

2022.9.16

通常なら、HTTPリダイレクトをすると思いますが、サーバーの種類によっては利用できない場合があります。
そこで、JavaScriptでリダイレクトまたは、meta refreshでリダイレクトさせる方法をご紹介します。

htaccessでのリダイレクトはサーバー側で実行されますが、JavaScriptでのリダイレクトはブラウザ側で実行されます。

その為、javaScriptを無効にしているブラウザでは実行されません。

また、以前のGoogleのクローラーはjavaScriptの挙動を認識できなかったため、転送設定がされていると判別ができませんでした。
現在では、Googleのクローラーもjavascriptを実行できるため、転送されている事が認識でき、ページ評価を移転後のページに引き継ぐことが出来ます。

・元のページが一瞬、表示されてしまいます。。
・javaScriptを無効にしているブラウザでは実行できません。
・旧ページを残しておく必要があります。
・転送先の参照元がダイレクトになります。
・パラメータが保持されない

JavaScriptでリダイレクトする記述方法3種類ご紹介します。

<script>
    window.location.href = '転送先URL';
</script>

hrefと同じなので、あまり使わないと思います。

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

履歴を残さずにリダイレクトされます。

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

Googleはmeta refreshによるリダイレクトをサポートしていますが、推奨していないので、最終手段として利用することをおすすめします。

・ユーザビリティが低下するリスクがある
・ページ評価が引き継がれない場合がある

metaタグは内に記載します。
秒数は転送までの秒数なので、「0」でOKです。

絶対パスの場合
<meta http-equiv="refresh" content="秒数;URL=転送先URL">

相対パスの場合
<meta http-equiv="refresh" content="秒数;URL=/sample/">

まずはHTTPリダイレクトで設定、動かない場合、原因追及に時間がかかりそうな場合は、JavaScriptでリダイレクト、最終手段としてmeta refreshでリダイレクトすることをおすすめします。

他にもあるよ。関連記事

猫田ねこ

パチンコ店勤務からweb制作会社へ転職という異色の経歴。漫画大好き。アニメ大好き。パチンコ大好きな、ねこです。