概要
HTMLの <meta> タグは、ページの設定・動作・情報伝達を司る静かな司令塔だ。
「SEOだけのもの」と思っているなら、それは誤解。
本記事では、特にフロントエンド開発者が押さえておくべき 5つの実用的なmeta活用法を紹介する。
対象環境
HTML5準拠の全ブラウザ
1. 文字コード設定（エンコーディング）
<meta charset="UTF-8">
全ページで必ず入れるべき。文字化け回避の基本中の基本。
2. ビューポート制御（モバイル対応）
<meta name="viewport" content="width=device-width, initial-scale=1.0">
スマホやタブレットでの表示崩れを防ぐレスポンシブ設計に必須。
3. 自動リダイレクト（または自動更新）
<meta http-equiv="refresh" content="5; url=https://example.com">
5秒後に別URLへ自動遷移。
カスタムエラーページやメンテナンス通知に便利。
4. キャッシュ制御（古いブラウザ向け）
<meta http-equiv="Cache-Control" content="no-cache">
一部ブラウザではこれで再読み込みを強制できる。
5. SEO用ディスクリプション
<meta name="description" content="このページは〇〇に関する技術的な解説です。">
検索結果の説明文に表示され、クリック率に影響。
結語
<meta> タグは見た目に現れないが、振る舞いと伝達力をコントロールする裏方の王だ。
開発者なら、見えない場所に宿るロジックを疎かにするべきではない。
一行のmetaが、ユーザー体験を左右することもある。