🏗️ 第 02

サイト構築 & 技術的SEO

技術的な土台 ―― 正しく作る(0 → 1)

📖 7 分で読めます 🕑 更新日 2026-06-18

サイト構築レイヤー（Site Build & Technical SEO）が解決する課題は一つ、検索エンジンがあなたのページをスムーズに発見し、クロールし、理解し、インデックスできるようにすることです。このレイヤーはキーワードリサーチの後、コンテンツ制作の前に位置します。どれだけ正確にリサーチし、どれだけ良いコンテンツを書いても、クローラーが読み取れず、URL がぐちゃぐちゃで、ページが 3 秒経っても真っ白なままなら、ランキングなど望むべくもありません。良いニュースは、このレイヤーがコードを書ける人にとって最も有利な戦場だということです。世の中の大半の「テクニカル SEO 問題」は、本質的に設定ファイル、HTTP ヘッダー、HTML タグ、そしてパフォーマンス最適化に過ぎません。すべてあなたの得意分野です。以下はこのレイヤーの概要です。

ドメインとホスティング（Domain & Hosting）

  • 何か：ドメインはサイトのアイデンティティ（Domain）であり、ホスト/サーバーはページの応答速度と可用性（Hosting）を左右します。
  • なぜ重要か：応答が遅い、頻繁にダウンするといった状態はクロール効率とユーザー体験を直接低下させます。HTTPS は基本的なランキングシグナルです。
  • どうやるか：
    • 短く、覚えやすく、テーマに関連したドメインを選ぶ。新規ドメインには「ドメイン年齢」のボーナスはありませんが、過去の負債もありません。
    • サイト全体で HTTPS を強制し、http:// と www あり/なしを唯一のバージョンへ統一して 301 リダイレクトし、複数のサイトと見なされるのを防ぐ。
    • CDN を備え、ターゲットユーザーに近いデータセンターを持つホストを優先する。最初のバイトまでの時間（TTFB, Time To First Byte）は低いほど良い。

🧑‍💻 開発者視点：curl -I https://あなたのドメイン でレスポンスヘッダーを確認しましょう。ステータスコードが 200 であること、strict-transport-security が付いていること、そして意図しない x-robots-tag: noindex がないことを確認します。

サイトアーキテクチャ（Site Architecture）

  • URL 構造：example.com/seo/technical-seo のように、意味のある、小文字で、ハイフンで単語を区切ったパスを使い、?id=123&cat=7 のようなパラメータの積み重ねを避ける。
  • 階層（Hierarchy）：重要なページはできるだけトップページから 3 クリック以内で到達できるようにする。階層が浅いほど、リンクの評価（権威）の伝達とクロールがスムーズになる。
  • 内部リンクとトピッククラスター（Internal Links & Topic Cluster）：一つの「ピラーページ（Pillar Page）」であるテーマを統括し、それを取り囲む複数の「クラスターページ（Cluster Pages）」が相互にリンクし合うことで、検索エンジンにそのテーマの権威性を伝える。
  • どうやるか：ナビゲーションとパンくずリスト（Breadcrumb）の構造を明確に保ち、内部リンクのアンカーテキスト（Anchor Text）には「ここをクリック」ではなく、説明的なキーワードを使う。

💡 ヒント：サイトを一本の木に見立ててみましょう。トップページは根、カテゴリーは枝、記事は葉です。クローラーは内部リンクをたどって「木を登る」ので、リンク切れは枝が折れているのと同じです。

テクニカル SEO チェックリスト

これがこのレイヤーの核心です。一項目ずつ照らし合わせていきましょう：

