SEO入門・実践ガイド｜技術・コンテンツ・E‑E‑A‑Tまで総まとめ

🏁 概要

SEO（Search Engine Optimization）は、検索エンジン経由で「求めているユーザー」に最適なページを届けるための総合施策です。大きく コンテンツ・技術・E‑E‑A‑T（経験・専門性・権威性・信頼性）の3要素で考えます。

コンテンツ
検索意図（インテント）に答える情報設計、明快な見出し、読みやすい構成、独自性。

技術
HTMLの正しさ、内部リンク、構造化データ、CWV（LCP/CLS/INP）、モバイル最適化。

E‑E‑A‑T
著者情報、実績・一次情報の提示、引用元の明示、運営の透明性。

📗 基本（クイックチェックリスト）

1ページ1トピック：<title> と <h1> の主語を一致
わかりやすいURL：/programming/seo/ のように英小文字・ハイフン
メタディスクリプション：120–160字で要点とUSP
画像のalt属性、width/heightでCLS抑制、WebP利用
内部リンク：上位・下位・同列を網羅するハブ&スポーク
外部リンク：出典・引用の明示（rel適切化）
構造化データ：Article / Breadcrumb / FAQ など

🔧 SERPプレビュー & 文字数カウンタ

タイトル（推奨 30–40字）

説明（推奨 120–160字）

sunstripe.main.jp › programming › seo

🧩 基礎（HTMLと技術SEO）

見出し構造とパンくず

<nav aria-label="breadcrumb">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/"><span itemprop="name">HOME</span></a>
      <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/programming/"><span itemprop="name">Programming</span></a>
      <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <span itemprop="name">SEO</span>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>

canonical / alternate / robots

<link rel="canonical" href="https://example.com/programming/seo/">
<!-- 多言語例 -->
<link rel="alternate" href="https://example.com/en/seo/" hreflang="en">
<meta name="robots" content="index, follow">

robots.txt / sitemap.xml（PHP例）

// robots.txt
User-agent: *
Allow: /
Sitemap: https://example.com/sitemap.xml

// sitemap.xml をPHPで生成する簡易例（sitemap.php）
header('Content-Type: application/xml; charset=UTF-8');
$urls = [
  'https://example.com/',
  'https://example.com/programming/seo/'
];
echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n";
echo "<urlset xmlns=\"http://www.sitemaps.org/schemas/sitemap/0.9\">\n";
foreach($urls as $u){
  echo "  <url><loc>".h($u)."</loc><changefreq>weekly</changefreq></url>\n";
}
echo "</urlset>";

画像最適化（CLS抑制 & WebP）

<picture>
  <source type="image/webp" srcset="/img/hero.webp" width="1200" height="630">
  <img src="/img/hero.jpg" alt="ページの主題を説明" width="1200" height="630" loading="lazy" decoding="async">
</picture>

🆕 最新情報（ここ数年の傾向）

Core Web Vitals：主要指標は LCP・CLS・INP。実ユーザー体験の改善が重要。
ヘルプフルなコンテンツ：一次情報・経験（Eの強化）、独自データ、具体例が価値を高める。
構造化データ：パンくずやFAQなど、適切なスキーマの付与で理解を助ける。
情報の鮮度：検索意図によっては更新日・変更履歴を明示。<time>を活用。

🧪 Core Web Vitals ライブ計測（参考）

このページを開いてからの LCP / CLS / INP を簡易表示します（ラボ計測）。

LCP: —

CLS: —

INP: —

🛠 応用（内部リンクとトピック設計）

サイト全体を「ハブ（中心）」と「スポーク（周辺）」で設計し、関連トピックを網羅・深掘りして内部リンクで接続します。

ハブ例：

SEOとは（本ページ）
キーワード調査
技術SEO（速度・構造化）

スポーク例：

LCP改善（画像・Critical CSS）
CLS対策（寸法・フォント表示）
INP改善（JS負荷・入力待ち）

🧰 キーワード密度チェッカー（簡易）

本文を貼り付け

対象キーワード

—

FAQ構造化データ（JSON-LD）

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [{
    "@type": "Question",
    "name": "SEOで最初に取り組むべきことは？",
    "acceptedAnswer": {"@type": "Answer", "text": "タイトルと見出しの一貫性、検索意図の確認、主要ページの内部リンク。"}
  }]
}
</script>

🚀 発展（実装テンプレ&ヒント）

Critical CSS（例）

<link rel="preload" href="/css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/main.css"></noscript>

フォント最適化

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="font" href="/fonts/Inter-Variable.woff2" type="font/woff2" crossorigin>
<style>html{font-display:swap}</style>

fetchpriority / decoding

<img src="/hero.webp" alt="主画像" width="1200" height="630" fetchpriority="high" decoding="async">

リンクの意図表現

<a href="/policy" rel="nofollow">スポンサー表記</a>
<a href="https://example.com" rel="sponsored">広告リンク</a>

🔗 関連リンク

このページの更新情報

最終更新日：2026-01-12

著者・監修：プログラミングラボ