Day 9: HTMLのベストプラクティス

今日学ぶこと

<head> 内のメタデータ
SEO（検索エンジン最適化）の基本
OGP（Open Graph Protocol）
パフォーマンス最適化
HTMLコーディングのベストプラクティス

`<head>` 内のメタデータ

基本的なメタタグ

<head>
    <!-- 文字エンコーディング（必須、最初に書く） -->
    <meta charset="UTF-8">

    <!-- ビューポート（モバイル対応に必須） -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- ページタイトル -->
    <title>ページタイトル | サイト名</title>

    <!-- ページの説明（検索結果に表示） -->
    <meta name="description" content="このページの簡潔な説明文。150文字程度。">

    <!-- CSSの読み込み -->
    <link rel="stylesheet" href="styles.css">

    <!-- ファビコン -->
    <link rel="icon" href="/favicon.ico">
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>

flowchart TB
    subgraph Head["&lt;head&gt; の主要な要素"]
        Meta["meta charset<br>文字エンコーディング"]
        VP["meta viewport<br>レスポンシブ対応"]
        Title["title<br>ページタイトル"]
        Desc["meta description<br>ページの説明"]
        Link["link<br>CSS, ファビコン"]
    end
    style Meta fill:#ef4444,color:#fff
    style VP fill:#f59e0b,color:#fff
    style Title fill:#22c55e,color:#fff
    style Desc fill:#3b82f6,color:#fff
    style Link fill:#8b5cf6,color:#fff

SEOの基本

タイトルタグの書き方

<!-- ✅ 良い例 -->
<title>HTMLの基本を学ぶ | 初心者向けチュートリアル - My Site</title>

<!-- ❌ 悪い例 -->
<title>My Site</title>
<title>ページ1</title>

