metaタグ -ページ情報を設定する｜HTML辞典
<meta>タグとは？
<meta>タグは、HTML文書のメタデータ（ページ情報）を設定するためのタグです。
文字エンコーディング、ページの説明、キーワード、レスポンシブ対応などを指定し、検索エンジンやブラウザがページを適切に処理するために重要な役割を果たします。
基本情報
コンテンツモデル
メタデータコンテンツ（Metadata Content）
ページの情報を提供し、検索エンジンやブラウザが適切に解釈できるようにする要素を含みます。
閉じタグの有無
<meta>は開始タグのみで閉じタグは不要な「空要素」です。
HTML5では <meta> は 自己閉じタグ（<meta />）を省略可能 ですが、XHTMLでは <meta /> のように記述する必要があります。
基本的な記述方法
<meta>タグは 必ず <head> 内に記述 し、ページのメタ情報を設定します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="このページはHTMLの基本を解説するページです。">
<meta name="keywords" content="HTML, メタタグ, 初心者">
<meta name="author" content="Web制作ガイド">
<title>HTMLの基本</title>
</head>
<body>
<h1>HTMLの基本</h1>
</body>
</html>使用できる主な属性
<meta>タグは、属性を指定することで役割を変えられる のが特徴です。
特に使用頻度の高い属性を以下にまとめました。
| 属性名 | 説明 | 例 |
|---|---|---|
charset | 文字エンコーディングを指定 | <meta charset="UTF-8"> |
name | メタ情報の種類を指定 | <meta name="description" content="サイトの説明"> |
content | name 属性の値を設定 | <meta name="author" content="サイト管理者"> |
http-equiv | HTTPヘッダーの情報を設定 | <meta http-equiv="refresh" content="5"> |
主要なメタタグの用途と記述例
✅ 文字エンコーディングの指定（必須）
文字化けを防ぐため、UTF-8 を指定するのが一般的です。
<meta charset="UTF-8">✅ レスポンシブ対応（スマホ対応）
スマホやタブレットで適切に表示させるための指定。
<meta name="viewport" content="width=device-width, initial-scale=1.0">✅ ページの説明（検索エンジン用）
Googleなどの検索結果に表示されるページの説明文。
<meta name="description" content="HTMLの基本を初心者向けに解説したページです。">検索エンジンが表示する文字数の目安:
- PC：約120文字以内
- スマホ：約50〜80文字以内
✅ ページのキーワード（SEO）
昔は重要だったが、現在はSEO効果が低いため、使用しなくても問題なし。
<meta name="keywords" content="HTML, メタタグ, 初心者">✅ 作成者情報（著者）
<meta name="author" content="Web制作ガイド">✅ リフレッシュ・リダイレクト（ページ遷移）
5秒後に指定したURLへリダイレクト。
<meta http-equiv="refresh" content="5;url=https://example.com">✅ キャッシュの無効化（最新の状態を表示）
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">使用上の注意点
✅ <meta charset="UTF-8"> を必ず指定する
- 指定しないと文字化けの原因になる。
✅ <meta name="description"> の設定はSEOに重要
- ページごとに固有の説明を入れると、検索結果のクリック率が向上する。
✅ <meta name="keywords"> は不要
- かつてはSEOに影響があったが、現在はGoogleが評価しないため、記述しなくても問題ない。
✅ <meta name="viewport"> の設定でスマホ対応を適切に行う
width=device-widthを指定することで、スマホ画面に適したレイアウトが適用される。
関連タグ
まとめ
<meta>タグは、検索エンジンやブラウザにページの情報を伝える重要な要素 です。
特に charset（文字コード）、viewport（レスポンシブ対応）、description（ページ説明）の3つは必須レベル で設定しましょう。
適切に設定することで、SEO対策やユーザビリティ向上につながります。
