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

HTMLメタタグを使ったページリダイレクトの方法【初心者向け解説】

ページリダイレクトとは、あるURLをクリックしてページXにアクセスしようとしたのに、実際には別のページYへ自動的に転送される仕組みのことです。Webサイトの引っ越しやURL変更の際によく使われる重要なテクニックです。

メタタグでリダイレクトを実現する基本

METAタグを使ってサイトをリダイレクトさせるのは非常に簡単です。http-equiv属性を使用し、content属性の値に対するHTTPヘッダーを指定します。

HTMLメタタグを使ったページリダイレクトの方法【初心者向け解説】

以下は、現在のページから別のページへ2秒後にリダイレクトさせる例です。もし即座にリダイレクトしたい場合は、content属性で待機秒数を指定しなければOKです。

コード例

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Meta Tag</title>
      <meta http-equiv = "refresh" content = "2; url = https://www.tutorialspoint.com" />
   </head>
   <body>
      <p>This is demo text.</p>
   </body>
</html>

ポイント解説

  • http-equiv="refresh": ページを自動更新（リフレッシュ）するようブラウザに指示します。
  • content="2; url=...": 「2」はリダイレクトまでの待機秒数、「url=」の後に転送先のURLを記述します。
  • 即時リダイレクト: 待ち時間なしで転送したい場合は、秒数部分を「0」にするか、url指定のみを行います。

この方法はサーバー側の設定が不要で、HTMLファイルだけで完結するため手軽ですが、SEOの観点では301リダイレクトなどサーバーサイドの設定が推奨される場合もある点に注意しましょう。

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

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

  2. HTMLの<meta>タグとは？メタデータの設定方法と主な属性を解説

    HTMLの<meta>タグとはHTMLの<meta>要素は、ページの説明文（description）、キーワード、文書の作者名などのメタデータ（メタ情報）を記述するために使用します。メタデータはページ上には表示されませんが、検索エンジンやWebブラウザなどがページの内容を理解するために利用されます。<meta>タグは<head>要素内に記述する空要素で、終了タグは不要です。viewportの設定方法また、<meta>タグではviewport（ビューポート）を設定することも可能です。これにより、スマートフォンやタブレットなど、各デバイス