SWELLのサイトマップ固定ページの作り方|プラグインと自作の選び方も

SWELLのサイトマップ固定ページの作り方を学びながら、女性起業家がサイト導線やページ設計を見直すイメージ画像 WordPress・テーマ・サイト制作

WordPressテーマSWELLでブログを始めたとき、「サイトマップって何から作ればいいの?」と初心者の方なら迷うかもしれませんね。サイトマップには種類があり、何をどの順番で設定するかを把握しておくと、その後の作業がスムーズになります。

この記事では、SWELLでHTMLサイトマップの固定ページを作る方法を2つの方向から整理します。一つはプラグインを使って自動生成する方法、もう一つはSWELLのブロック機能だけで自作する方法です。どちらが自分に合うかを判断するための基準も含めて解説します。

noindexの設定やフッターへの追加など、仕上げまでの手順も順を追って説明するので、初めてSWELLでサイトマップを作る方でも迷わず進められる内容です。

SWELLのサイトマップ固定ページとは何か、2種類の違いから整理する

サイトマップという言葉は一種類のものを指しているようで、実際には目的がまったく異なる2種類があります。どちらを設定すべきかを把握することが、SWELLでのサイトマップ設定の第一歩です。

XMLサイトマップは検索エンジン向け、HTMLサイトマップは読者向け

WordPressのサイトマップには「XMLサイトマップ」と「HTMLサイトマップ」の2種類があり、それぞれの役割はまったく異なります。

XMLサイトマップは、検索エンジンのクローラーに対してサイトの構造や記事一覧を伝えるためのXML形式のファイルです。訪問者が目で見ることはなく、サイトの裏側で機能します。Googleサーチコンソールにこのファイルを送信することで、記事がインデックスされやすくなるとされています。SWELLでは「SEO SIMPLE PACK」や「XML Sitemap & Google News」といったプラグインを使って設定するのが一般的です。

一方のHTMLサイトマップは、サイトを訪れた読者が記事を探しやすくするためのページです。サイト全体の記事一覧やカテゴリー構成を一目で確認できる「地図」のような役割を持ちます。フッターリンクなどからアクセスできるように設置するのが通例です。

この記事で主に扱うのは、読者向けのHTMLサイトマップを固定ページとして作成する手順です。XMLサイトマップの設定は、SEO SIMPLE PACKなどの設定画面から別途行います。

HTMLサイトマップを固定ページで作る必要性

HTMLサイトマップは、SWELLに最初から自動生成される機能ではありません。プラグインを導入するか、ブロック機能で手作りするかのどちらかの方法で、自分で作成する必要があります。

HTMLサイトマップを作る主な理由は2つあります。一つは、訪問者がサイト内の記事を探しやすくなること。もう一つは、サイトの構成を整理された形で示せることです。記事が増えてきたブログでは特に、カテゴリー別に記事を一覧できるページがあると、読者が目的の情報にたどり着きやすくなります。

HTMLサイトマップ自体は必ずしも必須ではありませんが、フッターに設置しておくことでサイト全体の信頼感を高める効果もあります。プライバシーポリシーやお問い合わせページとあわせてフッターに並べておくのが一般的な配置です。

SWELLのサイトマップには2種類ある
・XMLサイトマップ:検索エンジン向け、プラグインで設定(SEO SIMPLE PACK等)
・HTMLサイトマップ:読者向け、固定ページとして自分で作成する
この記事ではHTMLサイトマップの固定ページ作成を解説します。

SWELL初心者が最初に知っておくと迷わない3つのポイント

SWELLでHTMLサイトマップの固定ページを作るとき、最初に把握しておくと作業が進めやすい点が3つあります。

1つ目は、作成方法が2通りあることです。プラグイン「WP Sitemap Page」を使う方法と、SWELLのブロック機能を使って自作する方法があります。どちらを選ぶかによって手順が変わります。

2つ目は、作成したサイトマップページにはnoindexを設定することが多いという点です。HTMLサイトマップは読者向けのページであり、検索エンジンにインデックスさせる必要性が低いとされているためです。SEO SIMPLE PACKを導入している場合は、固定ページの編集画面から個別にnoindexを設定できます。

