<head> の使い方と解説

POINT !

<head> 要素のポイント！

<head> の中身はブラウザには表示されず、ページの「設定・指示書」として機能する。文字コード・タイトル・スタイルシート・スクリプトなど、ページのレンダリングや検索エンジンへの情報提供に必要なすべてのメタデータをここに集約する。
<head> 内で最初に記述すべき要素は <meta charset="UTF-8"> と <meta name="viewport" ...> の2つ。文字化け防止とモバイル表示の正常化のため、他のどの要素よりも先に置くことが強く推奨される。
CSSは <head> 内の <link rel="stylesheet"> で読み込み、JavaScript は可能な限り </body> 直前か <script defer> で読み込む。<head> 内にレンダリングをブロックするスクリプトを置くとページ表示が遅延する。
OGP（Open Graph Protocol）タグや構造化データ（JSON-LD）も <head> 内に記述する。SNSシェア時のサムネイルやタイトルの制御、検索結果のリッチスニペット表示などに直結する重要な要素。

概要

<head> 要素は HTML ドキュメントの先頭に置かれる、ページのメタ情報を格納するコンテナです。
<body> に書かれた内容がブラウザに表示されるのに対し、<head> の内容は直接画面に表示されません。

その代わり、ブラウザの動作・レンダリング・SEO・SNS連携などの「裏側の振る舞い」をすべてコントロールする司令塔として機能します。

<head> に配置できる主な要素は以下の通りです。
・<title> ― タブやブックマークに表示されるページタイトル
・<meta> ― 文字コード、viewport、OGP、SEO 情報など
・<link> ― スタイルシートやファビコンの読み込み
・<script> ― JavaScript の読み込みや埋め込み
・<style> ― ページ内 CSS の直接記述
・<base> ― 相対URLの基準パスの設定

HTML5 以前は <head> 内に様々な要素を乱雑に配置することが多く、パフォーマンスやSEOへの影響が無視されがちでした。
現在は記述順序・読み込み最適化・メタ情報の充実がベストプラクティスとして確立されています。

具体的な役割

すべての HTML ページに必須。文字コード・ビューポート・タイトル・スタイルシートを最低限配置し、SEOやSNS連携が必要なページではさらに <meta> タグで情報を補完する。

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

📦 <head> 内に配置できる要素（メタデータコンテンツ）は以下に限られます。

・<title>（必須・1つのみ）
・<meta>（複数可）
・<link>（複数可）
・<script>（複数可）
・<style>（複数可）
・<base>（1つのみ）
・<noscript>（複数可）

<body> で使う <p> や <div> などのフロー要素を <head> 内に置くことはできません。

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

TRADITION (昔)

かつては <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> のような長い構文で文字コードを宣言し、SEOのために <meta name="keywords"> にキーワードを詰め込んでいた。また <script> を <head> 内に書いてレンダリングをブロックするのが一般的だった。

MODERN (今)

HTML5 では <meta charset="UTF-8"> と短く書けるようになった。キーワードメタタグは現在の検索エンジンではほぼ無視される。JavaScript は defer / async 属性付きで読み込むか </body> 直前に配置し、Core Web Vitals を意識したパフォーマンス最適化が標準となっている。

主要な属性

属性名	説明
`HTMLカテゴリ`	なし（ルート要素の一部）
`配置可能な要素`	メタデータコンテンツのみ（title, meta, link, script, style, base, noscript）
`親要素の制限`	<html> 要素の直下にのみ配置可能
`ARIAロール`	なし（非表示要素のため対象外）

利用例

現代的な <head> の基本構成

文字コード・ビューポート・タイトル・CSS読み込み・OGPを網羅した、実務で即使えるテンプレート。

CSS Style

body { font-family: 'JetBrains Mono', monospace; background: #0f172a; color: #e2e8f0; padding: 24px; font-size: 13px; line-height: 1.8; border-radius: 8px; } .label { color: #64748b; font-size: 11px; letter-spacing: 1px; margin-bottom: 12px; } p { color: #94a3b8; margin: 4px 0; }

HTML Structure

<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- 文字コード（最初に記述） -->
  <meta charset="UTF-8">

  <!-- モバイル対応ビューポート -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトルと説明 -->
  <title>記事タイトル | サイト名</title>
  <meta name="description" content="このページの概要を120文字程度で記述します。">

  <!-- ファビコン -->
  <link rel="icon" href="/favicon.ico">

  <!-- OGP（SNSシェア用） -->
  <meta property="og:title" content="記事タイトル">
  <meta property="og:description" content="このページの概要">
  <meta property="og:image" content="https://example.com/ogp.jpg">
  <meta property="og:type" content="article">

  <!-- スタイルシート -->
  <link rel="stylesheet" href="/assets/css/style.css">

  <!-- JS は defer で非同期読み込み -->
  <script src="/assets/js/main.js" defer></script>
</head>

よくある誤用・注意点

<head> 内に表示用のコンテンツ要素を置いたり、文字コード宣言を後ろに書いたりするのはよくある誤り。また <meta name="keywords"> への過信も現在では意味がない。

CSS

HTML (Incorrect)

<!-- ❌ 悪い例 -->
<head>
  <title>サイト名</title>
  <!-- charset が title より後になっている → 文字化けのリスク -->
  <meta charset="UTF-8">

  <!-- body の要素を head に入れている -->
  <p>これは表示されません</p>

  <!-- render-blocking な script を head に置いている -->
  <script src="heavy-library.js"></script>
</head>

<!-- ✅ 良い例 -->
<head>
  <meta charset="UTF-8"><!-- 最初に -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サイト名</title>
  <link rel="stylesheet" href="style.css">
  <script src="heavy-library.js" defer></script><!-- defer で非同期 -->
</head>

リファレンス統計

HTML 要素 14

CSS プロパティ 6

レイアウト・構造

ナビゲーション・リンク

<nav>

メディア・画像

インタラクティブ

メタデータ・スクリプト

<head> 要素