テクニカルSEOチェックリスト｜エンジニアが押さえるべき20項目

SEO対策というと「キーワード選定」や「コンテンツの質」が注目されがちですが、サイトの技術的な基盤が整っていなければ、どんなに良いコンテンツも検索エンジンに正しく評価されません。

テクニカルSEOは、検索エンジンのクローラーがサイトを効率的にクロール・インデックスし、ユーザーに快適な体験を提供するための技術的な最適化を指します。本記事では、エンジニアが実装すべき20のチェック項目を、実装コード付きで解説します。

クローラビリティの最適化（項目1〜5）

検索エンジンのクローラーがサイトのページを効率的に発見・巡回できるようにする施策です。

1. robots.txtの適切な設定

robots.txtは、クローラーにクロールの可否を指示するファイルです。サイトのルートに配置します。

# /robots.txt
User-agent: *
Allow: /
Disallow: /admin/
Disallow: /api/
Disallow: /tmp/
Disallow: /*?sort=
Disallow: /*?filter=

# サイトマップの場所を指定
Sitemap: https://example.com/sitemap.xml

重要なポイントは、管理画面やAPIエンドポイントなどクロール不要なURLをDisallowで指定し、パラメータ付きの重複URLも除外することです。また、意図せず重要なページをブロックしていないか定期的に確認しましょう。

2. XMLサイトマップの生成と送信

XMLサイトマップは、サイト内のURL一覧をクローラーに伝えるファイルです。

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com/</loc>
    <lastmod>2026-03-27</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://example.com/blog/article-1</loc>
    <lastmod>2026-03-25</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

Next.jsやAstroなどの主要フレームワークにはサイトマップ生成プラグインがあります。生成されたサイトマップはGoogle Search Consoleに送信し、クロール状況を監視しましょう。

3. 内部リンク構造の最適化

クローラーはリンクを辿ってページを発見します。重要なページへの内部リンクが適切に設定されているか確認しましょう。

・トップページから3クリック以内ですべての重要ページに到達できる構造にする
・パンくずリストを実装し、サイトの階層構造を明示する
・関連記事リンクを設置し、コンテンツ間の関連性を強化する
・孤立ページ（どこからもリンクされていないページ）を解消する

4. URLの正規化（canonicalタグ）

同じコンテンツが複数のURLでアクセスできる場合、canonicalタグで正規URLを指定します。

<!-- 正規URLの指定 -->
<link rel="canonical" href="https://example.com/blog/article-1" />

<!-- Next.jsでのcanonical設定 -->
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  return {
    alternates: {
      canonical: `https://example.com/blog/${params.slug}`,
    },
  };
}

www有無、http/https、末尾スラッシュの有無などによる重複URLは、301リダイレクトとcanonicalタグの両方で対処しましょう。

5. クロールバジェットの最適化

大規模サイトでは、Googlebotが一定時間内にクロールするページ数（クロールバジェット）に限りがあります。低品質なページや重複ページのクロールを抑制し、重要なページにクロールバジェットを集中させましょう。

・パラメータ付きURLをrobots.txtでブロック
・薄いコンテンツのページにnoindex,followを設定
・ファセットナビゲーションで生成される大量のURLを制御
・404ページのリンクを定期的にクリーンアップ

Core Web Vitalsの最適化（項目6〜10）

GoogleはCore Web Vitalsをランキング要因として使用しています。2024年のINP（Interaction to Next Paint）導入により、3つの指標すべてが重要です。

6. LCP（Largest Contentful Paint）の改善

LCPは、ビューポート内の最大のコンテンツ要素が表示されるまでの時間で、目標値は2.5秒以内です。

<!-- LCP要素の読み込みを優先する -->
<img src="/hero-image.webp" alt="メインビジュアル"
     width="1200" height="630"
     fetchpriority="high"
     loading="eager" />

<!-- LCPに関わるフォントのプリロード -->
<link rel="preload" href="/fonts/NotoSansJP-Bold.woff2"
      as="font" type="font/woff2" crossorigin />

<!-- クリティカルCSSのインライン化 -->
<style>
  .hero { /* ファーストビューに必要なスタイルだけ */ }
</style>
<link rel="stylesheet" href="/styles/main.css" media="print"
      onload="this.media='all'" />

LCPの改善ポイントは、サーバーの応答時間短縮、レンダリングブロックリソースの削減、LCP要素の優先読み込みの3つです。

7. INP（Interaction to Next Paint）の改善

INPは、ユーザーの操作（クリック、タップ、キー入力）からブラウザが次のフレームを描画するまでの時間で、目標値は200ms以内です。

// 重い処理をメインスレッドから分離する
// Web Workerの活用例
const worker = new Worker('/worker.js');
worker.postMessage({ type: 'heavyCalculation', data: inputData });
worker.onmessage = (e) => {
  updateUI(e.data.result);
};

// 長いタスクを分割する（yieldToMain pattern）
async function processItems(items) {
  for (const item of items) {
    processItem(item);
    // 定期的にメインスレッドに制御を戻す
    if (navigator.scheduling?.isInputPending()) {
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
}

8. CLS（Cumulative Layout Shift）の改善

CLSは、ページの読み込み中にレイアウトが意図せずずれる量で、目標値は0.1以下です。

<!-- 画像のサイズを明示する -->
<img src="/photo.jpg" alt="写真" width="800" height="600" />

<!-- アスペクト比を維持するCSS -->
<style>
.image-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 広告やiframeの領域を事前に確保 */
.ad-slot {
  min-height: 250px;
}

/* Webフォントの表示制御 */
@font-face {
  font-family: 'NotoSansJP';
  src: url('/fonts/NotoSansJP-Regular.woff2') format('woff2');
  font-display: swap; /* FOUTを許容してCLSを防ぐ */
}
</style>

9. 画像の最適化

画像はページの容量の大部分を占めるため、最適化の効果が大きい項目です。

<!-- レスポンシブ画像とWebP/AVIF対応 -->
<picture>
  <source srcset="/image.avif" type="image/avif" />
  <source srcset="/image.webp" type="image/webp" />
  <img src="/image.jpg" alt="説明テキスト"
       width="800" height="600"
       loading="lazy"
       decoding="async" />
</picture>

<!-- Next.js Imageコンポーネントの活用 -->
import Image from 'next/image';
<Image
  src="/hero.jpg"
  alt="ヒーローイメージ"
  width={1200}
  height={630}
  priority  // LCP要素の場合
  sizes="(max-width: 768px) 100vw, 1200px"
/>

10. JavaScriptの最適化

JavaScriptの読み込みと実行は、ページのパフォーマンスに大きく影響します。

・不要なJavaScriptを削除し、バンドルサイズを削減する
・コード分割（Code Splitting）で初期ロードを軽量化する
・サードパーティスクリプトの遅延読み込みを実装する
・Tree Shakingで使用していないコードをバンドルから除外する

// サードパーティスクリプトの遅延読み込み
// Next.js Scriptコンポーネント
import Script from 'next/script';

<Script
  src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX"
  strategy="afterInteractive"
/>

// ユーザー操作後にチャットウィジェットを読み込む
<Script
  src="https://chat-widget.example.com/widget.js"
  strategy="lazyOnload"
/>

メタデータとOGP（項目11〜14）

検索結果での表示やSNSでのシェア時の見え方を制御するメタデータの設定です。

11. titleタグとmeta descriptionの最適化

titleタグは検索結果のクリック率に直結する最重要メタデータです。

<!-- titleタグのベストプラクティス -->
<title>テクニカルSEOチェックリスト｜エンジニアが押さえるべき20項目 | サイト名</title>

<!-- meta description -->
<meta name="description"
  content="テクニカルSEOの重要チェックポイント20項目をエンジニア向けに解説。クローラビリティ、Core Web Vitals、構造化データの実装方法を、コード付きで紹介します。" />

titleタグは30〜60文字、meta descriptionは80〜120文字を目安にします。各ページでユニークなtitle・descriptionを設定しましょう。

12. OGPタグの設定

OGP（Open Graph Protocol）は、SNSでシェアされた際の表示を制御します。

<meta property="og:title" content="テクニカルSEOチェックリスト" />
<meta property="og:description" content="エンジニアが押さえるべき20項目を解説" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/blog/seo-technical-checklist" />
<meta property="og:image" content="https://example.com/ogp/seo-checklist.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />

<!-- Twitterカード -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@your_account" />

13. hreflangタグ（多言語サイトの場合）

多言語サイトでは、各ページの言語・地域バリエーションをhreflangタグで指定します。

<link rel="alternate" hreflang="ja" href="https://example.com/ja/page" />
<link rel="alternate" hreflang="en" href="https://example.com/en/page" />
<link rel="alternate" hreflang="x-default" href="https://example.com/en/page" />

14. noindex・nofollowの適切な使用

インデックスさせたくないページには、metaタグでnoindexを指定します。

<!-- 検索結果に表示させたくないページ -->
<meta name="robots" content="noindex, follow" />

<!-- 使い分け -->
<!-- noindex, follow：インデックスしないがリンクは辿る -->
<!-- noindex, nofollow：インデックスもリンク巡回もしない -->
<!-- index, nofollow：インデックスするがリンクは辿らない -->

サンクスページ、検索結果ページ、フィルタ付き一覧ページなどがnoindex対象の典型例です。

構造化データの実装（項目15〜17）

構造化データ（Schema.org）は、検索エンジンにコンテンツの意味を明示的に伝えるマークアップです。リッチリザルトの表示につながり、クリック率の向上が期待できます。

15. 記事の構造化データ

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "テクニカルSEOチェックリスト",
  "description": "エンジニアが押さえるべき20項目を解説",
  "image": "https://example.com/images/seo-checklist.jpg",
  "author": {
    "@type": "Person",
    "name": "著者名",
    "url": "https://example.com/author/name"
  },
  "publisher": {
    "@type": "Organization",
    "name": "会社名",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  },
  "datePublished": "2026-03-27",
  "dateModified": "2026-03-27"
}
</script>

16. FAQ構造化データ

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "テクニカルSEOとは何ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "テクニカルSEOは、検索エンジンのクローラーがサイトを効率的にクロール・インデックスするための技術的な最適化施策です。"
      }
    }
  ]
}
</script>

17. パンくずリストの構造化データ

<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チェックリスト"
    }
  ]
}
</script>

構造化データの実装後は、Googleのリッチリザルトテストツールで正しく認識されるか確認しましょう。

インフラとセキュリティ（項目18〜20）

サイトのインフラとセキュリティも、テクニカルSEOの重要な構成要素です。

18. HTTPS化の徹底

HTTPSはGoogleの明確なランキングシグナルです。すべてのページがHTTPSで配信されていることを確認し、HTTPからHTTPSへの301リダイレクトを設定しましょう。混在コンテンツ（HTTPSページ内のHTTPリソース読み込み）もゼロにする必要があります。

19. モバイルフレンドリー対応

Googleはモバイルファーストインデックスを採用しており、モバイル版のコンテンツがインデックスの基準になります。

<!-- ビューポートの設定 -->
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- レスポンシブデザインのCSS -->
<style>
/* タッチターゲットのサイズを確保 */
button, a {
  min-height: 48px;
  min-width: 48px;
}

/* テキストサイズの可読性 */
body {
  font-size: 16px; /* モバイルでの最小推奨サイズ */
  line-height: 1.8;
}
</style>

タップターゲットの間隔が狭すぎないか、テキストが小さすぎないか、横スクロールが発生しないかを確認しましょう。

20. ページの応答速度（TTFB）

サーバーの応答時間（TTFB）は200ms以内が目標です。CDNの活用、サーバーサイドキャッシュの最適化、データベースクエリの効率化などで改善します。

・CDNを導入し、ユーザーに近いエッジサーバーからコンテンツを配信する
・HTTPレスポンスヘッダーのキャッシュ制御を適切に設定する
・Gzip/Brotli圧縮を有効にしてファイル転送量を削減する
・HTTP/2またはHTTP/3を有効にして並列リクエストの効率を向上させる

テクニカルSEO監視の自動化

テクニカルSEOは一度設定して終わりではなく、継続的な監視が必要です。

Google Search Console
インデックス状況、クロールエラー、Core Web Vitals、モバイルユーザビリティの問題を確認できます。週次で確認する習慣をつけましょう。

Lighthouse CI
CI/CDパイプラインにLighthouseを組み込み、デプロイ前にパフォーマンスやSEOスコアをチェックします。

// lighthouserc.js
module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000/', 'http://localhost:3000/blog'],
      numberOfRuns: 3,
    },
    assert: {
      assertions: {
        'categories:performance': ['error', { minScore: 0.9 }],
        'categories:seo': ['error', { minScore: 0.9 }],
        'categories:accessibility': ['warn', { minScore: 0.9 }],
      },
    },
  },
};

定期的なサイト監査
Screaming FrogやAhrefsなどのツールでサイト全体をクロールし、壊れたリンク、リダイレクトチェーン、重複コンテンツなどの問題を定期的に検出・修正しましょう。

まとめ

テクニカルSEOの20項目を整理すると、大きく5つのカテゴリに分類できます。

クローラビリティ：robots.txt、サイトマップ、内部リンク、canonical、クロールバジェット
Core Web Vitals：LCP、INP、CLS、画像最適化、JavaScript最適化
メタデータ：title/description、OGP、hreflang、noindex/nofollow
構造化データ：Article、FAQ、パンくずリスト
インフラ：HTTPS、モバイルフレンドリー、TTFB

すべてを一度に対応する必要はありません。まずはGoogle Search ConsoleとLighthouseで現状を把握し、スコアの低い項目から優先的に対応しましょう。特にCore Web Vitalsとクローラビリティは、検索順位への影響が大きい領域です。

テクニカルSEOの改善は、開発プロセスに組み込むことで継続的に維持できます。コードレビューにSEOチェックを含め、CI/CDにLighthouseを組み込み、チーム全体でSEO品質を守る体制を構築しましょう。