HTMLでページを自動更新する方法｜meta refreshとJavaScriptのコード例

HTMLでページを自動更新するには、<head>内に<meta http-equiv="refresh" content="30">を追加します。数字は秒数で、この例では30秒ごとにページが再読み込みされます。ページの一部だけを更新したいなど細かく制御したい場合はJavaScriptを使います。自分で編集できないページは、自動更新の拡張機能で更新できます。

HTMLでページを自動更新する方法（meta refresh）

<head>にmeta refreshタグを1行入れるだけで、JavaScriptは要りません。

<head>
  <meta http-equiv="refresh" content="30">
  <title>ライブスコア</title>
</head>

MDNのmeta http-equivの解説によると、タイマーはページが完全に読み込まれた時点で始まります。タグはページの一部なので再読み込みのたびに読み込まれ、ページを閉じるまで更新が続きます。contentには更新したい間隔を秒数で指定します。

数秒後に別のページへ移動させる（リダイレクト）

秒数の後ろに;url=と移動先のアドレスを付けます。次のタグは5秒後に新しいページへ移動します。

<meta http-equiv="refresh" content="5;url=https://example.com/new-page">

Google 検索セントラルによると、「Google 検索では、即時の meta refresh リダイレクトは永続的なリダイレクトとして解釈されます」（content="0;url=…"）。数秒待ってから移動する遅延型は、一時的なリダイレクトとして扱われます。ページを恒久的に移転したなら、まずはサーバー側の301リダイレクトを使い、サーバーを変更できない場合にmeta refreshを使いましょう。

JavaScriptでページを自動更新する方法

条件によって更新したいときはJavaScriptを使います。次のコードは30秒ごとに再読み込みしますが、タブが表示されているときだけ実行するので、裏で開いたままのページが読み込みを繰り返すことはありません。

<script>
  const timer = setInterval(() => {
    if (document.visibilityState === 'visible') location.reload();
  }, 30000); // ミリ秒
</script>

JavaScriptの時間はミリ秒なので、30秒は30000です。入力が始まったときなどに更新を止めるにはclearInterval(timer)を呼びます。このコードはページ自身に組み込む必要があります。ブラウザーのコンソールに貼り付けると最初の再読み込みで止まってしまいます。理由とコンソール用のコードは拡張機能なしでChromeのページを自動更新する方法で解説しています。

ちらつかせずにページの一部だけを自動更新する方法

ページ全体を再読み込みすると、一瞬画面が白くなり（ちらつき）、スクロール位置も先頭に戻ります。これを避けるには、変わる部分だけを取得して書き換えます。「内容が変わったらページを自動更新するには？」（英語）という質問に対する定番の方法です。

<div id="scores">読み込み中…</div>
<script>
  async function update() {
    const res = await fetch('/scores.html', { cache: 'no-store' });
    document.getElementById('scores').innerHTML = await res.text();
  }
  update();
  setInterval(update, 30000);
</script>

この方法で読み込むHTMLは、自分のサーバーのものだけにしてください。ライブカメラの静止画など画像だけを更新したい場合は、アドレスに毎回変わる数字を付けて、ブラウザーがキャッシュを使わないようにします。

setInterval(() => {
  const img = document.getElementById('cam');
  img.src = img.src.split('?')[0] + '?t=' + Date.now();
}, 10000);

VS CodeでHTMLを編集しながら自動更新するには

この目的ならmeta refreshは使いません。Ritwick Dey氏による無料のVS Code拡張機能「Live Server」を入れます。Marketplaceの説明によると、ライブリロード機能付きのローカル開発サーバーです。ステータスバーのGo Liveをクリックするか、HTMLファイルを右クリックしてOpen with Live Serverを選ぶと、保存するたびにブラウザーが再読み込みされます。

meta refreshはアクセシビリティやSEOに悪い？

間隔が短いと問題になります。MDNは、更新間隔が短すぎると、スクリーンリーダーなどの支援技術を使う人がページを読み終える前に再読み込みやリダイレクトが起きてしまうと注意しています。入力中のフォームが消えることもあります。「なぜ勝手に更新されるWebサイトがあるのか」（英語）と疑問に思われるのもこのためです。次の点を守りましょう。

• ページの役目を果たせる範囲で、できるだけ長い間隔にする。
• フォームのあるページには自動更新を入れない。
• ダッシュボードやリアルタイムのデータは、ページ全体ではなく一部だけを更新する。
• 移転したページには、遅延型のmeta refreshではなくサーバー側のリダイレクトを使う。

編集できないページはブラウザーで自動更新する

meta refreshタグを追加できるのは自分が管理するページだけです。どんなWebサイトでも一定間隔で更新したい場合は、Chrome・Edge・Firefox向けの無料拡張機能Auto Refresh Pageを使います。Chrome ウェブストアから追加し、ページを開いてアイコンをクリックし、5秒などのプリセットを選んで保存をクリックします。間隔は最短1秒、最長24時間です。

自動更新

日本語 

実行中 

時間間隔

更新リスト

キーワード検出

URL

https://www.example.com/

プリセット 

✓ 5秒

10秒

15秒

5分

10分

15分

カスタム時間を追加 

+ カスタム時間

保存

詳しい手順はChromeで自動更新を使用する方法やChrome・Firefox・EdgeでWebページを自動更新する方法をご覧ください。他人のページに特定の言葉が表示されたら知りたい場合は、キーワード検出機能（プレミアム）が使えます。

まとめ

HTMLでページを自動更新するなら、<head>にmeta refreshタグを1行入れるだけです。細かい制御やちらつきのない更新にはJavaScriptを使いましょう。自分のものではないページを更新したい場合は、Auto Refresh Pageの機能一覧をご覧ください。