HTML5 Interenet

サイトを引っ越したときのリダイレクトの方法について

投稿日:

引っ越し

サイトを別のURLへ引っ越ししたときの対処方法

サイトを別のURLへ引っ越ししたときの対処方法を調べてみました。

その方法は大きく分けて、3つ。

  1. .htaccessファイルを使って自動転送(リダイレクト)させる
  2. HTMLのmeta要素を使って自動転送(リダイレクト)させる
  3. JavaScriptを使って自動的に移動させる

それぞれに一長一短あるようです。

 

 

.htaccessファイルを使う

301リダイレクトする

301リダイレクトとは

301リダイレクトとは、webサイトを恒久的に移転先へ転送することです。ドメインの転送にはYahooもGoogleも301リダイレクトをすすめています。
webサイトのURLを変更したときに、元のURLから変更先のURLへ301リダイレクトし、ユーザーや検索エンジンが正しいページにたどり着くことを保証する最善の方法となります。
301リダイレクトの設定は、.htaccessファイルで指定します。(Google推奨)

301リダイレクトと302リダイレクトの違い

301リダイレクトとは301リダイレクトは、恒久的な転送です。302リダイレクトは、一時的な転送です。
301リダイレクトと302リダイレクトでは、検索エンジンの検索結果に表示されるURLに違いが生じます。
301リダイレクトと302リダイレクトの違い例301リダイレクトは、新しいコンテンツをインデックスしつつ、URLも新しくなります。302リダイレクトは、新しいコンテンツをインデックスしつつも、URLは昔の古いURLを残します。

設定方法

例)http://old.jp/ から、新ドメインhttp://new.jp/にサイト全体を移転する場合
  http://old.jp/のルートディレクトリにある.htaccessを編集します。

Redirect permanent / http://new.jp/

Redirect permanent  [転送元]  [転送先]

【解説】
この場合は、転送元が「/」で転送先が「http://new.jp/」です。上記の1行を書くだけで、トップページだけではなく、旧サイトへのあらゆるアクセスがすべて新サイトへ転送されます。例えば、現在のウェブサイトが http://old.jp/であれば、以下のような動作になります。

http://old.jp/about.php へのアクセスは、
→http://new.jp/about.php に自動転送されます。
http://old.jp/grape/juice.html へのアクセスは、
→ http://new.jp/grape/juice.html に自動転送されます。

 

例)現在のウェブサイトの1コーナー http://old.jp/corner/ だけへのアクセスを、別サイト http://new.jp/square/ へ移動させたい場合

Redirect permanent /corner/ http://new.jp/square/

【解説】

この場合は、転送元が「/corner/」で転送先が「http://new.jp/square/」です。指定のディレクトリ(ここでは「corner」)以下のすべてのアクセスが、新サイトへ転送されます。例えば、以下のような動作になります。
http://old.jp/corner/01.html へのアクセスは、
→ http://new.jp/square/01.html に自動転送されます。
http://old.jp/corner/help/faq/ へのアクセスは、
→ http://new.jp/square/help/faq/ に自動転送されます。
http://old.jp/another/ へのアクセスは、転送されません。

上記のよう、Webサーバーの環境によりますが、2通りの301リダイレクトの書き方があります。

301リダイレクトが適用されるまでの期間は、設定後数週間〜数ヶ月かかる場合があります。
サーチコンソールの「アドレス変更ツール」を併用すれば、Googleにより早い期間でサイトの移転を認識させることが可能のようです。 

「404 Not Found」エラーで表示される内容を「移転案内」にする裏技

先ほどの方法は、アクセスされた瞬間に自動転送が行われるため、ユーザは(ブラウザのアドレス欄を注視していない限り)転送された事実には気付きません。旧URLが使えなくなる予定なのであれば、自動転送の前に「移転した案内」を表示させる方が良いかもしれません。

ウェブサイト内の全ページに一括して移転案内を表示するには、「404 Not Found」エラーをカスタマイズして利用する方法が便利です。大手サイトではたいていこの方法を使って独自のエラーページを作っています。
このエラー表示機能を利用することで、全ページに一括して同じ移転案内を表示できます。手順は、次の通りです。

1. 移転案内を掲載したページを1つ用意 (moveinfo.htmlなど)
例えば「moveinfo.html」などのファイル名で、移転案内を掲載したページを用意します。このファイルは、ウェブサイト内の最上階層(トップページがあるディレクトリ)にアップロードしておきます。

