HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLでリダイレクトを実行する方法｜metaタグを使ったクライアントサイド転送の基本

Webサイトの移転に伴い、アクセスを新しいURLへ誘導したい場面は少なくありません。リダイレクトの実装方法は複数ありますが、一般的にはサーバーサイド（バックエンド）で設定するケースが多いでしょう。本記事では、HTMLのmetaタグを使った「クライアントサイドリダイレクト」の実装方法をわかりやすく解説します。

HTMLリダイレクトの仕組み

このリダイレクトは、HTML文書のhead要素内に記述したmetaタグによって実現します。指定した秒数だけ待機してから、ブラウザが自動的に新しいページへ遷移する仕組みです。

基本的な構文は以下のとおりです。

<head>
  <meta http-equiv="refresh" content="<待機秒数>; url=<リダイレクト先のURL>">
</head>

各属性の役割

http-equiv属性は、HTTPレスポンスヘッダーを疑似的に再現するための属性です。「refresh」を指定することで、ページの自動的な再読み込み（リフレッシュ）が可能になります。

content属性には、リダイレクトまでの待機秒数と遷移先のURLを「;」（セミコロン）で区切って指定します。待機時間を設ければ、「サイトは恒久的に移転しました。新しいURLをブックマークしてください」や「メンテナンス中のため別ページへご案内します」といったメッセージをユーザーに表示できます。

注意点：待機時間の単位は「秒」

ここで特に注意したいのは、待機時間の単位が秒であるという点です。Web開発の世界では処理時間をミリ秒単位で扱うことが多いため、うっかり「1000」と入力してしまうと、実際にリダイレクトされるまで約16分以上も待たされることになります。自分やクライアントを長時間待たせないためにも、必ず秒単位で指定しましょう。

content属性の後半部分には、リダイレクト先のURLを記述します。これらの設定はすべて、HTMLページのhead要素内で完結します。

実際のコード例

実際のHTML文書では、次のように記述します。

<html>
<head>
  <meta http-equiv="refresh" content="5; url=https://www.careerkarma.com/blog/html">
  <style>
    body {
      font-family: 'Roboto';
      margin: 20px;
    }
    p {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <p>新しいページへ移動しています。
  <a rel="noreferrer noopener" href="https://www.careerkarma.com/blog/html">https://www.careerkarma.com/blog/html</a></p>
  <p>5秒以内に自動的に切り替わらない場合は、上のリンクをクリックしてください。</p>
</body>
</html>

SEO面での補足

metaタグによるリダイレクトは手軽な反面、検索エンジンの評価を引き継ぐ効果は限定的です。恒久的なサイト移転の場合、SEOを重視するのであればサーバーサイドでの301リダイレクトが推奨されます。あくまで簡易的な転送手段として使い分けるとよいでしょう。

まとめ

.htaccessやPHPなどを使ったサーバーサイドでのリダイレクト設定が難しい環境でも、metaタグを使えば手軽に転送処理を実装できます。静的サイトやレンタルサーバーなど、バックエンドを自由に操作できない場合には、ぜひこの方法を検討してみてください。

  1. HTMLページからリダイレクトする方法を解説！metaタグの使い方

    ページリダイレクトとは？ ページリダイレクトとは、あるURLをクリックしてページXにアクセスしたにもかかわらず、内部的に別のページYへ自動的に転送される仕組みのことです。サイトの移転やURLの変更、メンテナンス中の一時的な誘導など、さまざまな場面で活用されています。 HTMLページでリダイレクトする基本：METAタグを使う HTMLページから別のページへリダイレクトさせるには、<meta>タグを使用します。<head>内に記述したmetaタグのhttp-equiv属性でHTTPヘッダーに相当する値を指定し、content属性で転送までの待機秒数と転送先URLを設定しま

  2. METAタグで実現！訪問者を新しいホームページへ自動リダイレクトする方法

    ページリダイレクトとはページリダイレクトとは、あるURLをクリックしてページXにアクセスしたつもりでも、内部的には別のページYへ誘導されている状態を指します。サイトの移転やドメイン変更、URL構造の見直しなどを行った際に、旧URLへのアクセスを新URLへ自然に案内するために広く使われている仕組みです。METAタグで自動リダイレクトを実現するHTMLページからリダイレクトを行うには、<meta>タグを使用します。http-equiv属性に「refresh」を指定し、content属性の値としてHTTPヘッダー情報を与えます。content属性に設定する値は秒数です。ここで指定した秒数