タイトル: head要素
SEOタイトル: HTML <head> 要素完全ガイド（title / meta / link / script / SEO 基本）
この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。
<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;background:#fffbea;border:1px solid #f4c430;margin:1em 0;width:100%"><tr><td style="background:#f4c430;color:#000;font-weight:bold;padding:8px">この記事の要点</td></tr><tr><td style="padding:10px"><ul><li><strong><code><head></code></strong> は HTML 文書のメタデータを置く領域。画面には表示されない</li><li><strong>必須</strong>: <code><meta charset="UTF-8"></code>, <code><title></code>, <code><meta name="viewport"></code></li><li><strong>SEO 重要</strong>: <code>title</code> / <code>meta description</code> / <code>canonical</code> / OGP</li><li><strong>外部リソース</strong>: <code><link rel="stylesheet"></code>, <code><script src></code>, ファビコン</li><li><strong>charset は <head> の先頭付近</strong>（最初の 1024 バイト以内）に置く</li><li>モバイル必須: <code><meta name="viewport" content="width=device-width, initial-scale=1"></code></li></ul></td></tr></table>
<h2>head 要素の役割</h2>
<p><code><head></code> は HTML 文書の<strong>メタ情報</strong>を記述する領域です。<strong>画面には表示されない</strong>が、ブラウザ・検索エンジン・SNS シェア・OS（PWA）などが読んで動作する重要な部分です。</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 lang="ja">
<head>
<!-- ★ 文字エンコーディング (最初に書く) -->
<meta charset="UTF-8">
<!-- ★ モバイル対応 viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- ★ ページタイトル -->
<title>サンプルページ | サイト名</title>
<!-- ★ ページ説明 (検索結果スニペット) -->
<meta name="description" content="このページの内容を簡潔に説明します。150 文字程度。">
<!-- 正規 URL -->
<link rel="canonical" href="https://example.com/page">
<!-- CSS 読み込み -->
<link rel="stylesheet" href="/css/main.css">
<!-- ファビコン -->
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- OGP (SNS シェア時のカード) -->
<meta property="og:title" content="サンプルページ">
<meta property="og:description" content="ページの説明">
<meta property="og:image" content="https://example.com/ogp.png">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/page">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<!-- JS 読み込み (defer 推奨) -->
<script defer src="/js/main.js"></script>
</head>
<body>
<!-- 表示内容 -->
</body>
</html></code></pre>
<h2>主要な要素</h2>
<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>要素</th><th>役割</th><th>必須/推奨</th></tr></thead>
<tbody>
<tr><td><code><title></code></td><td>ブラウザタブ / 検索結果 / SNS シェアのタイトル</td><td>★ 必須</td></tr>
<tr><td><code><meta charset></code></td><td>文字エンコーディング (UTF-8 推奨)</td><td>★ 必須</td></tr>
<tr><td><code><meta name="viewport"></code></td><td>モバイル表示倍率制御</td><td>★ ほぼ必須</td></tr>
<tr><td><code><meta name="description"></code></td><td>検索結果スニペット</td><td>SEO 重要</td></tr>
<tr><td><code><meta name="robots"></code></td><td>クロール / index 制御 (noindex, nofollow 等)</td><td>必要時</td></tr>
<tr><td><code><link rel="canonical"></code></td><td>正規 URL 指定 (重複コンテンツ対策)</td><td>SEO 重要</td></tr>
<tr><td><code><link rel="stylesheet"></code></td><td>外部 CSS</td><td>★</td></tr>
<tr><td><code><link rel="icon"></code></td><td>ファビコン</td><td>推奨</td></tr>
<tr><td><code><script></code></td><td>JavaScript</td><td>必要時</td></tr>
<tr><td><code><style></code></td><td>インライン CSS</td><td>必要時</td></tr>
<tr><td><code><base></code></td><td>相対 URL のベース指定</td><td>稀</td></tr>
</tbody>
</table>
<h2>charset の指定</h2>
<p>文字化けを防ぐため、<strong>必ず head の最初の方に</strong>書きます。仕様上は<strong>先頭 1024 バイト以内</strong>に置く必要があります:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- ✅ HTML5 推奨 -->
<meta charset="UTF-8">
<!-- HTML4 / XHTML 形式（互換性のため残されているが古い） -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- どちらも head の冒頭に置く -->
<head>
<meta charset="UTF-8"> <!-- ★ ここ -->
<title>...</title>
...
</head></code></pre>
<h2>viewport: モバイル対応の要</h2>
<p>これを書かないと、スマホで「PC 版が縮小表示される」状態になります:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- ✅ 標準形 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 拡大を無効化したい場合（アクセシビリティ的に非推奨） -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- iPhone のノッチ対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"></code></pre>
<h2>title と description (SEO)</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- title: 30〜35 文字程度（検索結果の表示限度） -->
<title>HTML head 要素の書き方 | webdev チュートリアル</title>
<!-- description: 120 文字程度 -->
<meta name="description"
content="HTML の head 要素に書く meta タグ・link タグ・script タグの基本を、SEO とパフォーマンスの観点から解説します。">
<!-- robots: 検索エンジン制御 -->
<meta name="robots" content="index, follow"> <!-- 既定 -->
<meta name="robots" content="noindex, follow"> <!-- インデックスさせない -->
<meta name="robots" content="noindex, nofollow"> <!-- 完全に無視 -->
<meta name="robots" content="max-image-preview:large"> <!-- 画像プレビュー許可 -->
<!-- canonical: 重複コンテンツの正規 URL を伝える -->
<link rel="canonical" href="https://example.com/article"></code></pre>
<h2>OGP (Open Graph Protocol)</h2>
<p>Facebook / Twitter / Slack / Discord などで URL をシェアした際の「カード」表示を制御します:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- 必須 4 つ -->
<meta property="og:title" content="ページのタイトル">
<meta property="og:type" content="article"> <!-- website / article / video など -->
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/ogp.png"> <!-- 1200x630 推奨 -->
<!-- 推奨 -->
<meta property="og:description" content="ページ説明">
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@your_account">
<meta name="twitter:title" content="ページのタイトル">
<meta name="twitter:description" content="ページ説明">
<meta name="twitter:image" content="https://example.com/ogp.png"></code></pre>
<h2>ファビコン</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- 基本 (32x32 PNG) -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- iOS ホーム画面 -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- PWA / Web Manifest -->
<link rel="manifest" href="/site.webmanifest">
<!-- SVG ファビコン (近代ブラウザ) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- ダーク/ライトで切替 -->
<link rel="icon" href="/favicon-light.svg" media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)"></code></pre>
<h2>CSS と JS の読み込み戦略</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- CSS: head の中で同期読み込み（描画ブロッキング） -->
<link rel="stylesheet" href="/css/main.css">
<!-- CSS の遅延読み込み（重要じゃない CSS） -->
<link rel="preload" as="style" href="/css/extra.css"
onload="this.onload=null;this.rel='stylesheet'">
<!-- JS: 同期（推奨しない、描画ブロック） -->
<script src="/js/main.js"></script>
<!-- ✅ JS: defer（HTML パース後に実行、順序保証） -->
<script defer src="/js/main.js"></script>
<!-- JS: async（取得後すぐ実行、順序非保証） -->
<script async src="/js/analytics.js"></script>
<!-- module 形式（自動 defer） -->
<script type="module" src="/js/app.mjs"></script>
<!-- リソースヒント -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <!-- 早期接続 -->
<link rel="dns-prefetch" href="https://cdn.example.com"> <!-- DNS だけ先解決 -->
<link rel="preload" as="font" href="/fonts/main.woff2" crossorigin> <!-- 早期取得 -->
<link rel="prefetch" href="/next-page.html"> <!-- 次ページ予測取得 --></code></pre>
<h2>言語と方向</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- html 要素に言語指定 (★ 必須、アクセシビリティ・SEO 両面で) -->
<html lang="ja">
<html lang="en">
<html lang="zh-CN">
<!-- アラビア語 / ヘブライ語 (右→左) -->
<html lang="ar" dir="rtl">
<!-- 多言語ページの示し方 (hreflang) -->
<link rel="alternate" hreflang="ja" href="https://example.com/ja/page">
<link rel="alternate" hreflang="en" href="https://example.com/en/page">
<link rel="alternate" hreflang="x-default" href="https://example.com/page"></code></pre>
<h2>テーマカラー / PWA</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- ブラウザ UI の色 (モバイルのアドレスバー) -->
<meta name="theme-color" content="#0d6efd">
<meta name="theme-color" content="#0d6efd" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)">
<!-- iOS ホームスクリーン -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="MyApp">
<!-- Web App Manifest -->
<link rel="manifest" href="/manifest.json"></code></pre>
<h2>head に書いてはいけないもの</h2>
<ul>
<li><code><div></code> や <code><p></code> など「表示要素」 → <code><body></code> へ</li>
<li>大量のインライン JS（描画ブロッキング） → 末尾 / defer / 外部化</li>
<li>大量のインライン CSS（Critical CSS 用途以外） → 外部 CSS へ</li>
<li>ユーザー入力をそのまま埋めた <code>meta</code>（XSS リスク） → 必ずエスケープ</li>
</ul>
<h2>FAQ</h2>
<p><strong>Q: <code>http-equiv="Content-Type"</code> と <code>meta charset</code> はどっちを使う？</strong><br />
A: HTML5 では <strong><code><meta charset="UTF-8"></code></strong> が標準。古い書式は不要です。</p>
<p><strong>Q: meta keywords は今でも書くべき？</strong><br />
A: Google は 2009 年に「keywords は使わない」と明言。<strong>書かなくて OK</strong>。一部の社内検索エンジンが使うことはあります。</p>
<p><strong>Q: title タグの最適な長さは？</strong><br />
A: 検索結果に表示される<strong>30〜35 文字</strong>を目安に。長すぎると後ろが「...」で省略される。サイト名は「| サイト名」「- サイト名」形式で末尾に付けるのが一般的。</p>