HTML の完全ガイド：役割・書き方・SEO/表示速度/セキュリティまで

Webページを「ちゃんとした本番品質」に引き上げるなら、<body> より先に <head> を整えるのが近道です。
<head> は見た目には出ませんが、文字化け・検索結果の見え方・SNSシェアのカード表示・表示速度・セキュリティまで、地味に全部を左右します。

この記事では、<head> の基本から、現場でよく使うタグ、そしてコピペで試せるハンズオンまで、文章多めでまとめます。

1. `<head>` とは何か：ページの「設計図」と「設定置き場」

HTML はざっくりこうです。

<head>：ページのメタ情報（設定、参照、ヒント）
<body>：ユーザーに見せる本体（コンテンツ）

<head> に書くものは次のような分類になります。

基礎設定：文字コード、viewport、タイトル
SEO：description、canonical、robots、構造化データ
SNS：OGP、Twitter Card
表示速度：preconnect、preload、module/preload
UI/体験：favicon、theme-color、manifest
セキュリティ：CSP、referrer-policy など

2. まず覚えるべき最小構成（これだけは毎回入れる）

最初に「最低限の正解」を出します。静的ページでもブログでも、まずはこれがベースです。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ページタイトル | サイト名</title>
  <meta name="description" content="このページの要約を120〜160文字くらいで。検索結果のスニペットになりやすい。">
</head>
<body>
  <!-- content -->
</body>
</html>

それぞれの意味

charset：文字化け防止。先頭に近いほど良い
viewport：スマホ表示の基本。レスポンシブの前提
title：検索結果の青いリンク、タブ名、SNSプレビューでも重要
description：検索結果の説明文に使われることが多い（必須ではないが実務では必須級）

3. `<title>` の実務ルール（SEOとUXのバランス）

<title> は「ページの名前」以上に重要です。

おすすめ指針（だいたい現場で揉めにくい）：

先頭に ページ固有のキーワード
後ろに サイト名（ブランド）
30〜60文字程度を目安（長すぎると省略されることがある）

例：

<title>HTML head完全ガイド：meta/OGP/SEOの正しい書き方 | さいごうの記述メモ</title>

4. `meta name="description"` の書き方（検索結果に効く）

description はランキング要因そのものではないと言われがちですが、**クリック率（CTR）**に直結しやすいので重要です。

コツ：

ページ内容の要約を自然文で
「誰の」「何を」「どう解決する」を1〜2文
重複させない（全ページ同じは避ける）

<meta name="description" content="HTMLの<head>に入れるべきタグを、SEO・OGP・表示速度・セキュリティまで含めて解説。コピペで使えるテンプレとハンズオン付き。">

5. 正規化 URL：`canonical` は「重複」を防ぐ要

同じ内容が複数URLで見えてしまうと、検索エンジン側で評価が分散します。
その対策が canonical。

<link rel="canonical" href="https://example.com/articles/html-head-guide/">

実務で効くケース：

?ref=... などのクエリ違い
www あり/なし混在
末尾スラッシュあり/なし混在
ブログのモバイル別URL（環境による）

6. インデックス制御：`robots`（触る前に意図を言語化）

公開したくないページに使います。

<meta name="robots" content="noindex, nofollow">

よくある用途：

下書き、テスト、検索に出す価値のない管理ページ
重複ページ（ただし canonical で足りることも多い）

注意：

公開ページにうっかり noindex が入る事故が本当に多い
→ 本番前チェック項目に入れるのがおすすめ

7. SNSの見え方：OGP と Twitter Card は“headの仕事”で決まる

SNSでURLを貼ったときのカードは、<head> のメタで決まります。

最低限のOGPセット例：

<meta property="og:title" content="HTML head完全ガイド：役割・SEO・OGP・高速化まで">
<meta property="og:description" content="headに入れるべきタグを網羅。テンプレとハンズオン付き。">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/articles/html-head-guide/">
<meta property="og:image" content="https://example.com/assets/ogp/html-head.png">
<meta property="og:site_name" content="さいごうの記述メモ">

Twitter（X）カード：

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HTML head完全ガイド">
<meta name="twitter:description" content="SEO・OGP・高速化まで。コピペテンプレあり。">
<meta name="twitter:image" content="https://example.com/assets/ogp/html-head.png">

ポイント：

og:image は 絶対URL が安全
画像サイズは「最低でも大きめ」を用意（SNS側でトリミングされる前提）

8. 表示速度を上げる：`preconnect` / `preload` の使い所

8.1 外部ドメインに先に繋ぐ：`preconnect`

Google Fonts や CDN など「外部ドメインに必ず行く」場合に有効。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

8.2 重要リソースを先読み：`preload`

最初に必要なフォントやヒーロー画像など。

<link rel="preload" href="/assets/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>

注意：

むやみに増やすと逆に悪化することがある（本当に“初手で必須”だけ）

9. CSS/JS 読み込みの基本（`head` に置く意味と順番）

CSS

CSSは基本 head でOK。