2. 「404 Not Found」エラーの際にはそのページが表示されるよう.htaccessを記述
「.htaccess」ファイルに、以下の1行を記述します。これは、404エラーが発生した際には最上階層にある「moveinfo.html」を表示させるようにする記述です。
ErrorDocument 404 /moveinfo.html
※「/moveinfo.html」の部分は、先ほど作成したファイル名を指定します。何でも好きな名称で構いません。先頭の「/」記号を忘れないよう注意して下さい。なお、最上階層以外のディレクトリ(フォルダ)に置いた場合は、ディレクトリ名も加える必要があります。ここでは絶対パスで記述する必要があり、相対パスで書いてはいけません。

3. 404エラーの表示確認
存在しないページをブラウザで表示させてみて下さい。そこで、通常の「404 Not Found」エラーメッセージではなく、移転案内を書いた独自ページ(moveinfo.html)が表示されればOKです。表示されない場合は、記事「Not Foundなど エラーメッセージを独自作成」の5ページ目にある「うまくいかない場合の原因と解決方法」をご参照下さい。

4. 全ページを削除
最後に、ウェブサーバ上にあるすべてのHTMLファイルを削除します。これによって、どのページにアクセスしようとしても「404 Not Found」エラーが出るようになります。つまり、どのページにアクセスしても、同じ移転案内が表示されるわけです。

参考:
http://seolaboratory.jp/other/2016060336604.php 
https://allabout.co.jp/gm/gc/23770/2/ 

 

 

HTMLを使う

HTMLのmeta要素を使った自動移動方法です。HTML内にたった1行を記述するだけなので非常に手軽です。自動移動するまでの時間(秒数)を指定できるため、「移転案内」を表示してから指定秒数後に、自動的に新サイトへ移動するようなページが作れます。

 

方法

HTMLのhead要素内(<head>~</head>の内側)に、以下のようなmeta要素(タグ)を記述します。

<meta http-equiv=”refresh” content=”秒 ; URL=移動先”>

上記のたった1行を書くだけです。content属性の値として、「移動までの待ち時間(秒数)」と「移動先URL」を、半角セミコロン記号「;」で区切って記述します。具体的には、例えば以下のように記述します。

<meta http-equiv=”refresh” content=”3;URL=http://allabout.co.jp/”>

上記の例では、「3秒後」に「http://allabout.co.jp/」へ自動的に移動します。

秒数に「0」を指定すれば、アクセスした瞬間に移動します。しかし、秒数が0だと、後から「戻る」ボタンで戻ってきたときに、一瞬で再度次のページに進んでしまう可能性があるため、若干不便です。この方法を使うなら、1秒以上を指定しておく方が良いでしょう。


自動移動するためのmeta要素の書き方で、よくある間違い

次の2行のうち、上側は誤りです。下側が正しい記述です。
×誤→ content=”3″;URL=”http://allabout.co.jp/”
○正→ content=”3;URL=http://allabout.co.jp/”
上側の記述は、引用符(ダブルクォーテーション記号)で囲む範囲が間違っています。「content」と「URL」を別々の属性のように書いてはいけません。「content」という1つの属性の値に、「秒数」と「URL」の両方を(セミコロン記号で区切って)記述します。間違えないよう注意して下さい。


移動用のリンクも本文中に掲載しておく

自動移動するとはいえ、必ず本文中にも「自動的に移動しない場合は、下記のリンクをクリックして移動して下さい」というような文面で移動用リンクを掲載しておきましょう。なぜなら、
必ずしもすべての環境で自動移動されるとは限らない
指定秒数を待たずに、今すぐ移動したいユーザも居る
からです。

 

 

JavaScriptを使う

