<meta> の使い方と解説

POINT !

<meta> 要素のポイント！

<meta> は閉じタグを持たない「空要素」。name・http-equiv・charset・property の4種類の属性があり、それぞれ用途が異なる。最もよく使うのは name + content の組み合わせ。
<meta charset="UTF-8"> と <meta name="viewport" ...> の2つは、すべてのページで必須。特に charset は <head> 内の最初の要素として記述しないと、それ以前に書かれたコンテンツが文字化けする可能性がある。
OGP（Open Graph Protocol）タグは <meta property="og:〇〇"> の形式で記述し、Twitter/X は <meta name="twitter:〇〇"> を使う。SNSシェア時のカード表示をコントロールするために実務では必須の知識。
<meta name="robots"> でクローラーへのインデックス指示が可能。noindex を指定したページは検索結果に表示されない。検索に載せたくない管理画面・テスト環境・重複コンテンツページに活用する。

概要

① 文字コードの宣言
<meta charset="UTF-8"> で文字エンコーディングを指定します。

② ブラウザへの指示（viewport・theme-color など）
<meta name="viewport"> でレスポンシブ表示のベースを設定します。

③ 検索エンジンへの情報提供
<meta name="description"> は検索結果のスニペットとして表示され、クリック率に影響します。
<meta name="robots"> でクローラーの動作を制御します。

④ SNS シェア用 OGP 設定
<meta property="og:〇〇"> でシェア時のタイトル・画像・説明を指定します。

これら一つの要素が複数の重要な役割を担っており、Web 制作において最も設定の漏れが起きやすい要素のひとつです。

具体的な役割

全ページに charset・viewport を必須配置。公開ページには description と OGP も追加する。管理画面・重複コンテンツには robots: noindex を設定し、不要なインデックスを防ぐ。

ネスト（入れ子）のルール

📦 <meta> は空要素のため、子要素を持ちません。

主な属性の組み合わせパターンは以下の通りです。
・charset 属性：文字エンコーディングを宣言（単独で使う）
・name + content：SEO・viewport などの名前付きメタデータ
・property + content：OGP などのプロパティベースのメタデータ
・http-equiv + content：HTTP レスポンスヘッダーの代替（現在は限定的な用途のみ）

技術の変遷：昔の常識 vs 今の常識

TRADITION (昔)

かつては <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> という長い構文が必要だった。また <meta name="keywords"> に大量のキーワードを詰め込む「キーワードスタッフィング」がSEO施策として行われていた。viewport の概念もなく、PCサイトをそのままスマートフォンで表示していた。

MODERN (今)

charset は <meta charset="UTF-8"> と短く書ける。keywords メタタグは主要検索エンジンでは無視される。viewport の設定はレスポンシブデザインの基盤として必須化。OGP と Twitter Card は SNS 連携の標準手段として定着している。

主要な属性

属性名	説明
`HTMLカテゴリ`	メタデータコンテンツ
`配置可能な要素`	空要素のため子要素なし
`親要素の制限`	基本的に <head> 内。ただし charset 以外は <body> 内でも技術的には記述可能（非推奨）
`ARIAロール`	なし（非表示要素のため対象外）

利用例

実務で使う <meta> タグの全パターン

SEO・OGP・Twitter Card・robots など、実務で頻出の <meta> タグをカテゴリ別にまとめたテンプレート。

CSS Style

body { font-family: sans-serif; font-size: 13px; background: #0f172a; color: #94a3b8; padding: 20px; }

HTML Structure

<head>
  <!-- ① 文字コード（必須・最初に） -->
  <meta charset="UTF-8">

  <!-- ② ブラウザ指示（必須） -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="#1a56db"><!-- スマホのブラウザバー色 -->

  <!-- ③ SEO 情報 -->
  <meta name="description" content="Web制作で使うHTMLとCSSのリファレンス辞典。">
  <meta name="robots" content="index, follow"><!-- 通常ページ -->
  <!-- <meta name="robots" content="noindex"> → 管理画面などに -->

  <!-- ④ OGP（SNSシェア用） -->
  <meta property="og:type" content="website">
  <meta property="og:title" content="WebDictionary">
  <meta property="og:description" content="Web制作リファレンス辞典">
  <meta property="og:image" content="https://example.com/ogp.jpg">
  <meta property="og:url" content="https://example.com/">
  <meta property="og:site_name" content="WebDictionary">

  <!-- ⑤ Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="WebDictionary">
  <meta name="twitter:description" content="Web制作リファレンス辞典">
  <meta name="twitter:image" content="https://example.com/ogp.jpg">
</head>

よくある誤用・注意点

viewport に user-scalable=no を指定したり、charset を <head> の途中に書いたりするのは典型的な誤り。keywords の乱用も現在では意味がない。

CSS

HTML (Incorrect)

<!-- ❌ 悪い例 -->
<!-- charsetが遅い位置にある → 文字化けリスク -->
<head>
  <title>サイト名</title>
  <link rel="stylesheet" href="style.css">
  <meta charset="UTF-8"><!-- 遅すぎる -->

  <!-- 拡大を禁止 → アクセシビリティ違反 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

  <!-- 現代では意味がない -->
  <meta name="keywords" content="HTML,CSS,JavaScript,Web制作,初心者">
</head>

<!-- ✅ 良い例 -->
<head>
  <meta charset="UTF-8"><!-- 最初に -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 拡大を許可 -->
  <title>サイト名</title>
</head>

リファレンス統計

HTML 要素 14

CSS プロパティ 6

レイアウト・構造

ナビゲーション・リンク

<nav>

メディア・画像

インタラクティブ

メタデータ・スクリプト

<meta> 要素