3つ目は、ページを作成したあとにフッターメニューへ追加する作業が必要なことです。固定ページを公開するだけでは読者がたどり着けないため、WordPressのメニュー設定からフッターに追加する手順が必要になります。

  • HTMLサイトマップは読者向けのページで、SWELLには自動生成機能はない
  • プラグインを使う方法と、ブロック機能で自作する方法の2通りがある
  • 作成後はnoindexの設定とフッターへの追加が必要
  • XMLサイトマップとは別の設定で、混同しないよう注意する

プラグインを使ってHTMLサイトマップの固定ページを作る手順

プラグインを利用する方法は、記事が増えても自動的にサイトマップが更新されるのが大きなメリットです。ショートコードを一つ貼るだけで記事一覧を表示できるため、初心者でも取り組みやすい方法です。

「WP Sitemap Page」のインストールと有効化

HTMLサイトマップの作成に使うプラグインは「WP Sitemap Page」です。以前は「PS Auto Sitemap」が多く使われていましたが、現在はWordPress公式プラグインディレクトリから削除されているため、代替として「WP Sitemap Page」が多くのブログで紹介されています。

インストール手順はWordPressの管理画面から「プラグイン」→「新規追加」を開き、検索欄に「WP Sitemap Page」と入力します。表示されたプラグインをインストールし、「有効化」をクリックすれば準備完了です。

有効化後は管理画面のメニューに「WP Sitemap Page」の設定画面が追加されます。デフォルトの設定のままでも動作しますが、特定のカテゴリーやページを除外したい場合は設定画面から調整が可能です。SWELLのデザインとも自然になじむため、追加のCSSカスタマイズをしなくても見やすく表示されます。

サイトマップ用の固定ページを新規作成する

プラグインをインストールしたら、サイトマップを表示するための固定ページを作成します。管理画面の「固定ページ」→「新規固定ページを追加」から作業を進めます。

ページのタイトルは「サイトマップ」とするのが一般的です。URLスラッグは「sitemap」や「site-map」などのわかりやすい文字列に設定しておくとよいでしょう。

固定ページの編集画面では、SWELLの「テンプレート」設定も確認しておくとよいです。サイトマップページはサイドバーのない「1カラム」または「フルワイド」表示にするとすっきりした見た目になります。SWELL独自のテンプレート選択はページ右側の設定パネルから変更できます。

ショートコードを貼り付けてページを公開する

固定ページの本文エリアに、「WP Sitemap Page」のショートコードを貼り付けます。WordPressのブロックエディターでは「カスタムHTML」ブロックを追加して、その中にショートコードを記入します。

基本的なショートコードは以下の形式です。

ページ

カテゴリーごとの投稿

カテゴリータイトルの表示を省略したい場合は、

ページ

カテゴリーごとの投稿

のように設定します。ショートコードを貼り付けたら「公開」をクリックしてページを公開します。

公開後は実際にページを表示して、投稿記事・固定ページ・カテゴリーが一覧表示されているかを確認します。表示させたくない固定ページ(プライバシーポリシーやお問い合わせなど)がある場合は、プラグインの設定画面から除外設定が可能です。

表示項目デフォルトの動作調整の方法
投稿記事(カテゴリー別)すべて表示設定画面から除外可能
固定ページすべて表示設定画面から特定ページを除外
カテゴリー一覧表示非表示に変更可
タグ一覧表示非表示に変更可

フッターメニューにサイトマップページを追加する

固定ページを公開しただけでは、訪問者がサイトマップページを見つけることができません。WordPressのメニュー設定からフッターに追加する作業が必要です。

管理画面の「外観」→「メニュー」を開き、フッター用のメニューを選択または新規作成します。左側の「固定ページ」パネルから作成したサイトマップページを選び、「メニューに追加」をクリックします。メニューを保存したら、実際のサイトのフッターにリンクが表示されているかを確認してください。

SWELLではフッターのメニュー設定がカスタマイザーからも管理できます。「外観」→「カスタマイズ」→「フッター」の設定から、どのメニューをフッターに表示するかを指定できます。プライバシーポリシーやお問い合わせページなどとあわせて、サイトマップへのリンクを並べておくと整理された印象になります。

  • プラグイン「WP Sitemap Page」は無料で利用でき、記事追加時に自動更新される
  • ショートコード一つでカテゴリー別の記事一覧を表示できる
  • 固定ページ作成→ショートコード挿入→フッターメニュー追加の順で進める
  • 除外設定で表示したくないページを非表示にできる

プラグインなしでSWELLのブロック機能だけで自作する方法

