SEOの基本を順番どおりに学べる

独学でブログを育てたい人向けに、用語と手順をやさしく整理しています。

入門ガイドを開く

HTMLサイトマップの作り方|WordPressでプラグインなしでも作れる?読者がページを探しやすくする一覧ページと、当サイトの「全体像」ページ

HTMLサイトマップの作り方|WordPressでプラグインなしでも作れる?読者がページを探しやすくする一覧ページと、当サイトの「全体像」ページについてのアイキャッチ画像 サイト設計と内部対策

サイトマップと聞くと、検索エンジンにページの一覧を伝える「XMLサイトマップ」を思い浮かべる方が多いかもしれません。しかしそれとは別に、読者が直接見て使う「HTMLサイトマップ」というページも存在します。

記事数が増えてくると、カテゴリー一覧だけではすべての記事を把握しづらくなり、読者が目的の情報にたどり着きにくくなることがあります。

この記事では、HTMLサイトマップの役割と、Cocoonテーマでの作り方の基本を、手順とあわせて解説します。当サイトの「全体像」ページ(一覧ページ)も、紹介します。

記事のポイント
  • HTMLサイトマップは、読者がサイト全体の記事を一覧できるようにする、人間向けのページ。
  • 検索エンジン向けのXMLサイトマップとは目的も見た目もまったく異なる。
  • Cocoonテーマには、サイトマップページを自動生成するショートコードが用意されている。
  • 当サイトは、「全体像」ページに、4つのカテゴリごとの記事のリンクを、内部リンク118本で並べ、HTMLサイトマップの役割を持たせている(2026年10月8日)。

HTMLサイトマップとは何か

HTMLサイトマップとは何かを、読者向けの記事一覧ページ・XMLサイトマップとの違いという2つに分けて図解したインフォグラフィックです。
  • 読者向けの記事一覧ページ
  • XMLサイトマップとの違い

読者向けの記事一覧ページ

HTMLサイトマップは、サイト内のすべて(または主要な)記事とページへのリンクを、カテゴリーごとなどに整理して一覧表示する、読者が直接見るためのページです。

「目的の記事がどこにあるか分からない」という読者の悩みを解消し、サイト内を回遊してもらいやすくする役割を持っています。

本の「目次」のようなものだと考えると、イメージしやすくなります。全体の構成が一目で分かるため、初めて訪れた読者にも親切です。

XMLサイトマップとの違い

XMLサイトマップは検索エンジンにページの一覧を伝えるための機械向けファイルであるのに対し、HTMLサイトマップは読者が実際にクリックして使う人間向けのページです。目的も見た目もまったく異なる、別のものとして理解しておきましょう。

両方を用意しておくことで、検索エンジンにも読者にも、サイト全体の構成を伝えやすくなります。

XMLサイトマップは、多くのSEOプラグインで自動的に作られます。HTMLサイトマップは、自分で固定ページとして作る必要がある点が異なります。

CocoonテーマでのHTMLサイトマップの作り方

CocoonテーマでのHTMLサイトマップの作り方を、サイトマップ用のショートコードを使う・メニューやフッターからリンクを設置するという2つに分けて図解したインフォグラフィックです。
  • サイトマップ用のショートコードを使う
  • メニューやフッターからリンクを設置する

サイトマップ用のショートコードを使う

Cocoonテーマには、固定ページにショートコードを貼るだけで、投稿一覧を自動的に表示してくれるサイトマップ機能が用意されています。

固定ページを新規作成し、指定のショートコードを本文に貼り付けるだけで、記事を追加するたびに自動更新される一覧ページが完成します。

ショートコードの名前や書き方は、Cocoonの公式の案内で確認できます。バージョンによって変わる場合があるため、最新の情報を見て設定しましょう。

メニューやフッターからリンクを設置する

作成したサイトマップページは、グローバルメニューやフッターなど、どのページからでもアクセスできる場所にリンクを設置しておきましょう。

存在していても見つけてもらえなければ意味がないため、導線の設計もあわせて意識することが大切です。

フッターにリンクを置く方法は、目立ちすぎず、それでいてどのページからも見つけやすいため、おすすめです。

種類対象・目的
XMLサイトマップ検索エンジンに向けたページ一覧ファイル
HTMLサイトマップ読者に向けた記事一覧ページ

HTMLサイトマップの運用時に気をつけたいこと

HTMLサイトマップの運用時に気をつけたいことを、記事数が多い場合はカテゴリーごとに整理する・定期的にリンク切れがないか確認するという2つに分けて図解したインフォグラフィックです。
  • 記事数が多い場合はカテゴリーごとに整理する
  • 定期的にリンク切れがないか確認する

記事数が多い場合はカテゴリーごとに整理する

記事数がまだ少ないうちは単純な一覧でも問題ありませんが、増えてきたらカテゴリーごとに見出しを分けるなど、見やすさを意識した整理を行いましょう。

情報量が多いページこそ、構成の工夫が読者の使いやすさを左右します。

カテゴリーごとに分けると、読者は自分の探しているテーマの部分だけを、すぐに見つけられます。

定期的にリンク切れがないか確認する

記事を削除・統合した際に、サイトマップページ内のリンクが古いままになっていないか、定期的に確認する習慣も持っておきましょう。

自動生成タイプのショートコードを使っていれば、多くの場合この心配は少なくて済みます。

手作業でリンクを並べている場合は、特に注意が必要です。記事を変更したときに、サイトマップの見直しも、あわせて行いましょう。

ナナ
ナナ

サイトマップって2種類あったんだね、知らなかった…

リク
リク

