3/4 移転先へ自動移動(転送/リダイレクト)させる方法 [ホームページ作成] All About

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を使って自動的に移動させる方法をご紹介いたします。