はじめに
目的
この文書は、WordPressテーマ「Cocoon」を使ってサイトマップを作る方法を分かりやすく説明します。主に訪問者向けのHTMLサイトマップと検索エンジン向けのXMLサイトマップに焦点を当てます。
対象読者
サイト運営を始めた方、見やすいナビゲーションを作りたい方、検索流入を改善したい方に向けています。専門的な前提知識は不要です。
HTMLサイトマップ(訪問者向け)
HTMLサイトマップは人が見るページ一覧です。カテゴリや固定ページ、重要な記事へのリンクをまとめます。例: 「会社案内」「お問い合わせ」「人気記事」などを一目で確認できます。訪問者が目的のページを探しやすくなり、滞在時間の向上にもつながります。
XMLサイトマップ(検索エンジン向け)
XMLサイトマップは機械向けの地図で、検索エンジンにページ情報を伝えます。URLや更新日時を含めるとクローラーが巡回しやすくなり、インデックスされる確率が高まります。サイト構成が大きい場合や更新が多い場合は特に有効です。
本書の流れ
第2章でHTMLサイトマップの作り方、第3章でカスタマイズ、第4章でXMLサイトマップと検索エンジンの関係、第5章でCocoon特有のポイントを説明します。各章で手順や設定例を丁寧に示します。
HTMLサイトマップの作り方
はじめに
Cocoonではショートコード一つでHTMLサイトマップを作成できます。固定ページに短いコードを置くだけで、記事の一覧ページを自動生成します。初心者でも簡単なので順を追って説明します。
手順(簡単3ステップ)
- 固定ページを新規作成します。
- ワードプレス管理画面の「固定ページ」→「新規追加」を開きます。
- タイトルは「サイトマップ」や「記事一覧」にします。
- ショートコードを貼り付けます。
- 本文エリアに[sitemap]と入力します(半角でかっこ含む)。ブロックエディタでもクラシックエディタでも同じです。
- 公開ボタンを押します。
- 表示を確認します。
- 公開したページを開くと、サイト内の記事一覧が自動で並びます。表示されない場合はキャッシュをクリアしてください。
リンクの設置
- メニューに入れる場合は「外観」→「メニュー」で固定ページを追加します。
- フッターやサイドバーに置く場合はウィジェットで固定ページのリンクを設定します。
注意点とちょっとした工夫
- 記事数が多いと長いページになります。見やすくするためにカテゴリ別の見出しを使うと親切です。
- デザインを変えたいときは固定ページにカスタムCSSを当てるか、ページテンプレートを利用してください。
以上でHTMLサイトマップの基本的な作り方は完了です。わからない点があれば、どの部分か教えてください。
HTMLサイトマップのカスタマイズ
表示する投稿タイプを決める
Cocoonの設定画面で、サイトマップに表示する投稿タイプ(投稿・固定ページ・カスタム投稿)を選べます。不要なものは外すと見やすくなります。たとえばブログ記事だけ見せたい場合は固定ページを除外します。
階層と並び順の調整
親子関係を重視するならページの階層表示を有効にします。リストはタイトル順や公開日順に並べ替え可能です。利用者が探しやすい基準で整えましょう。
デザインのカスタマイズ
見出しレベルやリンクのスタイルはCSSで調整します。簡単な例として、折りたたみ式にするには小さなスクリプトやCocoonのウィジェットを使うだけで実現できます。デザインは読みやすさを優先してください。
更新不要の構成にする方法
プラグインを使わずに自動更新に頼らない方法として、固定ページにサイトマップを作り、内部リンク(カテゴリ一覧やタグ一覧、主要ページへのリンク)だけで構成する手があります。新しい記事はそれらの一覧ページに自動で現れるため、サイトマップ自体を頻繁に編集する必要がありません。
実例:簡単な手順
- 固定ページで「サイトマップ」ページを作成する
- Cocoonの設定で表示投稿タイプを調整する
- カテゴリ一覧や重要ページへの内部リンクを貼る
- 必要ならCSSで見た目を整える
上記で、手間を抑えつつ分かりやすいサイトマップが作れます。
XMLサイトマップと検索エンジン
概要
XMLサイトマップは検索エンジン向けの地図です。人向けのHTMLサイトマップと異なり、クロール用の情報(URL、更新日時、優先度など)を機械が読みやすい形式で提供します。Cocoonのサイトでも重要です。
生成方法
- WordPress標準機能:WordPressはデフォルトでsitemap.xmlを生成します。特別な設定なしで使えます。
- プラグイン:YoastやGoogle XML Sitemapsなどで細かく設定できます。投稿タイプや除外設定が簡単です。
- サーバー生成:独自スクリプトやホスティング機能で作ることも可能です。
Search Consoleへの登録と運用
- sitemap.xmlのURL(例:https://example.com/sitemap.xml)を確認します。
- Google Search Consoleの「Sitemaps」画面で送信します。
- 送信後はインデックスカバレッジやエラーを定期的に確認します。
実務上の注意点
- 更新は自動化を推奨します。投稿更新でsitemapも自動更新されるよう設定してください。
- インデックスさせたくないページはnoindexやプラグイン設定で除外します。robots.txtでの参照は便利です(例:Sitemap: https://example.com/sitemap.xml)。
- priorityやchangefreqはあくまでヒントです。検索エンジンが必ず従うわけではありません。
この章は技術的すぎないよう具体例を交えて説明しました。
Cocoon特有のポイント
概要
Cocoonは無料テーマながら、プラグインなしでHTMLサイトマップを作成できます。訪問者向けの一覧を簡単に用意できるので、導線設計に役立ちます。
設定の場所と基本操作
テーマ設定画面の「サイトマップ」項目で表示項目や並び順を切り替えます。設定を保存すると自動でサイトマップが生成されるので、別途プラグインは不要です。プレビューで見た目を確認してから公開してください。
表示のカスタマイズ例
- 表示するコンテンツ:投稿、固定ページ、カテゴリなどを選べます。たとえば固定ページのみ表示して会社概要を見せる使い方が便利です。
- 並び順:新着順や手動での並び替えが可能な場合があります。重要なページを上に置くと訪問者に見つけられやすくなります。
運用時の注意点
サイトを更新したらキャッシュを消すか再生成を確認してください。HTMLサイトマップは訪問者用なので、検索エンジン向けのXMLサイトマップは別に用意すると良いです。
活用のヒント
フッターやメニューにサイトマップへのリンクを置くと見つけやすくなります。またスマホ表示で崩れないかを必ず確認してください。












