◀ 2.

HTML <head> 要素完全ガイド（title / meta / link / script / SEO 基本）

▶
編集
この記事の要点
  • <head> は HTML 文書のメタデータを置く領域。画面には表示されない
  • 必須: <meta charset="UTF-8">, <title>, <meta name="viewport">
  • SEO 重要: title / meta description / canonical / OGP
  • 外部リソース: <link rel="stylesheet">, <script src>, ファビコン
  • charset は の先頭付近（最初の 1024 バイト以内）に置く
  • モバイル必須: <meta name="viewport" content="width=device-width, initial-scale=1">

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 文字を目安に。長すぎると後ろが「...」で省略される。サイト名は「| サイト名」「- サイト名」形式で末尾に付けるのが一般的。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. html要素
  2. head要素
  3. body要素
  4. title要素
  5. base要素
  6. meta要素
  7. div要素
  8. span要素
  9. header要素
  10. HTML5 footer 要素の使い方（フッター・コピーライト・連絡先）
  11. main要素
  12. address要素
2026-06-11 07:07:02 guest 203

人気ページ

最近更新/作成されたページ