この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:6
更新日時:2026-06-11 07:07:02
タイトル: <head>タグに書いた内容が<body>タグに移動する場合の解決方法
SEOタイトル: <head> の内容が <body> に移動する原因と対処（HTML5 パーサのエラー復旧）
| この記事の要点 |
- 原因 No.1:
/ / テキスト / 不正タグ） - 原因 No.2: BOM や謎の空白行が
- 原因 No.3: JSP / Blade / Twig の出力が テンプレタグの位置ミスで head 外へ流れた
- 対処: W3C Markup Validator でチェック、ブラウザの View Source vs DevTools 差を確認
</code> / <code><link></code> / <code><script></code> / <code><style></code> / <code><base></code> / <code><noscript></code> / <code><template></code></strong> のみ</li></ul></td></tr></table>
<h2>現象</h2>
<p>HTML ソースでは <code><head></code> 内に書いたはずの <code><meta></code> / <code><link></code> / <code><script></code> が、ブラウザの DevTools で見ると <code><body></code> 内に移動している現象。Chrome / Firefox / Safari 共通で起きます。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- 書いたソース -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Page
これが原因！
Hello
My Page
これが原因！
Hello
原因: HTML5 パーサのエラー復旧
HTML5 仕様（WHATWG HTML Living Standard）はパースエラー時の挙動を厳密に決めており、 内に不正な要素が現れた瞬間に、その要素と以降の要素はすべて へ移動するルールです。これにより「壊れた HTML でも何かは表示される」性質を担保しています。
に置けるタグ一覧
| タグ | 用途 |
|---|
</code></td><td>タブのタイトル（<strong>必須</strong>）</td></tr>
<tr><td><code><meta></code></td><td>charset / viewport / description / og:* 等</td></tr>
<tr><td><code><link></code></td><td>CSS / favicon / preload / canonical</td></tr>
<tr><td><code><script></code></td><td>外部 / インライン JS</td></tr>
<tr><td><code><style></code></td><td>インライン CSS</td></tr>
<tr><td><code><base></code></td><td>相対 URL の基底</td></tr>
<tr><td><code><noscript></code></td><td>JS 無効時表示（head 内は <code><link></code>/<code><style></code>/<code><meta></code> 限定）</td></tr>
<tr><td><code><template></code></td><td>クライアントテンプレ（head/body 両方可）</td></tr>
</tbody>
</table>
<p>これ以外（<code><div></code> / <code><p></code> / <code><span></code> / <strong>素のテキスト</strong>）を置くと押し出されます。</p>
<h2>原因チェックリスト</h2>
<h3>① タグの誤配置</h3>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- NG パターン -->
<head>
<title>Page
Hello
説明
Title
② BOM や空白行
NG: ファイル先頭に BOM (EF BB BF) や空白行がある
↓
← BOM があると quirks mode に落ちる
対処:
- エディタで「BOM なし UTF-8」で保存し直す
- VS Code: 右下のステータスバーで「UTF-8 with BOM」→「UTF-8」に変更
- PHP:
③ サーバ側テンプレートの出力ミス
// NG: include されたファイルの末尾に空白行があり、それが 内に流れ込む
// NG: BOM 付きファイル
// → output buffer 取って一括出力するか、文字コード変換ツールで一括解消
Laravel Blade の場合:
{{-- NG: @section の外にテキストや HTML を書いている (head に流れ込む可能性) --}}
@extends('layout')
これは body 用テキスト {{-- ← レイアウト次第で 内に出る --}}
@section('content')
Hello
@endsection
{{-- OK: 必ず @section 内で出力 --}}
@extends('layout')
@section('content')
Hello
@endsection
④ の位置
...
...
確認手順
- Chrome DevTools の Sources タブで生 HTML を確認（サーバが何を返したか）
- 同じく Elements タブで実 DOM を確認
- 2 つを diff すると押し出されたタグが特定可能
- 生 HTML の
- W3C Markup Validator に通す
# CLI で W3C 系チェック
npm install -g html-validate
html-validate index.html
# あるいは tidy
sudo apt install tidy
tidy -errors -quiet index.html
対処パターン
| 原因 | 対処 |
|---|
| head 内に div / p / 素テキスト | 削除 or body 側へ移動 |
| BOM 付きファイル | 「BOM なし UTF-8」で保存 |
| テンプレ include の末尾改行 | 末尾の ?> を省略、ob_start 利用 |
| meta charset が遅い | head 開始直後に置く |
| 独自タグ（カスタム要素） | HTML5 でカスタム要素は body 推奨。head に置くとパースエラー |
| コメントタグの誤閉じ | |
FAQ
Q: head に Google Analytics の
|
|
