ホームページ作成/アクセス制限・認証、サイト内検索

移転先へ自動移動(転送/リダイレクト)させる方法(3ページ目)

ホームページを別のURLへ移転した際に便利な、指定したページへ自動的に移動(リダイレクト)させる方法を解説。すぐに自動転送するほか、旧サイトの全ページに同じ「新しいホームページへの引っ越し案内」を一括表示する方法も説明。.htaccess・HTML・JavaScriptの3通りでリダイレクトする書き方を紹介しています。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

HTMLにmeta要素を書いて、数秒後に自動移動(リダイレクト)させる方法

HTMLのmeta要素で自動移動

HTMLのmeta要素で自動移動

さて次に、HTMLだけを使って自動移動させる方法をご紹介いたします。自動移動するまでの時間(秒数)を指定できるため、「移転案内」を表示してから指定秒数後に、自動的に新サイトへ移動するようなページが作れます。

 
方法はとても簡単で、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」の両方を(セミコロン記号で区切って)記述します。間違えないよう注意して下さい。
 

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

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

自動移動する場合でも、リンクも記述しておく


 
以上が、HTMLのmeta要素を使った自動移動方法です。HTML内にたった1行を記述するだけなので非常に手軽です。しかし、「ウェブサイト内の全ページで自動移動させたい」場合には、(ページ数が多いと)面倒だというデメリットもあります。
 

meta要素は、すべてのページに記述しないといけない

上記でご紹介した「meta要素を使った自動移動」は、「そのmeta要素を記述したページだけ」が対象です。ウェブサイト内のすべてのページで自動移動させたければ、ウェブサイト内のすべてのHTMLに1つ1つ同様の記述を加える必要があります。ウェブサイトを構成するページ数が多い場合には、とても手間が掛かります。

できるだけ省力化するためには、前ページでご紹介した「.htaccess」ファイルを使う方法や、次のページでご紹介するJavaScriptを使う方法を使ってみて下さい。

それでは最後に、JavaScriptを使って自動的に移動させる方法をご紹介いたします。
  • 前のページへ
  • 1
  • 2
  • 3
  • 4
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます