SEOコーディングとは？ — コードの書き方が検索順位に直結する理由
SEOコーディングとは、検索エンジンがWebページのコンテンツを正確にクロール・インデックスできるようにHTMLを記述する技術です。多くのWeb制作者が「SEO対策＝キーワードを入れること」と誤解していますが、実際にはHTMLの構造そのものが検索エンジンの理解度に大きく影響します。
なぜコードの書き方がSEOに影響するのか。その理由は、Googleのクローラー（Googlebot）の情報処理プロセスにあります。Googlebotはページにアクセスするとき、ブラウザのようにCSSでレンダリングされた「見た目」を評価するのではなく、HTMLのソースコードを構文解析して「文書構造」と「意味」を抽出します。
たとえば、<div class="title">と<h1>は、人間の目にはCSSで同じ見た目にできますが、検索エンジンにとっては意味がまったく異なります。<h1>は「このページの最も重要な見出しである」というセマンティック（意味的）情報を持ちますが、<div>にはそのような情報がありません。GoogleのSEOスターターガイドでも、HTMLの適切な使用がSEOの基本として強調されています。
さらに2026年現在では、SEOコーディングは検索エンジン向けだけでなく、LLMO（AI検索最適化）の観点でも重要になっています。ChatGPTやGeminiなどのAI検索がWebページの情報を取得する際も、HTMLの構造を解析して情報を抽出するため、セマンティックに正しいHTMLはAI検索での引用率向上にもつながるのです。
セマンティックHTMLの実践 — 検索エンジンが「意味」を理解するコード
セマンティックHTMLとは、HTMLタグが持つ「意味」を活用してWebページの構造を記述する手法です。<div>や<span>のような意味を持たないタグの代わりに、<header>、<nav>、<main>、<article>、<section>、<footer>などの意味的なタグを使うことで、検索エンジンに「ページのどこに何があるか」を正確に伝えることができます。
Before/After — div地獄からセマンティックHTMLへ
まず、多くのサイトで見られる「SEO的にNGなコード」と、それを改善した「セマンティックなコード」を比較しましょう。
❌ Before（div地獄 — SEO的にNG）：
<!-- NG例：すべてdivで構成されており、構造の意味が不明 -->
<div class="wrapper">
<div class="header">
<div class="logo">サイト名</div>
<div class="nav">
<div class="nav-item"><a href="/">ホーム</a></div>
<div class="nav-item"><a href="/about">会社概要</a></div>
</div>
</div>
<div class="content">
<div class="title">記事タイトル</div>
<div class="text">本文テキスト...</div>
</div>
<div class="footer">© 2026</div>
</div>✅ After（セマンティックHTML — SEO最適化済み）：
<!-- 改善例：セマンティックタグで構造を明確化 -->
<header>
<a href="/" aria-label="サイトトップへ">
<img src="/logo.webp" alt="サイト名ロゴ" width="180" height="40">
</a>
<nav aria-label="メインナビゲーション">
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about">会社概要</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>記事タイトル</h1>
<p>本文テキスト...</p>
</article>
</main>
<footer>
<p>© 2026</p>
</footer>この2つのコードは、CSSで同じ見た目にすることができます。しかし検索エンジンにとっては、まったく異なる情報を伝えています。Afterのコードでは、<header>で「ここがヘッダーエリアである」、<nav>で「これはナビゲーションである」、<main>で「これがページのメインコンテンツである」、<article>で「これが記事本文である」ということが明確に伝わります。
scale-basics.comでは、サイト構築時にすべてのページをセマンティックHTMLで記述しました。特に<main>タグと<article>タグの適切な使用は、Googlebotがメインコンテンツを正確に特定するために重要です。これにより、クロール効率が向上し、インデックスの精度が高まります。
見出しタグ（h1〜h6）の階層ルール
見出しタグはSEOコーディングの中でも最も基本的かつ重要な要素です。検索エンジンは見出しタグの階層構造を解析して「このページのテーマは何か」「各セクションは何について述べているか」を理解します。
守るべきルールは明確です。h1はページに1つだけ使用し、ページの主題を表す最も重要な見出しにします。h2はh1の下位トピック、h3はh2の下位トピックというように、入れ子構造で階層を正しく保つことが重要です。h2の直下にh4が来るような「レベルの飛び」は、検索エンジンの構造理解を混乱させます。
<!-- ✅ 正しい見出し階層 -->
<h1>SEOに強いコーディングとは？</h1>
<h2>セマンティックHTMLの実践</h2>
<h3>見出しタグの階層ルール</h3>
<h3>セクショニング要素の使い方</h3>
<h2>構造化データの実装</h2>
<h3>JSON-LDの書き方</h3>
<!-- ❌ NGな見出し階層 -->
<h1>SEOに強いコーディングとは？</h1>
<h3>セマンティックHTMLの実践</h3> <!-- h2を飛ばしている -->
<h2>構造化データの実装</h2>
<h2>セマンティックHTMLの続き</h2> <!-- 順序が論理的でない -->実務的なアドバイスとして、h2とh3をメインで使い、必要に応じてh4まで使うのが一般的です。h5やh6は検索エンジンからの評価への影響が小さいため、通常のコンテンツページではほぼ使用しません。
メタタグの最適化 — titleとmeta descriptionの書き方
メタタグは、検索結果ページ（SERP）に直接表示される要素であり、CTR（クリック率）に最も大きな影響を与えるSEOコーディング要素です。
titleタグの最適化ポイント：
<!-- ❌ NG：キーワードが後ろ、長すぎて切れる -->
<title>当社のWeb制作サービスについて｜株式会社〇〇のコーポレートサイト - SEO対策に強いコーディングで高品質なサイトを制作</title>
<!-- ✅ 改善：キーワード前方配置、30〜35文字 -->
<title>SEOに強いコーディングとは？実装テクニックをコード例付きで解説</title>titleタグの最適な文字数は30〜35文字です。これはGoogleの検索結果で省略されずに表示される長さです。また、主要キーワードはタイトルの前方に配置しましょう。ユーザーの視線は左から右に流れるため、キーワードが前にあるほうがクリック率が高まります。
meta descriptionの最適化ポイント：
<!-- ❌ NG：内容が曖昧で行動喚起がない -->
<meta name="description" content="SEOに関する情報をまとめたページです。">
<!-- ✅ 改善：具体的な内容＋行動喚起、120〜160文字 -->
<meta name="description" content="SEOに強いコーディング手法を実例コード付きで解説。セマンティックHTML、構造化データ、ページ速度最適化、JavaScript SEOまで網羅。Before/Afterのコード比較で、今日からすぐに実装できます。">meta descriptionは検索順位に直接は影響しませんが、CTRを大きく左右する重要な要素です。120〜160文字で、ページの内容を具体的に伝え、末尾に行動喚起（「今日から実装できます」「チェックリスト付き」など）を入れるとクリック率が向上します。
画像のSEO最適化 — alt属性とパフォーマンスの両立
画像はWebページの視覚的な魅力を高めますが、検索エンジンは画像の内容を「見る」ことができません。代わりに、alt属性のテキストを読んで画像の内容を理解します。alt属性は画像SEOの基本であると同時に、アクセシビリティの観点からも必須の設定です。
<!-- ❌ NG例 -->
<img src="image1.jpg"> <!-- alt属性なし -->
<img src="chart.png" alt="画像"> <!-- 意味のないalt -->
<img src="seo.png" alt="SEO SEO対策 SEOコーディング SEO方法"> <!-- キーワード詰め込み -->
<!-- ✅ 改善例 -->
<img
src="/images/semantic-html-structure.webp"
alt="セマンティックHTMLの構造を示す図：header、nav、main、article、footerの配置"
width="800"
height="450"
loading="lazy"
decoding="async"
>改善例のポイントを解説します。alt属性には画像の内容を具体的に記述し、キーワードの不自然な詰め込みは避けます。widthとheight属性を指定することで、画像読み込み時のレイアウトシフト（CLS）を防ぎ、Core Web Vitalsのスコア改善につながります。loading="lazy"はファーストビュー外の画像を遅延読み込みし、初期表示速度を向上させます。画像形式はWebPを使うことで、JPEGと比べてファイルサイズを25〜35%削減できます。
内部リンクのコーディング — aタグの書き方でSEO効果が変わる
内部リンクは、サイト内のページ間のリンクジュース（SEO評価）の受け渡しと、検索エンジンのクロール導線を構築する重要なSEO要素です。しかし、aタグの書き方次第で、SEO効果は大きく変わります。
<!-- ❌ NG：アンカーテキストが曖昧 -->
<p>詳しくは<a href="/blog/structured-data-markup/">こちら</a>をご覧ください。</p>
<!-- ✅ 改善：アンカーテキストにリンク先の内容を反映 -->
<p>具体的な実装方法は「<a href="/blog/structured-data-markup/">構造化データマークアップ完全ガイド</a>」で解説しています。</p>
<!-- ❌ NG：JavaScriptでの遷移（クローラーがリンクを認識できない） -->
<div onclick="location.href='/about'">会社概要</div>
<!-- ✅ 改善：標準のaタグを使用 -->
<a href="/about">会社概要</a>最も重要なポイントはアンカーテキストです。「こちら」「詳しくはこちら」のような曖昧なテキストではなく、リンク先ページの内容がわかる具体的なテキストを使いましょう。Googleはアンカーテキストを「リンク先ページの内容を示すシグナル」として利用するため、適切なアンカーテキストはリンク先ページのSEO評価を高めます。
外部リンクの場合は、信頼できるサイトへのリンクにrel="noopener noreferrer"とtarget="_blank"を付与します。ユーザー生成コンテンツや広告リンクにはrel="nofollow"またはrel="sponsored"を追加して、リンクジュースの流出を制御しましょう。
構造化データの実装 — JSON-LDでリッチリザルトを獲得する
構造化データとは、Webページのコンテンツの意味を検索エンジンが機械的に理解できる形式で記述したデータです。JSON-LD（JavaScript Object Notation for Linked Data）形式で<head>タグ内または<body>タグ内に記述するのが、Googleが推奨する実装方法です。
構造化データを正しく実装すると、検索結果にリッチリザルト（FAQ、レビュー星評価、パンくずリストなど）が表示される可能性が高まり、CTRの大幅な向上が期待できます。scale-basics.comでは、全ページにArticleスキーマとBreadcrumbListスキーマを実装し、主要な記事にはFAQPageスキーマも追加しています。
ブログ記事ページ用のArticle + BreadcrumbList構造化データ：
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "SEOに強いコーディングとは？実装テクニックをコード例付きで解説",
"author": {
"@type": "Person",
"name": "著者名",
"url": "https://example.com/author/profile"
},
"publisher": {
"@type": "Organization",
"name": "サイト名",
"logo": {
"@type": "ImageObject",
"url": "https://example.com/logo.png"
}
},
"datePublished": "2026-01-15",
"dateModified": "2026-03-10",
"image": "https://example.com/images/seo-coding.webp",
"description": "SEOに強いコーディング手法をコード例付きで解説"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "ホーム",
"item": "https://example.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "ブログ",
"item": "https://example.com/blog/"
},
{
"@type": "ListItem",
"position": 3,
"name": "SEOコーディング",
"item": "https://example.com/blog/seo-coding/"
}
]
}
</script>構造化データの実装後は、Googleのリッチリザルトテストで必ず検証しましょう。エラーがあるとリッチリザルトが表示されないだけでなく、SEO上のマイナスシグナルになる可能性があります。構造化データの各スキーマタイプの詳細な実装方法は「構造化データマークアップ完全ガイド」で網羅的に解説しています。
ページ速度最適化のコーディングテクニック — Core Web Vitals対応
ページの表示速度は、Googleが公式にランキング要因として明言している数少ない要素の一つです。特にCore Web Vitals（LCP、INP、CLS）の3指標は、2026年現在も検索順位に影響を与え続けています。ここでは、コーディングレベルで実装できる速度最適化テクニックを紹介します。
CSSの最適化
<!-- ❌ NG：すべてのCSSを同期的に読み込み -->
<link rel="stylesheet" href="/css/all-styles.css">
<link rel="stylesheet" href="/css/animations.css">
<link rel="stylesheet" href="/css/print.css">
<!-- ✅ 改善：クリティカルCSSのインライン化 + 非クリティカルCSSの非同期読み込み -->
<style>
/* クリティカルCSS：ファーストビューの表示に必要な最小限のスタイル */
body { font-family: 'Noto Sans JP', sans-serif; margin: 0; }
header { background: #1a365d; color: #fff; padding: 1rem; }
main { max-width: 800px; margin: 0 auto; padding: 2rem 1rem; }
h1 { font-size: 1.75rem; line-height: 1.4; }
</style>
<!-- 非クリティカルCSSは非同期で読み込み -->
<link rel="preload" href="/css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="stylesheet" href="/css/print.css" media="print">クリティカルCSS（ファーストビューの描画に必要なCSS）をHTMLにインライン化することで、外部CSSファイルの読み込みを待たずに初期描画が開始されます。これによりLCP（Largest Contentful Paint）のスコアが大幅に改善します。scale-basics.comでは、この手法でLCPを3.2秒から1.8秒に短縮しました。
JavaScriptの最適化
<!-- ❌ NG：headタグ内での同期的なJS読み込み -->
<head>
<script src="/js/analytics.js"></script>
<script src="/js/main.js"></script>
</head>
<!-- ✅ 改善：defer/asyncの活用 -->
<head>
<!-- 分析用JSは非同期で読み込み（表示をブロックしない） -->
<script src="/js/analytics.js" async></script>
</head>
<body>
<!-- メインJSはDOMの解析完了後に実行 -->
<script src="/js/main.js" defer></script>
</body>defer属性を使うと、HTMLの解析と並行してJSファイルをダウンロードし、解析完了後に実行します。asyncはダウンロード完了次第即座に実行されるため、実行順序が重要でないスクリプト（アナリティクスなど）に適しています。どちらもHTMLの解析をブロックしないため、ページの初期表示速度が向上します。
画像のパフォーマンス最適化
<!-- ✅ レスポンシブ画像の最適な実装 -->
<picture>
<!-- WebP対応ブラウザにはWebPを配信 -->
<source
type="image/webp"
srcset="/images/hero-400w.webp 400w,
/images/hero-800w.webp 800w,
/images/hero-1200w.webp 1200w"
sizes="(max-width: 600px) 100vw, 800px"
>
<!-- フォールバック用のJPEG -->
<img
src="/images/hero-800w.jpg"
alt="SEOコーディングの概念図"
width="800"
height="450"
loading="lazy"
decoding="async"
>
</picture><picture>要素を使うことで、ブラウザの対応状況に応じて最適な画像形式（WebP / JPEG）を自動的に選択させることができます。さらにsrcsetとsizes属性で、画面幅に応じた適切なサイズの画像を配信し、不必要に大きな画像のダウンロードを防ぎます。
JavaScript SEO — SPAとSSR/SSGの選択がSEOを左右する
React、Vue.js、Next.jsなどのJavaScriptフレームワークを使用している場合、JavaScript SEOへの対応は避けて通れません。GooglebotはJavaScriptを実行してレンダリングする能力を持っていますが、いくつかの制限があります。
| レンダリング方式 | SEO評価 | 初期表示速度 | 実装の複雑さ | 適するケース |
|---|---|---|---|---|
| SSG（静的生成） | ◎ 最高 | ◎ 最速 | ○ 中 | ブログ、ドキュメントサイト |
| SSR（サーバーサイドレンダリング） | ◎ 最高 | ○ 良い | △ 高い | ECサイト、動的コンテンツ |
| CSR（クライアントサイドレンダリング） | △ リスクあり | × 遅い | ○ 低い | 管理画面、ログイン後エリア |
SEOを重視するサイトでは、SSG（Static Site Generation）またはSSR（Server Side Rendering）を強く推奨します。CSR（Client Side Rendering）のみのSPA（シングルページアプリケーション）は、Googlebotのレンダリング処理に依存するため、インデックスの遅延や不完全なインデックスのリスクがあります。
scale-basics.comの教材サイトはNext.jsのSSG方式で構築しており、すべてのページがビルド時に静的HTMLとして生成されています。これにより、Googlebotは追加のレンダリング処理なしにコンテンツを即座にクロール・インデックスできます。JavaScriptフレームワークとSEOの関係については、第9章 JavaScript SEOとレンダリングでさらに詳しく解説しています。
SEOコーディング総合チェックリスト
以下のチェックリストで、自サイトのコーディングがSEO要件を満たしているか確認しましょう。
| カテゴリ | チェック項目 | 優先度 |
|---|---|---|
| セマンティックHTML | ☐ header/nav/main/article/footer を使用している | ★★★★★ |
| セマンティックHTML | ☐ h1〜h6の階層がレベル飛びなく正しい | ★★★★★ |
| セマンティックHTML | ☐ h1はページに1つだけ使用 | ★★★★★ |
| メタタグ | ☐ titleが30〜35文字でKW前方配置 | ★★★★★ |
| メタタグ | ☐ meta descriptionが120〜160文字で行動喚起含む | ★★★★☆ |
| メタタグ | ☐ canonicalが正しく設定されている | ★★★★☆ |
| 画像 | ☐ すべての画像にalt属性が設定されている | ★★★★★ |
| 画像 | ☐ width/height属性でCLS対策済み | ★★★★☆ |
| 画像 | ☐ WebP形式を使用している | ★★★☆☆ |
| リンク | ☐ 内部リンクに意味のあるアンカーテキストを使用 | ★★★★☆ |
| 構造化データ | ☐ Article/BreadcrumbListスキーマを実装済み | ★★★★☆ |
| 構造化データ | ☐ リッチリザルトテストでエラー0件 | ★★★★★ |
| パフォーマンス | ☐ JS/CSSにdefer/async/preloadを使用 | ★★★★☆ |
| パフォーマンス | ☐ LCPが2.5秒以内 | ★★★★★ |
| JS SEO | ☐ SSGまたはSSRを採用（CSRのみを避ける） | ★★★★☆ |
まとめ — SEOに強いコーディングは「基礎の積み重ね」
SEOに強いコーディングは、特別なテクニックではなく、Webの標準仕様を正しく使いこなす基礎の積み重ねです。セマンティックHTMLを使い、メタタグを最適化し、構造化データを実装し、ページ速度を改善する。一つひとつは地味な作業ですが、これらが積み重なったときのSEO効果は非常に大きくなります。
まずは上記のチェックリストで現状を確認し、★5つの最優先項目から対応しましょう。HTMLタグの詳しい一覧は「SEO対策に必須のHTMLタグ一覧」で、構造化データの実装ガイドは「構造化データマークアップ完全ガイド」で確認できます。Web制作プロジェクト全体にSEOを組み込む方法は「Web制作にSEOを組み込む方法」で解説しています。
