お問い合わせフォームの完了ページや、404ページで「5秒後にトップページへリダイレクトされます」のような表記、たまに見かけませんか？
このような単純なページリダイレクト処理は、実はHTMLだけで簡単に実装できるんです。
目次
HTMLでリダイレクトする方法とは？
HTMLでは、metaタグのhttp-equiv="refresh"というプロパティをを使ってリダイレクトを設定できます。サーバー側の設定やJavaScriptを使用しなくても、手軽にページを転送させることができるため、簡単なウェブサイトや特定のページに適した方法です。
metaタグのhttp-equiv="refresh"というプロパティを使います。
例：5秒後に、/home/ページへリダイレクト
<meta http-equiv="refresh" content="5; url=./home/">content属性に「秒数」と「転送先のURL」を指定します。
この例では、転送先のURLは相対パスで指定していますが、https~からのURLを直接指定してもOK。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="5; URL=./home/">
<title>5秒後にリダイレクト</title>
</head>
<body>
<p>5秒後に自動的に新しいページに移動します...</p>
</body>
</html>もちろん、「○秒後にリダイレクトさせる」という処理はJavaScriptのsettimeoutとlocation.hrefで可能です。
また、秒数を0にすると即時リダイレクトになります。（あんま使い所はなさそう）
例：即座にhttps://example.comへリダイレクト
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="0; URL=https://example.com">
<title>リダイレクトページ</title>
</head>
<body>
<p>リダイレクト中です。少々お待ちください...</p>
</body>
</html>ただし、サイト移転目的でのリダイレクトには使わない方がいいでしょう。
そのような場合は、Googleが推奨している301リダイレクトを.htaccessファイルなどから行うべきです。
