HTMLサイトマップ

HTMLサイトマップとは

HTMLサイトマップは、Webサイトの「目次」や「案内図」のようなページです。サイト内のすべての重要なページへのリンクを、わかりやすく整理して表示します。

HTMLサイトマップの役割

HTMLサイトマップの一般的な構成

サイトマップ
├── ホーム
├── 会社情報
│   ├── 会社概要
│   ├── 代表挨拶
│   └── アクセス
├── サービス
│   ├── サービス一覧
│   ├── 料金表
│   └── よくある質問
├── ブログ
│   ├── カテゴリー1
│   ├── カテゴリー2
│   └── カテゴリー3
└── お問い合わせ

HTMLサイトマップが役立つ場面

• サイト検索が使いにくい場合：検索機能がない、または精度が低い
• 階層が深いサイト：通常のナビゲーションで辿りつきにくいページがある
• コンテンツ量が多い：ページ数が50以上あるサイト
• 複雑な構造：カテゴリーや分類が多岐にわたる
• 初めて訪問したユーザー：サイト全体を把握したい訪問者

HTMLサイトマップとXMLサイトマップの違い

HTMLサイトマップの作成方法

方法1：プラグインで自動生成（推奨）

WP Sitemap Pageプラグイン

最も人気のあるHTMLサイトマップ生成プラグインです。

1. プラグインをインストール
   「プラグイン」→「新規追加」で「WP Sitemap Page」を検索してインストール・有効化します。
2. 固定ページを作成
   「固定ページ」→「新規追加」で新しいページを作成します。タイトルは「サイトマップ」など。
3. ショートコードを挿入
   ページ本文に以下のショートコードを記述します：
   [wp_sitemap_page]
4. 公開
   「公開」ボタンをクリックしてページを公開します。
5. 確認
   公開されたページを開いて、サイトマップが正しく表示されるか確認します。

Simple Sitemapプラグイン

シンプルで軽量なHTMLサイトマッププラグインです。

1. インストール・有効化
   「Simple Sitemap」プラグインをインストールして有効化します。
2. ショートコードを使用
   固定ページに以下のいずれかを記述：
   [simple-sitemap] - すべてのコンテンツ
   [simple-sitemap types="page"] - 固定ページのみ
   [simple-sitemap types="post"] - 投稿のみ

方法2：手動で作成

小規模サイトの場合、手動でHTMLサイトマップを作成することもできます。

<h2>サイトマップ</h2>

<h3>固定ページ</h3>
<ul>
    <li><a href="/about/">会社概要</a></li>
    <li><a href="/service/">サービス</a></li>
    <li><a href="/contact/">お問い合わせ</a></li>
</ul>

<h3>ブログ記事（カテゴリー別）</h3>
<h4>WordPress</h4>
<ul>
    <li><a href="/wordpress-tutorial/">WordPressチュートリアル</a></li>
    <li><a href="/wordpress-plugins/">おすすめプラグイン</a></li>
</ul>

<h4>SEO</h4>
<ul>
    <li><a href="/seo-basics/">SEO基礎講座</a></li>
    <li><a href="/keyword-research/">キーワード調査</a></li>
</ul>

方法3：テーマ機能を使用

一部のテーマには、HTMLサイトマップ生成機能が組み込まれています。

• Astra：テーマ設定からサイトマップページを生成
• GeneratePress：Elements機能でカスタマイズ可能
• OceanWP：ページビルダーでサイトマップ作成

HTMLサイトマップのデザイン例

シンプルなリスト形式

階層構造を表現

カード型レイアウト

現代的なデザインで、各セクションをカードとして表示します。

<div class="sitemap-grid">
    <div class="sitemap-card">
        <h3>会社情報</h3>
        <ul>
            <li><a href="/about/">会社概要</a></li>
            <li><a href="/team/">チーム紹介</a></li>
        </ul>
    </div>
    
    <div class="sitemap-card">
        <h3>サービス</h3>
        <ul>
            <li><a href="/service1/">サービス1</a></li>
            <li><a href="/service2/">サービス2</a></li>
        </ul>
    </div>
</div>

HTMLサイトマップの最適化

1. 適切な分類

コンテンツを論理的に分類し、訪問者が理解しやすい構造にします。

2. 不要なページの除外

すべてのページを表示する必要はありません。以下は除外を検討すべきです：

• サンクスページ（お問い合わせ完了など）
• プライバシーポリシー、利用規約（フッターリンクで十分）
• 404エラーページ
• 検索結果ページ
• ログインページ
• 管理者専用ページ

3. 表示順序の最適化

4. 視覚的な工夫

• アイコンの使用：カテゴリーごとにアイコンを付ける
• 色分け：セクションごとに色を変える
• カウント表示：各カテゴリーの記事数を表示
• 階層の視覚化：インデントや罫線で階層を明確に
• ホバー効果：リンクにマウスオーバー時の変化

5. ページ数が多い場合の対策

HTMLサイトマップのSEO効果

直接的なSEO効果

• 内部リンクの強化：すべてのページへのリンクを集約
• クローラビリティ向上：検索エンジンがすべてのページを発見しやすい
• インデックス促進：新しいページのインデックスが早まる
• リンクジュースの分配：重要なページへのリンクを確保

間接的なSEO効果

• 直帰率の低下：訪問者が他のページも見つけやすい
• 滞在時間の増加：興味のあるコンテンツを発見しやすい
• ページビューの増加：より多くのページが閲覧される
• ユーザーエクスペリエンス向上：間接的にSEOに貢献

SEOを意識した設置方法

1. 適切な場所にリンクを配置
   フッターに「サイトマップ」リンクを設置します。
2. わかりやすいURL
   /sitemap/ または /site-map/ のような直感的なURLにします。
3. 適切なメタ情報
   タイトルタグ：「サイトマップ | サイト名」
   メタディスクリプション：「当サイトの全ページ一覧です。」
4. noindexは不要
   HTMLサイトマップはインデックスされても問題ありません。

よくある質問（FAQ）

まとめ

HTMLサイトマップは、訪問者がサイト全体を把握しやすくするための重要なツールです。XMLサイトマップとは異なり、人間が見てわかる形式で、サイトの案内図として機能します。

小規模サイトでも、将来の成長を見越してHTMLサイトマップを設置しておくことをおすすめします。訪問者の利便性が向上し、間接的にSEOにも貢献します。

関連用語