javascriptとmeta refreshのリダイレクト方法とメリットデメリット

javascriptとmeta refreshでリダイレクトする方法

301リダイレクトができない場合

ドメインを変更した場合、ページを別サイトに移した場合、ページを統合した場合など、リダイレクトをする場面はたくさんあります。

リダイレクトとは、ユーザーがあるWEBページにアクセスしたときに、別のWEBページに自動的に転送する設定、またはその一連の動きのことです。

もちろん、リダイレクトは301リダイレクトがベストですし管理も簡単ですが、無料ブログなどHTTPを直接触れないことで、301リダイレクトを使えないサーバもあります。

この場合、WEBサイトを移転したら、これまでのドメインやWEBページの評価を捨てて、ゼロからサイト運営を始めなければいけないのでしょうか。

いいえ、HTTPによるリダイレクト以外にも、転送方法はあります。それは、「JavaScriptによるリダイレクト」と「metaタグ(meta refresh)によるリダイレクト」です。

今回のテーマ
今回は、301リダイレクト以外の転送方法を知りたい人のために、次の内容をお話します。

  • WEBページのリダイレクトの種類
  • JavaScriptによる転送方法と注意点
  • meta refreshによる転送方法と注意点

それでは早速見ていきましょう。

WEBページのリダイレクトの種類

リダイレクトには、主にの3つの方法があります。

  • HTTPによるリダイレクト
  • javascriptによるリダイレクト
  • meta refreshによるリダイレクト

HTTPによるリダイレクト

HTTPによるリダイレクトは、サーバーを経由してURL転送を実行する方法のことで、301リダイレクト、302リダイレクトなどの種類があります(303、304、305、307もある)。

ただし、HTTPによるリダイレクトは、サーバーの設定や種類によっては使えないこともあります。

JavaScriptによるリダイレクト

JavaScriptによるリダイレクトは、サーバーを経由したURL転送ができない場合、設定の関係でHTTPを触れない場合に、代替手段になるURL転送の方法です。

JavaScriptは画面側(ブラウザ側)で実装できるため、HTMLファイル内に直接転送文を書き込むことができます。

もちろん、JavaScriptによるリダイレクトもページ評価を転送先のページに引き継ぐため、問題なく使用できる方法です。

meta refreshによるリダイレクト

metaタグ(meta refresh)によるリダイレクトも、サーバーを経由したURL転送ができない場合に使うURL転送の方法です。

metaタグに書き込むだけなので、JavaScriptよりもさらに簡単ですが、ページ評価の引き継ぎに懸念点があること、一部のブラウザで利用できないことから推奨はされていません。

一定の時間が経過するとユーザーを新しい URL に転送します。簡単な形式のリダイレクトとして使用されることがあります。ただし、一部のブラウザではサポートされないため、ユーザーを混乱させる可能性があります。W3C では、このタグを使用しないよう推奨しています(英語)。Google では、サーバーサイドの 301 リダイレクトを使用することをおすすめしています。

Google がサポートしているメタタグ – Search Console ヘルプ

JavaScriptによる転送方法と注意点

JavaScriptでリダイレクトをするには、HTMLファイルの「head」内に以下のようにJavaScriptを記述します。

<script type="text/javascript">
  setTimeout("location.href='https://wakarukoto.com/?p=20186'",1000*3);
</script>

「location.href」は転送命令です。上記は、指定した転送先の「”https://wakarukoto.com/?p=20186″」へ自動転送されます。同じドメイン内、同じ階層であれば、「/?p=20186」という書き方でも構いません。

「1000*3」の部分は、自動転送までの時間です。「1000*0」とすると、ページを開いて0秒で自動転送されます。

JavaScriptによる転送のデメリット

JavaScriptによるリダイレクトには、いくつかのデメリットがあります。

0秒でも転送元のページが表示される

JavaScriptは、ブラウザを開く際に実行されるものです。そのため、たとえ自動転送時間を0秒に設定しても、タイムラグが発生して、一瞬転送元のページは表示されます。

転送先のリファラがダイレクトになる

ブラウザ内でリダイレクトが実装されるため、正確なリファラは転送元に記録されます。つまり、転送先のリファラはダイレクトになってしまいます。正しく計測するJavaScriptの記述方法もありますが、ここでは省略します。

JavaScriptが使えないブラウザがある

JavaScriptが使えないブラウザでは、リダイレクトを実行できません。また、JavaScriptを許可していないブラウザでも、リダイレクトを実行できません。

ページを残す必要がある

JavaScriptをHTML内に記載するため、転送先がインデックスされ、ページの評価が完全に継承されるまでは、そのページを残しておく必要があります。

meta refreshによる転送方法と注意点

meta refreshでリダイレクトするには、HTMLファイルの「head」内に次のようにmetaタグを記述します。

<meta http-equiv="refresh" content="5;URL=https://wakarukoto.com/?p=20186">

上記は、指定した転送先の「”https://wakarukoto.com/?p=20186″」へ自動転送されます。同じドメイン内、同じ階層であれば、「/?p=20186」という書き方でも構いません。

また、上記はページにアクセスした5秒後に転送先に自動でリダイレクトされますが、0秒後に自動転送したい場合は、次のように記述します。

<meta http-equiv="refresh" content="0;URL=https://wakarukoto.com/?p=20186">

meta refreshによる転送のデメリット

meta refreshによるリダイレクトには、いくつかのデメリットがあります。

ページ評価を引き継げない可能性がある

meta refreshによるリダイレクトは、301リダイレクトに比べて、転送元のページ評価を転送先のページに引き継げない可能性があります。

転送先のリファラがダイレクトになる

JavaScriptのリダイレクト同様、転送先のリファラはダイレクトになってしまいます。

ページを残す必要がある

こちらもJavaScriptのリダイレクト同様、HTML内に記述するため、ページの評価が完全に継承されるまでは、そのページを残しておく必要があります……が、meta refreshによるリダイレクトは、そもそもページの評価を引き継げない可能性があります。

リダイレクトの優先順位

説明した通り、javascriptとmeta refreshでリダイレクトすることのメリットは、301リダイレクトができないサーバーでもURLを転送できるという点です。

残念ながらそれ以外は、301リダイレクトに比べて多くのデメリットがあります。

とくにmeta refreshを使うと、ページ評価を引き継げるかわからないため、meta refreshでリダイレクトをする意味はほぼないと言って良いと思います。

そのため、ページやディレクトリ、ドメインにリダイレクトをしたい場合は、まず301リダイレクトを検討してください。

サーバーや環境のせいで301リダイレクトが使えない場合は、javascriptでリダイレクトをするようにしましょう。

参考になったらSNSでシェアをお願いしますm(_ _)m