はじめに
本資料の目的
本資料は「サイトマップ ページ」に関する検索意図と記事内容を調査し、初心者から中級者向けに分かりやすくまとめたものです。サイトマップの基本的な定義、HTMLサイトマップとXMLサイトマップの違い、階層構造の設計方法、そしてHTMLサイトマップの作成手順やプラグイン活用までを順を追って解説します。
対象読者
ブログ運営者、企業サイトの担当者、これからサイト設計を学ぶ方を想定しています。専門用語は最小限にして、具体例を交えて説明しますので初めての方でも理解しやすい内容です。
本稿で得られること
- サイトマップがなぜ必要か（ユーザーと検索エンジン双方への案内役）
- HTMLとXMLの違いと使い分けの考え方
- サイトの階層構造をどう設計するかの基本
- 実際にHTMLサイトマップを作る手順や注意点、プラグインの使い方の紹介
読み方の案内
第2章でサイトマップの定義を確認し、第3章で種類を理解してください。第4章で階層構造設計の考え方を学び、第5章で実践的な作成方法に進む流れです。章ごとに具体例と手順を示しますので、実際のサイトにすぐ適用できます。
サイトマップとは
定義
サイトマップは、Webサイト内のページを一覧にまとめたページやファイルです。ユーザーが目的のページを見つけやすくするための「案内図」であり、検索エンジンにもサイト構造を伝える役割を果たします。
ユーザーにとっての利点
- 目的のページへ素早くたどり着けます。たとえば、商品一覧や問い合わせページを探すときに便利です。
- サイト全体の構成が一目で分かり、初めて訪れた人でも利用しやすくなります。
検索エンジンにとっての利点
- サイトの重要なページを見つけやすくなります。特に新しいページや深い階層にあるページの発見に役立ちます。
- クロール（検索エンジンがページを読み取ること）を効率化し、インデックス化の手助けになります。
設置のポイント（簡単な例）
- ヘッダーやフッターに「サイトマップ」へのリンクを置くと見つけやすくなります。
- ページ構成を分かりやすく表示し、更新があればすぐ直すことを心がけてください。
- 人向けのHTMLと検索エンジン向けのXMLがある点を押さえておくと運用が楽になります。
サイトマップの2つの種類
HTMLサイトマップ（訪問ユーザー向け）
HTMLサイトマップは人が見るための一覧ページです。サイト内のページをテキストリンクで並べ、訪問者が目的のページを見つけやすくします。例えば「カテゴリ別」「重要ページ」「新着」などで分けると分かりやすくなります。ユーザーの利便性を高め、アクセスしにくいページを見つけやすくする効果があります。
XMLサイトマップ（検索エンジン向け）
XMLサイトマップは検索エンジン用の機械可読ファイルです。Googleが推奨する形式でURLや最終更新日時、優先度などを記述します。サイトの規模が大きい、動的に更新する、あるいは新しいページが多い場合に特に有効です。作成後はrobots.txtに場所を記載したり、Google Search Consoleに送信したりします。
使い分けと実践例
日常の訪問者向けにはHTMLサイトマップを用意し、クローラーへはXMLサイトマップを提供します。両方を用意するとユーザーにも検索エンジンにも配慮できます。小規模なサイトならHTML中心で問題ありませんが、ページ数が増えたらXMLの導入を検討してください。
よくある注意点
・XMLだけ用意してもユーザーは困ります。HTMLも検討してください。
・XMLは正しい形式で保存し、更新時に反映してください。
サイトマップの階層構造設計
基本方針
サイトマップは「トップ → カテゴリ → 詳細」の三層を基本に設計します。重要なページを上位に置くことで、ユーザーが迷わず目的にたどり着けます。SEOにも好影響です。
階層の具体例
- 第一階層：トップページ（サイト全体の案内）
- 第二階層：カテゴリーページ（製品・サービス別、用途別）
- 第三階層：詳細ページ（個別商品、記事、FAQ）
具体的には、トップから1クリックで行けるページを第二階層とし、そこからさらにクリックが必要なものを第三階層にします。
設計手順（実践）
- 主要なユーザーゴールを洗い出す（例：購入、問い合わせ、情報取得）
- それぞれのゴールに必要なページをリスト化する
- 重要度順に上位へ配置し、1〜2クリックで到達できるようにする
- パンくずやグローバルナビで階層を可視化する
注意点
- 重要ページは深く潜らせない。可能なら2クリック以内に収めます。
- 孤立ページ（オーファンページ）を作らない。すべて適切にリンクします。
- カテゴリが多すぎる場合は、サブカテゴリを整理して横に広がりすぎないようにします。
設計後は実際にユーザー動線を確認し、必要があれば階層を調整してください。
HTMLサイトマップの作成方法
手動で作成する手順
- 全ページのURLを一覧にします。スプレッドシートで管理すると更新が楽です。
- 階層に合わせてHTMLを組みます。基本はul/liとaタグで構成します。
例：
<ul>
<li><a href="/">ホーム</a></li>
<li>サービス
<ul>
<li><a href="/service/a">サービスA</a></li>
<li><a href="/service/b">サービスB</a></li>
</ul>
</li>
<li><a href="/contact">問い合わせ</a></li>
</ul>
- ページに設置し、フッターやヘルプページからリンクします。ユーザーと検索エンジンの両方が見つけやすくなります。
WordPressでの作成方法
- PS Auto Sitemap: プラグインを有効化し、固定ページにショートコード[ps_auto_sitemap]を貼るだけで自動生成します。表示設定はプラグイン画面で調整します。
- WP Sitemap Page: シンプルな一覧を作れます。ショートコードを使って任意の場所に表示可能です。
- All in One SEO: サイトマップ機能にHTML出力がある場合、設定から有効化してページを生成できます。
各プラグインは表示項目や階層の出し方を設定できます。テスト表示でリンク切れや公開設定（非公開ページが表示されないか）を確認してください。
デザインと運用のポイント
- ページタイトルを付けて目的を明確にします（例：「サイトマップ — 全ページ一覧」）。
- 長いサイトはカテゴリごとに分け、折りたたみ機能を検討します。
- アクセシビリティ：リンクには分かりやすいテキストを使い、スクリーンリーダーでも辿れるようにします。
- 更新は定期的に行い、サイト構造が変わったらすぐ反映してください。