JavaScriptを使って指定のURLへ自動移動させます。(以下https://allabout.co.jp/gm/gc/23770/4/より転載)

この「JavaScriptを使って自動移動させる方法」は、前ページでご紹介した「HTMLのmeta要素を使って自動移動する方法」と同様に、すべてのページ1つ1つに記述を加える必要があります。しかし、もし元々「全ページで共通して読み込まれるJavaScriptファイル」が存在するなら、そのファイルに自動移動用の記述を追加することで、全ページの一括自動移動が可能です。

■パスを維持した状態で、移転先に自動移動させる場合

「.htaccess」ファイルを使う場合と同じように、URLのパス部分(ディレクトリ名やファイル名の部分)を維持した状態で移動させたい場合は、例えば以下のように記述します。

location.href = “http://allabout.co.jp” + location.pathname;

上記のように記述した場合は、以下のように動作します。
http://www.example.com/corner/orange.html へのアクセスは、
→ http://allabout.co.jp/corner/orange.html に自動転送されます。
http://www.example.com/square/help/faq/ へのアクセスは、
→ http://allabout.co.jp/square/help/faq/ に自動転送されます。

なお、URLの末尾に付加される「?」記号や「#」記号に続く部分も維持した状態で転送したいなら、以下のように記述します。

location.href = “http://allabout.co.jp” + location.pathname + location.search + location.hash;

※例えば、「 http://www.example.com/corner/square.cgi?page=123#abc 」というURLがあるとき、JavaScriptでは、
location.pathname は、「 /corner/square.cgi 」の部分を
location.search は、「 ?page=123 」の部分を
location.hash は、「 #abc 」の部分を
それぞれ表します。これらを「移動先URL」の後に付け加えることで、前のURLの構造を維持したまま移動させられます。

 

自動移動させるJavaScriptを記述する例

■HTML内に直接JavaScriptソースを記述する場合の例:
HTMLソース内に以下のように記述すると、このスクリプト部分を読み込んだ直後に、「移動先URL」に移動します。

<script type=”text/javascript”><!–
location.href = “移動先URL”;
// –></script>

■独立したJavaScriptファイルに記述しておき、HTMLから呼び出す場合の例:
例えば、以下の1行を記述し、「redirect.js」などのファイル名で保存します。

location.href = “移動先URL” + location.pathname + location.search + location.hash;

HTMLファイルに以下の1行を記述することで、上記のJavaScriptファイルを呼び出します。

<script type=”text/javascript” src=”redirect.js”></script>

このJavaScriptファイルが読み込まれた直後に、(元のURLの構造を維持した状態で)指定のURLへ自動移動します。

なお、ブラウザのJavaScript機能が無効に設定されていれば、ページ移動は行われません。ですから、JavaScriptが実行されなかったときのために、 「自動的に移動しない場合は、下記のリンクをクリックして移動して下さい」といったメッセージと共に、移転先ページへのリンクも設けておく方が望ましいでしょう。

========(転載ここまで) 

 

まとめ

実際にどんな処理をしたかというと、
.htaccessファイルを301リダイレクトさせて、さらに移転先案内を掲載したページを1つ用意し、「404 Not Found」エラーの際にはそのページが表示されるよう.htaccessに記述しました。そして、仕上げは、Googleサーチコンソールで「アドレス変更」の手続きをしました。

その結果、いままでのアクセス情報をそのまま新しいドメインのサイト引き継いで引っ越すことが出来ました。
アナリティクスで見ても、以前のデータを新しいドメインでもちゃんと読み込んでいます。
相変わらず直帰率が高いけど。。。(汗) 

サイトの引っ越しって意外と大変なんですね。

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。

-HTML5, Interenet

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

WordPressでメルマガ発行するときのプラグイン

WordPressでメルマガを発行したいとのリクエストを受たのでプラグインをいろいろと探してみました。 以前に書いた「Mail Poet」はすごく使い勝手がよくて良さそうだったのですが、Gmail経由 …

サイトで使っているサーバーを調べる方法

現在公開されているWebサイトがどこのサーバで公開されているのかを知りたいとき、どうすればいいか調べてみました。 というのも、あるレンタルサーバーを解約することにしたのですが、そこにはクライアントさん …

no image

次世代ブログ!? 新しいメディアnoteってなに?

使いかたは自由自在! 次世代『プラティシャー』ーNOTEー note cakes(ケイクス)が運営している新しいメディア。 2014年4月のオープン。 cakesは著名人の執筆や雑誌のようなメディアを …

no image

クラウド型レンタルサーバー★ Zenlogic(ゼンロジック)を試してみた!★その1

「サーバに詳しくないWeb担当者でも使いやすい!」と評価を集めている新しいクラウド型レンタルサーバーが、ファーストサーバ社の「Zenlogic(ゼンロジッ)ク」。 ちょうど、創業20周年記念 特別限定 …

CSS★丸い背景+円形の中央に文字

cssのメモ。 丸形の作り方 基本的な方法は、 (1)div 要素で囲った範囲の上下左右のサイズを指定する(height, width) (2)背景色を付ける(background-color) (3 …

サイト制作・グラフィック制作をしているデザイナーです。制作で躓いたことの備忘録としてこのブログを始めました。
たくさんの検索結果から、実際に何度も何度も自分で試してみて、自分に合うなと思った方法やうまくいった方法をこのブログに書き留めています。
プログラム関係のことはもっぱらコピペ派。
自分でゴリゴリ書くことはできません。。。プログラムが分かる人がうらやましいです。
そんな私でもなんとかサイト制作ができるのはグーグル先生と貴重な情報をおしげもなく公開してくださっているたくさんの方々のおかげ。
有志のみなさまに日々感謝しつつ制作させていただいています。