【Web】Webページをリダイレクトする３つの方法とベストプラクティス

メリークリスマス、メリークリスマス。

今回はWebページをリダイレクトする３つの方法とそのメリット・デメリットについてご紹介します。

リダイレクトとは

ウェブサイトにおけるリダイレクト（英:redirect）とは、ウェブサイトの閲覧において、指定したウェブページから自動的に他のウェブページに転送されること。
引用：リダイレクト (HTTP) – Wikipedia

WebページのURLが変更されたときなどに使いますね。
また、フィッシング詐欺などに使われることもありますのでご注意ください。

いろいろな方法があるけどベストプラクティスはどれか

クローラーの解釈

googleの場合はサーバサイドで301リダイレクトの使用を奨めている[2]。ヤフーについては0秒リダイレクトがSEO的に有利と言える。
引用：リダイレクト (HTTP) – Wikipedia

いわゆるSEO的にどうか、という観点もあります。

方法１：HTMLでリダイレクト

一番簡単な方法です。

<meta http-equiv="refresh" content="0; URL='http://new-website.com'" />

According to the W3C there are some browsers that freak out with the Meta refresh tag. Users might see a flash as page A is loaded before being redirected to page B. It also disables the back button on older browsers.
引用：How to Redirect a Web Page | CSS-Tricks

自動的にジャンプしない環境もあり、かつ戻るボタンを使うとリダイレクトより早くコンテンツがロードされる場合があります。よろしくないですね。

方法２：JavaScriptでリダイレクト

２つ目の方法はスクリプトでリダイレクトです。比較的安全です。

window.location = "http://new-website.com";
window.location.href = "http://new-website.com";
window.location.assign("http://new-website.com");
window.location.replace("http://new-website.com");

上記のように色々な書き方があります。
ただし、JavaScriptが有効になっている必要があります。かつ前述したクローラーの解釈として移転したことが伝わらない場合などがあるそうです。

方法３：Webサーバーでリダイレクト

最も一般的かつGoogleにも推奨されている方法として、サーバーで行うリダイレクトです。

Apacheだと.htaccessに特定のルールを追加してリダイレクトさせます。

Redirect 301 / http://www.new-website.com

※ mod_rewriteを有効にする必要があります

詳しくはこちら → 301 Redirects | CSS-Tricks

まとめ

Webサイトごと綺麗にリダイレクトできたり、シングルページレベルでのリダイレクトできたりと意外と細かく指定できます。
また、nginxなどをお使いの場合は設定ファイル(/etc/nginx/nginx.conf)を編集する必要があるので、「nginx リダイレクト」などで調べて試してみてください。

Author Profile

Tsukasa Nagata

株式会社ユニマル代表取締役COO。「Web制作チームのためのクリエイティブ・プラットフォーム『universions』」では、UIデザイン・開発とマーケティング、色んなところに遊びにいくのが担当。