<link rel="stylesheet" href="/assets/styles.css">

JS

<head> に置くなら defer を使うのが定番。

<script src="/assets/app.js" defer></script>

defer：HTML解析を止めず、DOM構築後に実行（順序も保たれやすい）
async：読み込み完了順に実行（順序が崩れるので用途限定）

10. アイコン周り：favicon / Apple Touch Icon

最低限：

<link rel="icon" href="/favicon.ico">

実務セット（例）：

<link rel="icon" type="image/png" href="/icons/favicon-32.png" sizes="32x32">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" sizes="180x180">

11. PWA/モバイルの見た目：theme-color と manifest

<meta name="theme-color" content="#ffffff">
<link rel="manifest" href="/manifest.webmanifest">

theme-color：モバイルのアドレスバー色などに影響
manifest：PWAの土台（アイコン、表示名など）

12. セキュリティ（入門編）：`referrer-policy` だけでも入れる価値あり

CSPは本格運用で強力ですが、まずは軽く効くものから。

<meta name="referrer" content="strict-origin-when-cross-origin">

これで、外部サイトへ飛ぶときに「どこまで参照元URLを渡すか」を適度に制御できます。

13. 構造化データ：JSON-LD は head に置くのが定番

記事ページの例（最低限の雰囲気）：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "HTML の head 完全ガイド",
  "description": "headに入れるべきタグをSEO・OGP・高速化・セキュリティまで解説。",
  "author": { "@type": "Person", "name": "さいごう" }
}
</script>

実務では datePublished や image なども足して精度を上げます。

ハンズオン：`<head>` を「正しいテンプレ」にして検証する

ここからは手を動かします。コピペでOKです。

Step 1：`index.html` を作る

index.html を作成して、次を貼り付けます（テンプレ完成形）。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>HTML head完全ガイド：meta/OGP/SEOの正しい書き方 | さいごうの記述メモ</title>
  <meta name="description" content="HTMLの<head>に入れるべきタグを、SEO・OGP・表示速度・セキュリティまで含めて解説。テンプレとハンズオン付き。">

  <link rel="canonical" href="https://example.com/html-head/">

  <meta property="og:title" content="HTML head完全ガイド：役割・SEO・OGP・高速化まで">
  <meta property="og:description" content="headに入れるべきタグを網羅。コピペで使えるテンプレとハンズオン付き。">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/html-head/">
  <meta property="og:image" content="https://example.com/assets/ogp/html-head.png">
  <meta property="og:site_name" content="さいごうの記述メモ">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="HTML head完全ガイド">
  <meta name="twitter:description" content="SEO・OGP・高速化まで。コピペテンプレあり。">
  <meta name="twitter:image" content="https://example.com/assets/ogp/html-head.png">

  <meta name="referrer" content="strict-origin-when-cross-origin">

  <link rel="icon" href="/favicon.ico">
  <meta name="theme-color" content="#ffffff">
</head>
<body>
  <h1>HTML head ハンズオン</h1>
  <p>このページは head の練習用です。</p>
</body>
</html>

example.com は自分のドメインに置き換えてください（ローカル検証なら一旦そのままでもOK）

Step 2：ブラウザで “head の結果” を確認する（超重要）

2-1. 表示 → タブ名

ブラウザのタブに title が出ているか

2-2. 右クリック →「ページのソースを表示」

meta charset が先頭付近にあるか
description が入っているか
og:* が入っているか

2-3. DevTools（F12）→ Elements

head の中身が想定通りか
JSフレームワーク等で上書きされていないか（SPAだと事故りがち）

Step 3：よくある失敗をあえて起こして理解する（学習効率が高い）

失敗例1：charset を消す → 文字化けの可能性

<meta charset="utf-8"> を消して、文字（日本語）を増やしてみる
→ 環境次第で化けます。「最初に入れる理由」を体感できます。

失敗例2：viewport を消す → スマホで崩れる

viewport を消してスマホ表示（Chromeのデバイスモード）
→ レスポンシブが前提にならない挙動を体感できます。

失敗例3：description を全ページ同じにする

ブログ運営でありがち。
→ 検索結果の説明文が弱くなり、クリック率が落ちやすいので「ページごとに変える」運用が必要と分かります。

コピペ用：用途別 `<head>` テンプレ（現場で使い分け）

A) 最小（1ページ静的サイト）

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ページタイトル | サイト名</title>
  <meta name="description" content="ページの要約。">
</head>

B) ブログ記事（SEO + OGP込み）

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>記事タイトル | サイト名</title>
  <meta name="description" content="記事の要約。">
  <link rel="canonical" href="https://example.com/path/">

  <meta property="og:title" content="記事タイトル">
  <meta property="og:description" content="記事の要約。">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/path/">
  <meta property="og:image" content="https://example.com/ogp.png">
  <meta property="og:site_name" content="サイト名">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:image" content="https://example.com/ogp.png">
</head>

C) パフォーマンス意識（外部リソースあり）

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>...</title>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <link rel="stylesheet" href="/assets/styles.css">
  <script src="/assets/app.js" defer></script>
