タイトル: head要素
SEOタイトル: HTML <head> 要素完全ガイド（title / meta / link / script / SEO 基本）
| この記事の要点 |
|
head 要素の役割
<head> は HTML 文書のメタ情報を記述する領域です。画面には表示されないが、ブラウザ・検索エンジン・SNS シェア・OS（PWA）などが読んで動作する重要な部分です。
<!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>主要な要素
| 要素 | 役割 | 必須/推奨 |
|---|---|---|
<title> | ブラウザタブ / 検索結果 / SNS シェアのタイトル | ★ 必須 |
<meta charset> | 文字エンコーディング (UTF-8 推奨) | ★ 必須 |
<meta name="viewport"> | モバイル表示倍率制御 | ★ ほぼ必須 |
<meta name="description"> | 検索結果スニペット | SEO 重要 |
<meta name="robots"> | クロール / index 制御 (noindex, nofollow 等) | 必要時 |
<link rel="canonical"> | 正規 URL 指定 (重複コンテンツ対策) | SEO 重要 |
<link rel="stylesheet"> | 外部 CSS | ★ |
<link rel="icon"> | ファビコン | 推奨 |
<script> | JavaScript | 必要時 |
<style> | インライン CSS | 必要時 |
<base> | 相対 URL のベース指定 | 稀 |
charset の指定
文字化けを防ぐため、必ず head の最初の方に書きます。仕様上は先頭 1024 バイト以内に置く必要があります:
<!-- ✅ 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>viewport: モバイル対応の要
これを書かないと、スマホで「PC 版が縮小表示される」状態になります:
<!-- ✅ 標準形 -->
<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">title と description (SEO)
<!-- 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">OGP (Open Graph Protocol)
Facebook / Twitter / Slack / Discord などで URL をシェアした際の「カード」表示を制御します:
<!-- 必須 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">ファビコン
<!-- 基本 (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)">CSS と JS の読み込み戦略
<!-- 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"> <!-- 次ページ予測取得 -->言語と方向
<!-- 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">テーマカラー / PWA
<!-- ブラウザ 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">head に書いてはいけないもの
<div>や<p>など「表示要素」 →<body>へ- 大量のインライン JS（描画ブロッキング） → 末尾 / defer / 外部化
- 大量のインライン CSS（Critical CSS 用途以外） → 外部 CSS へ
- ユーザー入力をそのまま埋めた
meta（XSS リスク） → 必ずエスケープ
FAQ
Q: http-equiv="Content-Type" と meta charset はどっちを使う？
A: HTML5 では <meta charset="UTF-8"> が標準。古い書式は不要です。
Q: meta keywords は今でも書くべき？
A: Google は 2009 年に「keywords は使わない」と明言。書かなくて OK。一部の社内検索エンジンが使うことはあります。
Q: title タグの最適な長さは？
A: 検索結果に表示される30〜35 文字を目安に。長すぎると後ろが「...」で省略される。サイト名は「| サイト名」「- サイト名」形式で末尾に付けるのが一般的。