ハブページとは？サイトの階層構造とパンくずの作り方を製造業の例で

ハブページとは、1つ⁠のテーマの全体像を説明し、その下にある分類ページや個別の記事へ読者を案内する親ページのことです。サイトの階層構造は、このハブを頂点に「ハブ→カテゴリ→記事⁠」⁠の3段で組むと、読者にもGoogleにも「このサイトは何を、どう分けて書いているか⁠」⁠が伝わります。

階層構造がないサイトでは、何が起きているのか

製造業のサイトでよく見る形から始めます。ある樹脂成形メーカーが、技術コラムを30本ほど書いているとします。すべてが「技術解説」という1つの一覧に、新しい順で並んでいます。

技術解説（一覧）
├ ウェルドラインを目立たなくする方法
├ PCとABSの違い
├ 金型のゲート位置の決め方
├ ヒケの原因と対策
├ インサート成形とは
├ POMの特徴と用途
├ 反りが出る原因
└ …（新しい順に続く）

1本1本の記事は丁寧に書かれていても、この形には2つの問題があります。

1つは、読者が次に読む記事を探せないことです。ヒケの記事を読んだ設計者が、反りについても知りたいと思っても、一覧を新しい順にめくるしかありません。

もう1つは、Googleにとって記事どうしの関係が見えないことです。Googleは、メニューやページ間のリンクといったナビゲーション構造がサイトの構造の認識に影響しうると説明しています（Google が理解しやすい e コマース サイトの構造）⁠。全記事が同じ一覧に同じ重さで並んでいると、「成形不良についてまとまって書いている」ことは、どのページからも伝わりません。

ハブ→カテゴリ→記事に組み直すとこうなる

同じ30本を、「射出成形」というハブの下に4つのカテゴリで振り分けます（図は一部だけ⁠）⁠。

射出成形（ハブ）
├ 材料（カテゴリ）
│  ├ PCとABSの違い
│  ├ POMの特徴と用途
│  └ エンプラとは
├ 成形不良（カテゴリ）
│  ├ ヒケの原因と対策
│  ├ 反りが出る原因
│  └ ウェルドラインを目立たなくする方法
├ 加工（カテゴリ）
│  ├ インサート成形とは
│  └ 超音波溶着の向き不向き
└ 金型（カテゴリ）
   ├ 金型のゲート位置の決め方
   └ 抜き勾配の決め方

記事は1本も書き足していません。置き場所を決めて、親子のリンクを張っただけです。それでも、サイトの形そのものが「射出成形を、材料・不良・加工・金型に分けて書いている⁠」⁠と語るようになります。

振り分けてみると、抜けも見えます。成形不良のカテゴリにヒケと反りとウェルドラインしかなければ、ショートショットやバリがまだ無いことに気づきます。階層は、次に書く記事を決める道具にもなります。

ハブページには何を書けばいいのか

ハブページで一番多い失敗は、カテゴリへのリンクを並べただけの「目次ページ⁠」⁠にしてしまうことです。本文が無いページは、読者にとっても読む理由がありません。

ハブには、テーマ全体について読者が最初に知りたいことを、本文として書きます。射出成形のハブなら、次のような内容です。

• 射出成形とは何か、どんな部品に向いていて、どんな部品に向かないか
• 材料・不良・加工・金型のそれぞれで、設計者が最初に押さえること
• それぞれのカテゴリと、特に読まれている記事へのリンク
• 相談するときに何を用意すればいいか（図面、材料の指定、数量）

それぞれの説明を2〜3段落で書き、詳しくは下のカテゴリや記事へ送る、という形です。このサイトの中小企業・製造業のSEOも、同じ考え方で作っています。

カテゴリページにも本文を持たせる

カテゴリページも、記事の一覧だけで終わらせないほうがいいです。「成形不良⁠」⁠のカテゴリなら、よく出る不良の種類と、見分け方の要点を短く書き、各記事へ案内します。私たちの別のサイトでも、切り口ごとの一覧ページは記事より検索に出にくいという実測がありました（立ち上げ間もない4サイトの実測）⁠。だからこそ、ハブやカテゴリには「そのページだけで答えになる本文⁠」⁠を入れます。

カテゴリはいくつに分ければいいのか

決まった数はありません。目安にしているのは、「読者が迷う単位⁠」⁠で分けることです。

射出成形の相談をする設計者は、「材料を選びたい」「不良を直したい」「後から加工できるか知りたい」「金型の費用を知りたい」のように、困りごとの種類で探します。カテゴリはこの困りごとの単位に合わせます。社内の部署名（成形課、品質保証課⁠）⁠で分けると、読者には意味が伝わりません。