SWELLでサイトマップ固定ページの作成方法や設定内容を確認しながら作業する様子を表すイメージ画像

プラグインを使わずにSWELLのブロック機能だけでサイトマップページを作ることも可能です。デザインにこだわりたい場合や、プラグインの数を増やしたくない場合にはこちらの方法が向いています。

自作とプラグインどちらを選ぶかの判断基準

どちらの方法を選ぶかは、ブログの現状と優先事項によって変わります。判断の目安になるポイントを整理します。

プラグインを使う方法が向いているのは、記事数がすでに多い場合や、今後記事を増やす予定があってサイトマップを自動更新したい場合です。ショートコード一つで記事が自動的に一覧表示されるため、更新の手間が省けます。初めてサイトマップを設置する場合にも取り組みやすい方法です。

一方、SWELLのブロック機能で自作する方法が向いているのは、見た目にこだわりたい場合や、表示する記事やカテゴリーを自分で厳選して掲載したい場合です。プラグインで自動生成すると記事が多いサイトでは逆に見づらくなることもあるため、掲載内容を絞って整理したい場合は自作のほうが管理しやすい面があります。サーバーへの負荷軽減という観点からも、プラグイン数を減らしたい方には自作が有効です。

方法の選び方の目安
・記事が多い・自動更新したい → プラグイン(WP Sitemap Page)
・デザインにこだわりたい・掲載内容を絞りたい → SWELLブロック機能で自作
・プラグイン数を増やしたくない → 自作が向いている

SWELLのブロック機能でサイトマップページを構成するステップ

SWELLのブロック機能を使って自作する場合、固定ページを新規作成してから、表示させたいコンテンツをブロックで組み立てていきます。

よく使われる構成例は次の通りです。カテゴリーごとのリンク一覧を「リンクリスト」ブロックで作り、各カテゴリーの記事へのリンクを手動で追加していきます。固定ページ(プライバシーポリシーやお問い合わせなど)は「ボックスメニュー」ブロックにアイコンつきで並べると視覚的にわかりやすくなります。

カテゴリーが複数ある場合は「リッチカラム」ブロックを使って2〜3カラムのレイアウトにすると、スマートフォンでも見やすく整理できます。各カテゴリーのタイトル見出しには「セクション用」スタイルを適用すると、通常の記事見出しとは異なるシンプルなデザインになります。

サブカテゴリーがある場合は「アコーディオン」ブロックを使うと、ページが縦長になりすぎずにコンパクトにまとめられます。開閉できる形式にすることで、閲覧者が必要な情報だけを展開して確認できるようになります。

見やすくするためのレイアウトの工夫

自作のサイトマップページは、読者が記事を探しやすいかどうかが最も重要な評価基準です。デザインにこだわりすぎて情報が見つけにくくなるのは本末転倒なので、シンプルで整理された構成を意識するとよいでしょう。

カテゴリーの数が多い場合は、大カテゴリーと小カテゴリーを階層構造で整理することで一覧性が上がります。キーワードやタグから記事を探せるよう「検索」ブロックや「タグクラウド」ブロックを末尾に追加する方法も、記事数が増えてきたブログには有効です。

記事へのリンクは、タイトルがそのままリンクテキストになるように設定しておくと、読者が内容を把握しやすくなります。リンクリストのアイコン設定や、ブロックのカラー設定を統一することで、視覚的なまとまりも出やすくなります。

ページ全体のレイアウトはサイドバーなしの1カラム表示にするのが一般的です。SWELLの固定ページテンプレートからサイドバーを非表示にする設定が可能なので、作成前に確認しておくとよいでしょう。

  • 自作の場合はリンクリスト・ボックスメニュー・リッチカラムを組み合わせて構成する
  • サブカテゴリーにはアコーディオンブロックが整理しやすい
  • 記事が増えたときの見直しを想定して、シンプルな構成にしておくと管理しやすい
  • ページレイアウトはサイドバーなしの1カラムが一般的

noindexの設定とフッターへの配置、完成後の確認ポイント

HTMLサイトマップの固定ページを作成したら、公開前または公開直後にいくつかの設定を確認しておく必要があります。noindexの設定とフッターへの追加が主な作業です。

HTMLサイトマップページにnoindexを設定する理由と手順

