Tag Archives: Redirect

リダイレクト手法まとめ

Posted on by

サイト内でページを移設するとか、拡張子を変更するとか（html→php など）、ドメインを変えるとかいったことになると、旧URLから新URLへのリダイレクトをするケースがあります。リダイレクトが必要とされるのは、旧URLを参照するユーザーに不便をかけないためだけではなく、検索エンジンのロボットにURL変更を通知するためという側面もあります。

ここでは3つのリダイレクトの方法を取り上げてまとめてみました。

  • (1)301リダイレクトと呼ばれる方法で、.httaccessを使うなどして行うもの。
  • (2)HTMLの<meta http-equiv="Refresh" ...>を使う方法
  • (3)JavaScriptのlocation.href、またはlocation.replace()を使う方法

(1)はサーバー側に.htaccessを設置する方法です。具体的なコードは以下のようになります。

Redirect permanent /index.html https://likealunatic.jp/index.php
Redirect permanent /about.html https://likealunatic.jp/about.php

これで/index.htmlにアクセスしようとした人は/index.php にリダイレクトされるようになります。/about.htmlについても同様。この例は実際に当サイトで使っているもので、ファイルの拡張子をhtmlからphpに変更した際のものです。このようにリダイレクトしたい分だけずらずらと行を増やしていけばOK。
Googleでも Yahoo!でもはこの方法が推奨されています。

(2)はHTMLファイルのヘッダーに直接書き込む方法です。head要素内に下記のようなコードを書けば良いだけです。簡単。

<meta http-equiv="Refresh" content="0; URL=/index.php">

この例は /index.php に0秒後にリダイレクトする、ということになります。
ただし当然ながらこの手法は古いURLにリダイレクト用のHTMLを残しておかねばならないことになります。

また、この方法はGoogleでは推奨されていないようです。しかしYahoo!においては正当な手法としてきちんと言及されています。
この方法でリダイレクトした場合、ブラウザによってはリダイレクト用のページが履歴に残ってしまい、「戻る」ボタンを押した時の挙動がおかしくなる場合があります（「戻る」を押しても再度リダイレクトされてしまい、戻れない）。検証不足により「どのブラウザがこうなる」とは具体的に言えませんが、少し試した限りではIE7やOpera9はこの挙動になってしまうようです。
これについては似たようなことを実験しているページを発見したのでリンクを張っておきます……リファラ実験

(3)はJavaScriptを使ってリダイレクトです。ただしlocation.hrefを使うと"「戻る」ボタンで戻れない問題"が発生しますので、履歴の残らないlocation.replace()の方がいいです（こちらでは戻れる）。こちらの手法も古いURLにリダイレクト用のHTMLファイルを置いておかねばならないという点で、(1)に劣ります。
また、GoogleではJavaScriptによるリンクをクロールできないことを明示しています。

Googlebot は JavaScript を含んでいるページもインデックスに登録しますが、JavaScript そのものに含まれているリンクをたどったりインデックスに登録することはできません。

よってこのJavaScriptによるリダイレクトを使用する場合には、(2)のmeta要素による手法と併用したり、noscript要素で代替コンテンツを記述しておく必要があります。

以上3つの手法においてはダントツで(1)の301リダイレクトが優秀であるのは言うまでもありません。しかし、何らかの理由によりサーバーに手を入れることができない場合、(2)と(3)を併用するのがベストな手法でしょう。

具体的には、下記のようなコードが良いのではないかと思います。（XHTML1.0 Strictの場合）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Like@Lunatic トップページへ</title>
<script type="text/javascript">
location.replace('https://likealunatic.jp/');
</script>
<meta http-equiv="Refresh" content="0; URL=https://likealunatic.jp/" />
</head>
<body>
<noscript>
<p><a href="https://likealunatic.jp/">Like@Lunatic トップページへ</a></p>
</noscript>
</body>
</html>

ちなみにa要素によるリンクはnoscript要素で囲わなくても良いですが、リダイレクトが実行される前に一瞬だけリンクが見えてしまいますのでご注意を……。