HTMLサイトマップをフッターに設置する方法～Cocoon編～

サイトマップ作るのは難しそう、と思ってませんか？私もそう思っていましたが、作ってみたら意外と簡単にできてしまいました。

そして、Googleアドセンスの審査では、「サイト内をわかりやすくナビゲートできる構成」も重要なチェック項目です。
その中でもHTMLサイトマップ（読者向けサイトマップ）は、記事を一覧で見やすくし、読者が目的のページにすぐアクセスできる便利な機能です。

また、ブログ運営が進むほど記事数が増えて構成が複雑になりがちですが、サイトマップを設置しておけば、検索エンジンにもユーザーにもやさしいブログになります。

今回は、WordPressテーマ「Cocoon」を使って、HTMLサイトマップを固定ページに作成し、フッターに設置する方法を、私が実際にやった手順をもとに、みなさんにシェアします✨

🧩HTMLサイトマップとは？

HTMLサイトマップとは、ブログのすべての記事やカテゴリーを一覧で表示するページのことです。
XMLサイトマップ（検索エンジン用）とは違い、人が見て使いやすいナビゲーションページを指します。

読者の利便性を高めるだけでなく、Googleのクロールがスムーズになる効果も期待できます。

① 固定ページを新規追加する

管理画面のメニューから、固定ページ → 固定ページを追加　をクリックします。

タイトルに「サイトマップ」と入力します。

② ショートコードブロックを追加する

本文入力エリアで「＋」ボタンをクリックし、ブロックを追加します。

検索窓に「ショートコード」と入力。

「ショートコード」ブロックを選択します。

③ コードを入力

ショートコードブロック内に、下のように入力します👇（半角でいれてください）

Cocoonにはこのショートコードが標準で備わっており、
公開するだけで記事一覧が自動生成されます✨

④ スラッグを設定して公開する

右上の設定で、スラッグ（URLの末尾）を半角英数字で入力します。
例：sitemap

あと、検索結果にだす必要がないので、下のSEO設定で「インデックスしない（noindex)」にチェックをいれます。

できたら「公開」ボタンをクリックします。

ここで紹介するサイトマップは、固定ページ、投稿一覧、カテゴリーが表示されます。
固定ページも整えておきましょう。
（私はまだサンプルページがそのままあったので削除しました…）

次に、作成した「サイトマップ」ページをフッターに表示します。

管理画面左メニューで、外観 → メニュー　をクリック

「メニューの編集」画面で「フッターメニュー」を選択し、「選択」をクリック

ここでは、以前にフッターメニューを設定したことがあり、編集する場合の手順を紹介しています。

今まで、メニューを作成したことがない場合、メニュー名を入力からになります。

ほかのメニュー（例えば、グローバルメニューなど）を以前に設定していて、フッターメニューの設定は初めての場合は、「新しいメニューを作成しましょう。」をクリックし、メニュー名を入力します。

画面左側の「固定ページ」タブで「すべて表示」をクリック

先ほど作成した「サイトマップ」にチェックを入れて「メニューに追加」をクリック

フッターに表示したい項目（例：プライバシーポリシー、お問い合わせ、プロフィール）を追加

削除の仕方

プルダウン（▼）して、追加しすぎたものを削除します。

表示したい順にドラッグで並び替える（重要度の高い順が◎）

「メニューを保存」をクリック

ブログの下部（フッター）に「サイトマップ」が表示されていればOKです。
クリックすると、自動で記事一覧ページが開きます。

これで、読者にもGoogleにもやさしいサイト構造が完成です✨

HTMLサイトマップは、読者の回遊性UP＋SEO対策に効果的

Cocoonならショートコード1つで簡単に作成可能

フッターに設置しておくと、審査・利便性の両方に◎