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

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

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

リダイレクトとは

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

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

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

クローラーの解釈

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

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

方法1: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

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

方法2:JavaScriptでリダイレクト

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

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が有効になっている必要があります。かつ前述したクローラーの解釈として移転したことが伝わらない場合などがあるそうです。

方法3:Webサーバーでリダイレクト

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

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

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

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

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

まとめ

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

フォローして続編をチェック

@universionsをフォロー