ページURLの変更や、Webサイトの移転時にリダイレクト設定をしていないと旧ページ・旧Webサイトにアクセスした際に404エラー等が表示されてしまいます。
そのままだと、アクセスしてくれたユーザーも離れてしまいますのでリダイレクトの設定は重要になります。
今回は、metaタグを使ったHTMLリダイレクトの方法と注意点について解説していきます。
リダイレクトとは
リダイレクトとは、ページやWebサイトのURLが変更になった際にユーザーを誘導(転送)するための処理の事を言います。
リダイレクト設定をしていない場合は404エラー等が表示されてしまい、アクセスしてきてくれたユーザーが離れてしまいますので、リダイレクト設定は重要になります。
HTMLリダイレクトの方法
まずは、HTMLリダイレクトの方法を解説していきます。
以下のコードをご覧ください。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="リダイレクトまでの秒数;URL=リダイレクト先のURL">
</head>
<body>
…
</body>
</html>上記のようにheadタグ内にmetaタグを記述し、http-equiv属性にrefreshを指定、content属性にリダイレクトまでの秒数とリダイレクト先のURLを指定します。
HTMLリダイレクト設定例
続いて、HTMLリダイレクトを設定した例を紹介いたします。
3秒後にリダイレクトする
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="3;URL=https://cdg-blog.jp">
<title>このページは移転しました</title>
</head>
<body>
<p>このページは移転しました、3秒後に自動的に移動します。</p>
</body>
</html>content属性に「3」と記述する事で3秒後にリダイレクトをする事ができます。URLには当サイトのトップページを例として設定しています。
あわせて「このページは移転しました、3秒後に自動的に移動します。」と記述する事で、ページが移転した事や自動的にリダイレクトする事をユーザーに分かるようにしています。
リダイレクトするまでの時間は、長すぎるとユーザーのストレスになりますので5秒以内にするのが一般的です。
即時にリダイレクトする
先程のように、リダイレクトする事をユーザーに告知しないで即時にリダイレクトする事も可能です。
即時にリダイレクトするには、以下のようにリダイレクトするまでの秒数を「0」に設定します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0;URL=https://cdg-blog.jp">
</head>
</html>秒数を「0」に設定する事で、元のページの表示がされる前にリダイレクトされます。
ページの移転や自動でリダイレクトする旨の表示をしなくてもいい場合には0秒に設定してもいいかと思います。
HTMLリダイレクトの注意点
HTMLリダイレクトは簡単にリダイレクト処理ができますが、以下のような注意点もあります。
ページごとに記述する必要がある
HTMLリダイレクトはページごとに記述する必要があるため、Webサイト全体の移転などのページ数が多い場合は作業が困難になります。
一時的なリダイレクトや、ページ数が少ない特定のページのみの場合、htaccessでのリダイレクトが使用出来ない場合などに使用するのがいいかと思います。
リダイレクトループが発生しやすい
リダイレクトループとは、リダイレクト先もリダイレクトされていたりして、無限にリダイレクトが続いてしまう現象の事を言います。
HTMLリダイレクトはページごとに記述する必要があるので、管理も難しくなりますので注意が必要です。
ページランクの引継ぎがされない
ページランクとは検索エンジンからのページの評価です。
HTMLリダイレクトだとこのページランクの引継ぎがされないようなので、htaccessを使用してのリダイレクトが推奨されています。前項で記述したような理由が無い限りはhtaccessを使用したリダイレクトをおすすめします。
さいごに
いかがでしたでしょうか。
今回は、metaタグを使ったHTMLリダイレクトの方法と注意点について解説しました。
基本的にはhtacessを使用したリダイレクトが望ましいです。ですが、htaccessが使用できない場合などに対応するために、HTMLリダイレクトの方法を覚えて、ページやWebサイトの移転の際はリダイレクトを忘れずに設定するようにしましょう。
