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

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

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

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

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

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

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

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

またSEOの概要について詳細を知りたい方は下記記事もご確認ください。網羅的にSEOの基礎を解説しています。

SEOとは？基礎知識と初心者がやるべき対策をわかりやすく解説

自社サイトの流入数を増やし、ビジネスを成長させるにはSEO対策(検索エンジン最適化)が欠かせません。このページでは初心者の方でもわかりやすいように、「SEO対策がそもそもどのようなものなのか？」を解説します。基本的な概念をどこよりもわかりやすくご紹介するので、SEO対策を検討されている方はぜひ参考にしてみてください。

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

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

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

301リダイレクトとは？.htaccessの書き方やSEOの影響

Webサイトを運営していれば、ドメインの変更やサイトを移転しなければいけないケースもあるでしょう。今回はドメイン変更前、サイト移転前に設定しておきたい、301リダイレクトの転送設定についてご紹介します。301リダイレクトを設定する理由やその前提条件、具体的な設定方法についてここで詳しく理解しておきましょう。

302リダイレクトとは？htaccessの書き方や仕組み、SEOの影響

サイトをメンテナンスするにあたり、リダイレクトが何かわからず困ってはいませんか？このページでは302リダイレクトを使いSEOに最適な理由やその用途を解説します。各リダイレクトとの違いや、設定の種類について紹介するのでぜひ参考にしてみてください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

画面サイズはデバイスによって異なるため、各デバイスに適したページへリダイレクトの設定をしましょう。

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

リダイレクト元のページやURLに施されていたパラメータは、javascriptで転送させるときには、一般的には引き継がれません。そのため、パラメータを保持したままリダイレクトするには、以下の設定が必要です。

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

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

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

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

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

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

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

株式会社ipeでは毎月SEOに関するメルマガを配信しています。SEOに注力していこうという方に必見の内容となっておりますので、ぜひ一度ご登録ください。下記フォームよりご登録いただけます。