ポイント	説明
長さ	30〜60文字程度
キーワード	重要なキーワードを前方に
ユニーク	各ページで異なるタイトル
構造	`内容

見出しの階層構造

<!-- ✅ 正しい階層 -->
<h1>HTMLチュートリアル</h1>
  <h2>基本構造</h2>
    <h3>DOCTYPE宣言</h3>
    <h3>html要素</h3>
  <h2>テキスト要素</h2>
    <h3>見出し</h3>
    <h3>段落</h3>

構造化データ（JSON-LD）

検索結果にリッチスニペットを表示するために使います。

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "HTMLの基本を学ぶ",
    "author": {
        "@type": "Person",
        "name": "田中太郎"
    },
    "datePublished": "2026-01-29"
}
</script>

OGP（Open Graph Protocol）

SNSでシェアしたときの表示を制御するメタタグです。

<!-- OGP基本 -->
<meta property="og:title" content="HTMLの基本を学ぶ">
<meta property="og:description" content="HTML初心者向けの完全ガイド">
<meta property="og:image" content="https://example.com/images/og-html.jpg">
<meta property="og:url" content="https://example.com/html-guide">
<meta property="og:type" content="article">
<meta property="og:site_name" content="My Tech Blog">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HTMLの基本を学ぶ">
<meta name="twitter:description" content="HTML初心者向けの完全ガイド">
<meta name="twitter:image" content="https://example.com/images/og-html.jpg">

flowchart LR
    subgraph OGP["OGPメタタグの効果"]
        Page["Webページ"]
        SNS["📱 SNSでシェア"]
        Card["🖼️ リッチなカード表示<br>タイトル + 説明 + 画像"]
    end
    Page --> SNS --> Card
    style Page fill:#3b82f6,color:#fff
    style SNS fill:#8b5cf6,color:#fff
    style Card fill:#22c55e,color:#fff

パフォーマンス最適化

リソースの読み込み制御

<!-- CSSは<head>内で読み込む -->
<link rel="stylesheet" href="styles.css">

<!-- JavaScriptは defer または async で読み込む -->
<script src="app.js" defer></script>
<script src="analytics.js" async></script>

<!-- リソースのプリロード -->
<link rel="preload" href="hero.webp" as="image">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

<!-- DNSプリフェッチ -->
<link rel="dns-prefetch" href="https://cdn.example.com">

<!-- プリコネクト -->
<link rel="preconnect" href="https://fonts.googleapis.com">

属性/手法	説明
`defer`	HTML解析後にスクリプトを実行
`async`	ダウンロード完了時にスクリプトを実行
`preload`	重要なリソースを早期に読み込む
`dns-prefetch`	DNSを事前に解決
`preconnect`	事前に接続を確立

flowchart LR
    subgraph Scripts["スクリプトの読み込み方式"]
        Normal["通常<br>解析停止→読込→実行"]
        Defer["defer<br>並行読込→解析後実行"]
        Async["async<br>並行読込→即時実行"]
    end
    style Normal fill:#ef4444,color:#fff
    style Defer fill:#22c55e,color:#fff
    style Async fill:#f59e0b,color:#fff

画像の最適化

<!-- 遅延読み込み -->
<img src="photo.jpg" alt="写真" loading="lazy">

<!-- 適切なサイズ指定（CLSを防ぐ） -->
<img src="photo.jpg" alt="写真" width="800" height="600">

<!-- モダンフォーマットの活用 -->
<picture>
    <source srcset="photo.avif" type="image/avif">
    <source srcset="photo.webp" type="image/webp">
    <img src="photo.jpg" alt="写真">
</picture>

HTMLコーディングのベストプラクティス

1. バリッドなHTMLを書く

<!-- ✅ 良い例 -->
<p>テキスト<strong>重要</strong>テキスト</p>

<!-- ❌ 悪い例（タグの閉じ忘れ） -->
<p>テキスト<strong>重要</p></strong>

2. インデントを揃える

<!-- ✅ 良い例 -->
<ul>
    <li>項目1</li>
    <li>項目2</li>
</ul>

<!-- ❌ 悪い例 -->
<ul>
<li>項目1</li>
      <li>項目2</li>
</ul>

3. 属性値はダブルクォートで囲む

<!-- ✅ 良い例 -->
<a href="page.html" class="link">リンク</a>

<!-- ❌ 悪い例 -->
<a href=page.html class=link>リンク</a>

4. 不要な要素を避ける

<!-- ✅ 良い例 -->
<img src="logo.png" alt="ロゴ">

<!-- ❌ 悪い例（不要なdiv） -->
<div>
    <div>
        <img src="logo.png" alt="ロゴ">
    </div>
</div>

5. コメントを適切に使う

<!-- ヘッダーセクション -->
<header>
    ...
</header>

<!-- メインコンテンツ -->
<main>
    ...
</main>
<!-- /メインコンテンツ -->

完全な `<head>` テンプレート

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- 文字エンコーディング -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- SEO -->
    <title>ページタイトル | サイト名</title>
    <meta name="description" content="ページの説明文（150文字程度）">

    <!-- OGP -->
    <meta property="og:title" content="ページタイトル">
    <meta property="og:description" content="ページの説明文">
    <meta property="og:image" content="https://example.com/og-image.jpg">
    <meta property="og:url" content="https://example.com/page">
    <meta property="og:type" content="website">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">

    <!-- ファビコン -->
    <link rel="icon" href="/favicon.ico">
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">

    <!-- パフォーマンス -->
    <link rel="preconnect" href="https://fonts.googleapis.com">

    <!-- CSS -->
    <link rel="stylesheet" href="styles.css">

    <!-- 構造化データ -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "WebPage",
        "name": "ページタイトル"
    }
    </script>
</head>

まとめ

概念	説明
メタデータ	`<head>`内の情報（title, description, OGP）
SEO	検索エンジンに理解されやすいHTML
OGP	SNSシェア時の表示制御
defer / async	スクリプトの効率的な読み込み
preload / preconnect	リソースの事前読み込み
loading="lazy"	画像の遅延読み込み

重要ポイント

titleとdescriptionはSEOの基本
OGPはSNSでのシェアに必須
defer/asyncでJavaScriptの読み込みを最適化
バリッドなHTMLを書く習慣をつける

練習問題

問題1: 基本

完全な<head>セクション（charset, viewport, title, description, favicon）を含むHTMLページを作成してください。

問題2: 応用

OGPタグとTwitter Cardを含むブログ記事ページの<head>を作成してください。

チャレンジ問題

W3C Validatorでバリデーションエラーがゼロになる完全なHTMLページを作成してください。SEO、OGP、アクセシビリティのベストプラクティスをすべて適用しましょう。

参考リンク

次回予告: Day 10では「総合プロジェクト」に取り組みます。これまで学んだすべての知識を使って、ポートフォリオサイトを作成しましょう！