HTMLサイトマップページは、検索エンジンにインデックスさせないようにnoindexを設定しておくことが多いです。その理由は、HTMLサイトマップはあくまで読者向けの案内ページであり、検索エンジンに評価してもらう必要性がないためです。また、サイトマップページが検索結果に表示されても、読者にとって有益な流入にはなりにくいとされています。

noindexの設定はSWELL推奨の「SEO SIMPLE PACK」プラグインを使うと個別に設定できます。固定ページの編集画面を開くと、下部に「SEO SIMPLE PACK設定」のパネルが表示されます。「このページの”robots”タグ」の項目で「インデックスさせない(noindex)」を選択して更新すれば設定完了です。

なお、noindexを設定することと、検索エンジンがそのページをクロールすることは別の話です。noindexはインデックス(検索結果への掲載)を防ぐ設定であり、クロール自体を止めるわけではありません。HTMLサイトマップをXMLサイトマップに含めないようにしたい場合は、XML Sitemap & Google Newsなどのプラグイン設定で固定ページの除外設定を行います。

フッターメニューへの追加と動作確認の方法

HTMLサイトマップページを公開したら、実際にサイト上からアクセスできる状態にするためにフッターメニューへ追加します。

「外観」→「メニュー」から設定します。フッター用のメニューに「サイトマップ」ページを追加して保存してください。SWELLでは複数のフッターメニューエリアが設定できる場合があります。どのエリアに追加するかはカスタマイザーで確認できます。

設定後はサイトのフッターを実際に表示して、リンクが正しく機能するか確認します。スマートフォンのブラウザでも表示の崩れがないかを確認しておくと安心です。

公開後の確認チェックリスト
・固定ページが公開されているか
・noindexが設定されているか(SEO SIMPLE PACKで確認)
・フッターメニューにリンクが追加されているか
・PC・スマートフォン両方で表示確認済みか

記事が増えたときの更新と見直しのタイミング

プラグインを使ってHTMLサイトマップを作成している場合、記事を追加するたびにサイトマップが自動で更新されます。そのため、記事が増えても特別な更新作業は不要です。

ただし、カテゴリーを新設したり構成を変更したりした場合は、サイトマップページでも正しく反映されているかを確認するとよいでしょう。プラグインの除外設定が以前のまま残っていると、新しいカテゴリーが表示されないことがあります。

SWELLのブロック機能で自作したサイトマップの場合は、記事を追加したときにリンクの追記が必要です。記事数が少ないうちは管理しやすいですが、記事が増えてきた段階でプラグインへの切り替えを検討するのも一つの方法です。見直しのタイミングとしては、記事数が50件を超えたあたりが一つの目安になります。

Q:サイトマップページを作ったら、Googleサーチコンソールへの送信は必要ですか。

A:HTMLサイトマップの固定ページはGoogleサーチコンソールへの送信は不要です。サーチコンソールに送信するのはXMLサイトマップのみです。HTMLサイトマップは読者向けのページのため、送信の必要はありません。

Q:noindexを設定したページはサーチコンソールでエラー表示になることはありますか。

A:noindexを設定したページがサーチコンソールで「クロール済み・インデックス未登録」と表示される場合があります。これはnoindexの指示が正常に機能している状態であり、エラーではありません。XMLサイトマップに含まれている場合は警告が出ることもあるため、XMLサイトマップからの除外設定も確認しておくとよいでしょう。

  • HTMLサイトマップページにはnoindexを設定するのが一般的
  • SEO SIMPLE PACKの固定ページ編集画面から個別設定が可能
  • フッターへの追加後はPC・スマートフォン両方で動作を確認する
  • プラグイン利用の場合は記事追加で自動更新されるが、カテゴリー変更時は確認が必要

まとめ

SWELLでHTMLサイトマップの固定ページを作るには、プラグイン「WP Sitemap Page」を使う方法と、SWELLのブロック機能で自作する方法の2通りがあります。記事の自動更新を重視するならプラグイン、デザインや掲載内容を自分で管理したいなら自作が向いています。

まず取り組むとしたら、「WP Sitemap Page」のインストールから始めるのが最短ルートです。固定ページにショートコードを貼り付けてnoindexを設定し、フッターメニューに追加するだけで基本的なサイトマップが完成します。

サイト作りを丁寧に進めていくうえで、サイトマップの設置は小さな一歩ですが、読者の利便性につながる大切な作業です。自分のブログに合った方法で、ぜひ取り組んでみてください。

当ブログの主な情報源