数が多すぎると、1つ⁠のカテゴリに記事が1〜2本しか入らず、分類の意味が薄れます。少なすぎると、1つ⁠のカテゴリに何十本も並んで、元の「技術解説」一覧と変わらなくなります。書く予定の記事まで含めて並べ、中身の少ないカテゴリは隣と合わせ、膨らみすぎたカテゴリは困りごとの単位でもう一度割る。この調整を、記事が増えるたびに見直します。

URLも階層どおりにするべき？

必須ではありません。Googleは「通常、Google が URL の構造からサイトの構造を把握することはありません。⁠」⁠と書いています（Google が理解しやすい e コマース サイトの構造）⁠。構造を伝えるのはリンクです。

それでも、URLもフォルダで分けておくと便利です。管理がしやすく、Search Consoleでカテゴリごとの数字を絞り込めるからです。GoogleもSEO スターター ガイドで、類似のトピックをディレクトリにまとめると、ディレクトリごとのURLが変わる頻度をGoogleが学習しやすくなると説明しています。

/injection-molding/                 ハブ
/injection-molding/defects/         カテゴリ：成形不良
/injection-molding/defects/sink/    記事：ヒケの原因と対策

すでに公開しているページのURLを変える場合は、古いURLから新しいURLへ転送（301リダイレクト⁠）⁠を設定します。転送を忘れると、それまで検索に出ていたページが消えることになります。

パンくずリストとBreadcrumbListの設定

パンくずリストは、記事の上部に「射出成形 > 成形不良 > ヒケの原因と対策」のように、今いる場所を示す短いリンクの列です。下の階層から上の階層へのリンクを、全ページに自動で張る仕組みでもあります。

Googleは、パンくずの情報を構造化データのBreadcrumbListで伝える方法を公開しています（パンくずリスト（BreadcrumbList⁠）⁠のマークアップを追加する方法）⁠。同じページで、パンくずは「URL 構造をそのまま反映させるのではなく、ユーザーが特定のページにたどり着くまでの一般的な経路を示す」ことを勧めています。

ヒケの記事なら、構造化データは次のようになります。

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "射出成形",
      "item": "https://example.com/injection-molding/" },
    { "@type": "ListItem", "position": 2, "name": "成形不良",
      "item": "https://example.com/injection-molding/defects/" },
    { "@type": "ListItem", "position": 3, "name": "ヒケの原因と対策" }
  ]
}

必須の項目は、並び全体を表す itemListElement と、各段の position（1から始まる番号）、name（表示名）、item（そのページのURL）です。最後の段、つまり今いるページは item を省略でき、その場合Googleはそのページ自身のURLを使うと説明しています。

構造化データ全般の考え方は構造化データとは：AI検索と検索結果での役割⁠で扱っています。

上から下、横、下から上。リンクの向きを3つそろえる

階層ができたら、リンクを3つの向きで張ります。

上から下は、ハブからカテゴリ、カテゴリから記事へのリンクです。Googleも、メニューからカテゴリページへ、カテゴリページからその下のページへリンクすることを勧めています。

横は、同じカテゴリや関係の深い記事どうしのリンクです。ヒケの記事から反りの記事へ、ヒケの記事からヒケが出やすい材料の記事へ、という形です。

下から上は、パンくずと、記事の本文からハブやカテゴリへ戻るリンクです。

既存の記事から新しい記事へのリンクは張り忘れやすく、私たちも3回やっています。その話と、アンカーテキストの付け方は内部リンクとアンカーテキストの付け方⁠に書きました。

すでに記事がたくさんある場合の進め方

一から作り直す必要はありません。私たちが既存サイトの整理でとる順番は次のとおりです。

1. 公開済みの記事を一覧に書き出し、それぞれ「どの困りごとの記事か⁠」⁠を1語でメモする
2. メモを見ながらカテゴリを決める。どこにも入らない記事は、そのサイトのテーマから外れている可能性がある
3. ハブとカテゴリのページを、本文付きで作る
4. 各記事にパンくずを付け、記事どうしの横のリンクを足す
5. Search Consoleで、カテゴリごとに表示回数と表示された検索語の数を見ていく

どこにも入らない記事を見つけたら、それが「そのサイトで書くべきか⁠」⁠を考え直す機会です。専門性の考え方はトピカルオーソリティとはで、Googleの公式資料と業界の呼び名を分けて説明しています。ハブの下に置く、2語⁠の検索語を受け止めるページについてはミドルワードとは：受け皿ページの作り方⁠をご覧ください。

サイト全体の骨組みの話は、サイト設計のカテゴリ（階層・内部リンク・専門性）⁠にまとめています。