http-equivとは?meta refreshなどの使い方と注意点を解説

Webサイトを制作していると、HTMLの<head>内で「http-equiv」という属性を見かけることがあります。一見わかりにくいこの属性ですが、リダイレクトや文字コードの指定など、サイトの基本的な挙動を左右する重要な役割を担っています。この記事では、http-equivとは何かという基礎から、meta refreshをはじめとする具体的な使い方、そしてSEOやユーザー体験の観点で押さえておきたい注意点までをわかりやすく解説します。
http-equivは、HTMLのmetaタグに指定できる属性のひとつで、「HTTP equivalent(HTTPと同等)」を意味します。本来はWebサーバーがHTTPレスポンスヘッダーとして送信する情報を、HTML側のmetaタグで擬似的に指定するための仕組みです。サーバーの設定を直接変更できない環境でも、HTMLファイル内に記述することでブラウザに対して特定の指示を出せる点が特徴です。
基本的な記述形式は次のとおりで、http-equivに指示の種類を、contentにその値を指定します。
<meta http-equiv="指示の種類" content="値">
もっとも有名なのがmeta refreshです。指定した秒数が経過した後にページを再読み込みしたり、別のURLへ自動的に移動させたりできます。次の例は、5秒後に指定したページへ遷移する記述です。
<meta http-equiv="refresh" content="5; url=https://example.com/">
content属性の数値が待機秒数で、url=以降に遷移先を記述します。url部分を省略すると、同じページを一定間隔で自動更新する動作になります。
かつては文字コードの指定にhttp-equiv="content-type"が広く使われていました。文字化けを防ぐためにエンコーディングをブラウザへ伝える役割です。
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
ただしHTML5では、よりシンプルな<meta charset="UTF-8">が推奨されており、現在は基本的にこちらを使います。
http-equiv="content-security-policy"を使うと、読み込みを許可するスクリプトや画像の取得元を制限でき、XSS(クロスサイトスクリプティング)などのリスク低減に役立ちます。本来はHTTPヘッダーで設定するのが望ましいですが、サーバー設定を変更できない場合の代替手段として利用されます。
かつてInternet Explorerの表示モードを制御するために使われた指定です。現在IEはサポートが終了しているため、新規サイトで使う必要はほぼありません。
meta refreshが使われる代表的な場面としては、ページ移転を知らせる案内ページ(「○秒後に自動的に移動します」という画面)、一定時間ごとに最新情報を反映したいダッシュボードや掲示板、キャンペーン終了後の旧ページから新ページへの誘導などが挙げられます。サーバー側の設定を触らずにHTMLだけで実装できる手軽さが利点です。
SEOの観点では、ページを恒久的に移転する場合はmeta refreshではなくサーバー側の301リダイレクトを使うのが原則です。301リダイレクトは検索エンジンに「ページが永続的に移動した」と正確に伝え、評価(リンクの評価など)を移転先に引き継ぎやすくなります。meta refreshはこの引き継ぎが不確実で、Googleも基本的にサーバーサイドのリダイレクトを推奨しています。
content="0; url=..."のように待機時間ゼロで即座に別ページへ飛ばす実装は、ユーザーに見せる内容と実際の遷移先が異なる「クローキング」的な手法とみなされるリスクがあります。やむを得ず使う場合でも、こうした即時リダイレクトは避けたほうが安全です。
自動更新や自動遷移は、ユーザーがブラウザの「戻る」ボタンを押しても元のページに戻れなくなるなど、操作を妨げることがあります。また予期しないタイミングでページが切り替わると、読んでいる途中で内容を見失う原因にもなります。WCAG(ウェブアクセシビリティ指針)でも、ユーザーが制御できない自動更新・リダイレクトは避けるか、ユーザーが停止・延長できるようにすることが求められています。
http-equivはあくまでHTTPヘッダーの代替手段です。文字コード指定、セキュリティポリシー、リダイレクトのいずれも、サーバー側で設定できる環境であればそちらを優先するのが望ましいとされています。HTML側の指定はブラウザがHTMLを解析してから適用されるため、ヘッダーでの指定より反映が遅れる場合があるためです。
http-equivは、HTTPレスポンスヘッダーと同等の指示をHTMLのmetaタグから出せる便利な属性で、meta refreshによる自動更新・リダイレクトや文字コード指定などに使われます。ただし、恒久的なページ移転には301リダイレクト、文字コード指定にはmeta charsetといった、より適切な手段が用意されている場面が多くあります。SEOやアクセシビリティへの影響を理解したうえで、HTTPヘッダーで設定できない場合の補助的な手段として、必要な場面に限って活用するのがおすすめです。