うん、名前は似てるけど役割は全然違うんだよね。両方用意しておくと、検索エンジンにも読者にも親切なサイトになるよ。

HTMLサイトマップを作る手順

作り方は、次の順番で進めます。画面の名称は、WordPressやテーマの更新によって変わる場合があります。

  1. 管理画面で、固定ページを新規作成する
  2. タイトルを「サイトマップ」など、分かりやすい名前にする
  3. 本文に、サイトマップ用のショートコードを貼り付ける
  4. 公開して、実際に一覧が表示されるか確認する
  5. メニューやフッターに、サイトマップページへのリンクを追加する

公開したあとは、スマホでも、一覧が見やすく表示されているかを、あわせて確認しておきましょう。

当サイトの「全体像」ページ(一覧ページの実例)

当サイトの「全体像」ページ(一覧ページの実例)を、ページの構成・XMLサイトマップとの違いという2つに分けて図解したインフォグラフィックです。
  • 「全体像」ページの構成
  • XMLサイトマップとの違い

ここでは、当サイト(伸びるSEO入門)の、HTMLサイトマップに近い役割を持つ「全体像」ページを紹介します(2026年10月8日)。

「全体像」ページの構成

項目内容
ページの構成SEOとは・SEOの3つの柱・4つのカテゴリ・記事の一覧(テーマ別)・迷ったときは
記事の一覧4つのカテゴリごとに、記事へのリンクを並べている
リンクの数内部リンク118本(重複を除くと110本)
Search Consoleでの内部リンク全体像への内部リンクは24本で、サイト内で2番目に多い

XMLサイトマップとの違い

当サイトには、検索エンジン向けのXMLサイトマップ(記事104・固定ページ6・カテゴリ4・タグ20のURL)と、読者向けの「全体像」ページの、2つがあります。

Googleの公式ドキュメント(サイトマップ)では、サイトが小さく(約500ページ以下)、ナビゲーションで、すべてのページがリンクされている場合は、サイトマップが、必須ではないとされています。当サイトのように、新しいサイトでは、XMLサイトマップも、あわせて用意しています。

HTMLサイトマップでよくある質問

HTMLサイトマップについて、初心者の方が疑問に思いやすい点をまとめました。

HTMLサイトマップは、何記事くらいから作ればよいですか?

決まった数はありませんが、カテゴリー一覧だけでは記事を探しにくくなってきたころが、作るタイミングの目安です。数十記事に増えたころに検討してみるとよいでしょう。

XMLサイトマップも、別に作る必要がありますか?

XMLサイトマップは、検索エンジン向けのもので、別に用意しておく方が安心です。多くのSEOプラグインで自動生成されるため、設定を確認しておきましょう。

当サイトには、HTMLサイトマップがありますか?

「全体像」ページが、その役割を担っています。4つのカテゴリごとに、記事へのリンクを並べ、読者が、テーマ別に記事を探せるようにしています。

HTMLサイトマップは、専用のプラグインが必要ですか?

必須ではありません。固定ページに、カテゴリごとの記事のリンクを並べるだけでも、読者向けの一覧ページになります。当サイトの「全体像」も、固定ページで作っています。

HTMLサイトマップのリンクは、検索エンジンに見つけてもらえますか?

Googleの公式ドキュメントでは、リンクは、クロールできる形(aタグのhref属性があるリンク)で書くことが勧められています。HTMLサイトマップは、通常のリンクで記事を並べるページなので、この条件を満たしやすく、記事同士のつながりを、検索エンジンにも伝える助けになります。

HTMLサイトマップには、どのページを載せればよいですか?

読者に見つけてほしい、主要な記事や固定ページを、カテゴリごとに整理して載せます。お礼ページなど、読者が直接探す必要のないページは、載せなくて構いません。

WordPressは、標準でサイトマップを作ってくれますか?

WordPressは、標準で、検索エンジン向けのXMLサイトマップを自動で作ります。当サイトも、https://seo-beginners.top/wp-sitemap.xml で、投稿・固定ページ・カテゴリー・タグのサイトマップをまとめて確認できます(2026年10月8日に確認)。読者向けのHTMLサイトマップは、これとは別に、固定ページなどで作る必要があります。

HTMLサイトマップでよくある失敗例は?

よくある失敗は、次の3つです。

  • 作っただけで、メニューやフッターにリンクを置いていない
  • 記事数が増えたのに、整理せず、長い一覧のままにしている
  • 手作業で作ったまま、更新せず、リンク切れが起きている

作ったあとの導線と、定期的な見直しを、忘れないようにしましょう。

まとめ:読者のための記事一覧を、迷わず作れる導線に整える

HTMLサイトマップについて、まず固定ページを作り、サイトマップ用のショートコードを設置することから、メニューやフッターからリンクを設置し、定期的に見直すという流れを2ステップで図解したインフォグラフィックです。
  • HTMLサイトマップは、読者がサイト全体の記事を一覧できる人間向けのページ。
  • Cocoonテーマのショートコードを使えば、簡単に自動更新型の一覧ページを作れる。
  • 当サイトは、読者向けの「全体像」ページと、検索エンジン向けのXMLサイトマップの、2つを用意している。

記事数が増えるほど、読者が迷わずページを探せる仕組みの価値は高まります。

まだ用意していない場合は、固定ページを1つ作るところから始めてみましょう。

作るときは、次の順番がおすすめです。

  1. 固定ページを作り、ショートコードを貼る
  2. メニューやフッターに、リンクを置く
  3. 記事が増えたら、カテゴリーごとの整理を検討する

SEOを基礎から順番に学びたい方は、SEO入門の進め方(はじめに)と学習ステップもあわせてご覧ください。

コメント