項目役割ポイント
robots.txtどのパスをクロールしてよいかをクローラーに伝えるサイトのルートディレクトリに置く。ページを「隠す」用途に使わないこと。これはインデックスを防がない
sitemap.xmlインデックスしてほしい URL を列挙するGoogle Search Console に送信する。インデックス可能なページだけを載せる
canonical重複コンテンツの「本家」を指定する<link rel="canonical" href="..."> で優先する URL を指す
hreflang多言語/多地域バージョンの対応付け<link rel="alternate" hreflang="zh-CN" href="..."> を使い、双方向の参照が必要
構造化データ（Schema）コンテンツの種類を検索エンジンに理解させるJSON-LD を使い、リッチリザルト（Rich Results）を獲得できる
  • モバイルファーストインデックス（Mobile-First Indexing）：Google は主にモバイル版のページを使ってインデックスとランキングを行うため、モバイル端末のコンテンツ・構造化データがデスクトップと一致していることを確認する。
  • Core Web Vitals（コアウェブバイタル）：LCP（最大コンテンツの描画 ≤ 2.5s）、INP（インタラクションから次の描画まで ≤ 200ms）、CLS（累積レイアウトシフト ≤ 0.1）。
  • クロールバジェットと重複コンテンツ（Crawl Budget & Duplicate Content）：canonical、パラメータの処理、適切な内部リンクを使って、クローラーが無意味な重複 URL に割り当てを浪費しないようにする。

robots.txt の最小サンプル（sitemap は絶対アドレスを使う点に注意）：

User-agent: *
Allow: /
Disallow: /admin/
Sitemap: https://example.com/sitemap.xml

記事用の構造化データ（JSON-LD）の骨格：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "技术 SEO 入门",
  "author": { "@type": "Person", "name": "你的名字" },
  "datePublished": "2026-06-18"
}
</script>

🧑‍💻 開発者視点：これらのファイルを手書きしてミスを出さないように。本サイトの robots/sitemap ジェネレーター と Schema ジェネレーター で直接生成し、Google のリッチリザルトテストツールで検証しましょう。

サイト構築ツールの選定（CMS / Framework）

ツールによって SEO への「デフォルトの親切さ」は大きく異なります：

  • WordPress：エコシステムが成熟しており、Yoast/Rank Math などのプラグインが meta、sitemap、Schema をまとめて面倒を見てくれる。欠点は、パフォーマンスをキャッシュや最適化プラグインで補う必要があること。
  • Webflow：ビジュアルでサイトを構築でき、SEO フィールド（title、canonical、hreflang）が初期設定で使える。サーバーに触れたくない人向き。カスタムロジックには制限がある。
  • Next.js：React フレームワークで、SSR/SSG をサポートし、コントロール力が最も高い。ただし next/head、generateMetadata、動的 sitemap ルートを使って SEO を自分で「補完」する必要があり、そうしないと CSR はデフォルトでクローラーに不親切。
  • Astro：コンテンツサイトを狙ったもので、デフォルトで静的 HTML を出力し、余計な JS がゼロ。Core Web Vitals とクロールに自然にフィットし、ブログ/ドキュメント/SEO サイトに特に扱いやすい（本サイトもまさに Astro を使用）。

⚠️ 注意：純粋なクライアントサイドレンダリング（CSR）のシングルページアプリケーションは、ファーストビューの HTML が空の殻になっている可能性があります。静的生成（SSG）またはサーバーサイドレンダリング（SSR）を優先し、クローラーに完全なコンテンツを渡しましょう。

📌 本レイヤーは施工中

完全なチュートリアル（各設定のステップごとの実践とコードサンプルを含む）は執筆中です。お楽しみに。まずは下記の早見チェックリストで基礎を固めましょう：

  • サイト全体で HTTPS を強制し、すべてのドメインの異形を唯一の優先 URL へ 301 する
  • robots.txt と sitemap.xml を生成して送信する（本サイトのジェネレーターが使える）
  • 重要ページに canonical を付け、重複/ページネーションコンテンツの帰属を整理する
  • JSON-LD で記事、パンくずリスト、組織情報に構造化データを付ける
  • Lighthouse を一度実行し、LCP / INP / CLS の 3 項目が基準を満たしているか確認する