SEO（検索エンジン最適化）の基本
SEO（Search Engine Optimization）は、GoogleなどでWebサイトを上位表示させ、自然検索からのアクセス（オーガニックトラフィック）を増やす施策です。コーディングの知識はSEOと深く結びついています。
HTMLで意識すべきSEOポイント
| 項目 | ポイント |
|---|---|
| 見出しタグ（h1〜h6） | デザイン上のサイズではなく、情報の階層構造に基づいて選択。h1は1ページに原則1つ |
| タイトルタグ・description | 検索結果のクリック率に直結。タイトル約32文字、説明文約120文字で各ページ固有の内容を記述 |
| 画像のalt属性 | クローラーは画像を「見られない」ため、alt="京都 デザイン" のように内容を記述 |
| モバイルフレンドリー | Googleはスマホ版を評価基準とする（モバイルファーストインデックス） |
E-E-A-T（品質評価の指標）
Googleはコンテンツの品質を以下の4軸で評価します。
| 指標 | 意味 |
|---|---|
| Experience（経験） | 筆者の実体験に基づいているか |
| Expertise（専門性） | 内容が専門的で正確か |
| Authoritativeness（権威性） | その分野で認められた存在か |
| Trustworthiness（信頼性） | サイト運営者が明確で、情報の根拠があるか |
Core Web Vitals（コアウェブバイタル）
Googleが定義するページ品質の3指標です。
- 読み込み速度（LCP）：メインコンテンツが表示されるまでの時間
- インタラクティブ性（INP）：ユーザー操作への反応速度
- 視覚的な安定性（CLS）：レイアウトのずれの少なさ
SEOに強いHTML構造 ― セマンティックタグの使い分け
検索エンジンに正しく情報を伝えるためには、セマンティックタグ（意味を持つHTMLタグ）を適切に使うことが不可欠です。これまで <div> で囲っていた部分を、情報の性質に合わせて適切なタグに置き換えることを意識しましょう。
各タグの役割と使い分け
| タグ | 役割 | 使用例 |
|---|---|---|
<header> | ページの最上部（導入部） | サイトロゴ、タイトル、グローバルナビ |
<nav> | ナビゲーション | メニュー項目、ページ内リンクのリスト |
<main> | ページの主要な中身（1ページに1つ） | 記事本文、メインコンテンツ全体 |
<article> | 独立した内容。他サイトに転載されても意味が通じるもの | ブログ記事、ニュース |
<section> | 章・節・項。テーマ性のある情報のまとまり（見出しが必要） | サービス紹介の各セクション |
<aside> | 余談・補足。メインコンテンツとは付随的な情報 | サイドバー、関連記事、広告 |
<footer> | ページの最下部（結び） | コピーライト、連絡先、SNSアイコン |
<div> | 意味を持たない汎用の箱。CSSを当てるためだけに使う | レイアウト調整用ラッパー |
セマンティックHTMLの基本構造（コード例）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル | サイト名</title>
<meta name="description" content="ページの説明文（約120文字）">
</head>
<body>
<header>
<h1>サイト名</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#works">Works</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>記事タイトル</h2>
<section>
<h3>セクション見出し</h3>
<p>コンテンツ本文...</p>
</section>
</article>
<aside>
<p>関連情報・サイドバー</p>
</aside>
</main>
<footer>
<p>© 2026 サイト名</p>
</footer>
</body>
</html>