</head>

投稿日

2024年5月2日

カテゴリー:

未分類

投稿者:

saigo

タグ:

HTML の完全ガイド：役割・書き方・SEO/表示速度/セキュリティまで

1. `<head>` とは何か：ページの「設計図」と「設定置き場」

2. まず覚えるべき最小構成（これだけは毎回入れる）

それぞれの意味

3. `<title>` の実務ルール（SEOとUXのバランス）

4. `meta name="description"` の書き方（検索結果に効く）

5. 正規化 URL：`canonical` は「重複」を防ぐ要

6. インデックス制御：`robots`（触る前に意図を言語化）

7. SNSの見え方：OGP と Twitter Card は“headの仕事”で決まる

8. 表示速度を上げる：`preconnect` / `preload` の使い所

8.1 外部ドメインに先に繋ぐ：`preconnect`

8.2 重要リソースを先読み：`preload`

9. CSS/JS 読み込みの基本（`head` に置く意味と順番）

CSS

JS

10. アイコン周り：favicon / Apple Touch Icon

11. PWA/モバイルの見た目：theme-color と manifest

12. セキュリティ（入門編）：`referrer-policy` だけでも入れる価値あり

13. 構造化データ：JSON-LD は head に置くのが定番

ハンズオン：`<head>` を「正しいテンプレ」にして検証する

Step 1：`index.html` を作る

Step 2：ブラウザで “head の結果” を確認する（超重要）

2-1. 表示 → タブ名

2-2. 右クリック →「ページのソースを表示」

2-3. DevTools（F12）→ Elements

Step 3：よくある失敗をあえて起こして理解する（学習効率が高い）

失敗例1：charset を消す → 文字化けの可能性

失敗例2：viewport を消す → スマホで崩れる

失敗例3：description を全ページ同じにする

コピペ用：用途別 `<head>` テンプレ（現場で使い分け）

A) 最小（1ページ静的サイト）

B) ブログ記事（SEO + OGP込み）

C) パフォーマンス意識（外部リソースあり）

コメント

コメントを残すコメントをキャンセル

HTML の 完全ガイド：役割・書き方・SEO/表示速度/セキュリティまで

1. <head> とは何か：ページの「設計図」と「設定置き場」

2. まず覚えるべき最小構成（これだけは毎回入れる）

それぞれの意味

3. <title> の実務ルール（SEOとUXのバランス）

4. meta name="description" の書き方（検索結果に効く）

5. 正規化 URL：canonical は「重複」を防ぐ要

6. インデックス制御：robots（触る前に意図を言語化）

7. SNSの見え方：OGP と Twitter Card は“headの仕事”で決まる

8. 表示速度を上げる：preconnect / preload の使い所

8.1 外部ドメインに先に繋ぐ：preconnect

8.2 重要リソースを先読み：preload

9. CSS/JS 読み込みの基本（head に置く意味と順番）

CSS

JS

10. アイコン周り：favicon / Apple Touch Icon

11. PWA/モバイルの見た目：theme-color と manifest

12. セキュリティ（入門編）：referrer-policy だけでも入れる価値あり

13. 構造化データ：JSON-LD は head に置くのが定番

ハンズオン：<head> を「正しいテンプレ」にして検証する

Step 1：index.html を作る

Step 2：ブラウザで “head の結果” を確認する（超重要）

2-1. 表示 → タブ名

2-2. 右クリック →「ページのソースを表示」

2-3. DevTools（F12）→ Elements

Step 3：よくある失敗をあえて起こして理解する（学習効率が高い）

失敗例1：charset を消す → 文字化けの可能性

失敗例2：viewport を消す → スマホで崩れる

失敗例3：description を全ページ同じにする

コピペ用：用途別 <head> テンプレ（現場で使い分け）

A) 最小（1ページ静的サイト）

B) ブログ記事（SEO + OGP込み）

C) パフォーマンス意識（外部リソースあり）

コメント

コメントを残す コメントをキャンセル

HTML の完全ガイド：役割・書き方・SEO/表示速度/セキュリティまで

1. `<head>` とは何か：ページの「設計図」と「設定置き場」

3. `<title>` の実務ルール（SEOとUXのバランス）

4. `meta name="description"` の書き方（検索結果に効く）

5. 正規化 URL：`canonical` は「重複」を防ぐ要

6. インデックス制御：`robots`（触る前に意図を言語化）

8. 表示速度を上げる：`preconnect` / `preload` の使い所

8.1 外部ドメインに先に繋ぐ：`preconnect`

8.2 重要リソースを先読み：`preload`

9. CSS/JS 読み込みの基本（`head` に置く意味と順番）

12. セキュリティ（入門編）：`referrer-policy` だけでも入れる価値あり

ハンズオン：`<head>` を「正しいテンプレ」にして検証する

Step 1：`index.html` を作る

コピペ用：用途別 `<head>` テンプレ（現場で使い分け）

コメントを残すコメントをキャンセル