この記事は 6 分17秒くらいで読めます。
ブログやサイトで記事数が増えてくると、昔にアップしたものがどんどん下層に下がっていき、訪問してくれた方の目に留まりにくくなりますよね。そんなとき、サイトの目次のようなものがあれば便利だと思いませんか?
今回はごぶろぐのサイトマップのように「HTMLサイトマップ」を簡単に作成する方法をご紹介します。
- 「HTMLサイトマップ」「XMLサイトマップ」の違いを知りたい
- WordPressで簡単に「HTMLサイトマップ」を作りたい
- ブログ記事の一覧ページを作りたい
- 埋もれている記事を訪問者に読んで欲しい
クリックでジャンプ
「HTMLサイトマップ」「XMLサイトマップ」の違い
「HTMLサイトマップ」って?
「HTMLサイトマップ」とは、下の図のように、カテゴリー別にリンク付きの記事一覧を表示するページのことです。
「HTMLサイトマップ」は訪問者の為のサイトマップです
「XMLサイトマップ」って?
「XMLサイトマップ」は検索エンジンのクローラーに向けて作成されたもので、サイト内に存在するURLのリストを作り、情報を検索エンジンへ送ります。まだ設定していない人はこの機会にぜひ設定しましょう。SEOを気にしたブログの書き方の記事で詳しい方法を説明しています。
「XMLサイトマップ」は検索エンジのクローラーの為のマップです
「HTMLサイトマップ」「XMLサイトマップ」の比較
種類 | 誰のため? | 目に見える? | 役割は? |
HTML サイトマップ | 訪問者 | ◎ | 目次 |
XML サイトマップ | クローラー | × | SEO対策 |
WordPressプラグイン『PS Auto Sitemap』を使って自動でHTMLサイトマップを作成
『PS Auto Sitemap』の設定方法と使い方
- 「プラグイン」→「新規追加」で『PS Auto Sitemap』を検索し、インストール後有効化します
- 「固定ページ」を選択し「新規追加」します
- サイトマップや目次など分かりやすいような名前をつけます
- 固定ページのHTMLモード(テキストモード)で以下のコードを入力します。<!– SITEMAP CONTENT REPLACE POINT –>
- 「公開」を押し「プレビュー」を押すと、URLが表示される欄に
自分のサイトURL/固定ページ名?preview_id●●●&preview
と表示されるので、preview_idの後ろの数字をメモしておきます。
↓の場合なら 3150 です。
- 「設定」→「PS AutoSitemap」を選択し、下の図のように設定します。
・サイトマップを表示する記事:⑤でメモした固定ページのID・出力階層制限:こちらに制限を設けると、カテゴリー名のみの表示にもできます。制限なしの場合は記事名も表示されます。・スタイルの変更:スタイルについては次の項でサンプルをご紹介します。 - 「変更を保存」を押して終了です。
『PS Auto Sitemap』のスタイルサンプル一覧
スタイルが沢山あるので、サンプルをご紹介します。こちらは全て同じ大きさでの画像となっています。文字の大きさが違うのはそれぞれのスタイルに依存しています。
スタイルの変更で好きなスタイルを選んでください
![[WordPress]HTMLサイトマップを自動で作成する方法](https://chocogon.com/wp-content/uploads/2019/11/sitemap-5.jpg)
![[WordPress]HTMLサイトマップを自動で作成する方法](https://chocogon.com/wp-content/uploads/2019/11/sitemap-simple1.jpg)
![[WordPress]HTMLサイトマップを自動で作成する方法](https://chocogon.com/wp-content/uploads/2019/11/sitemap-simple2.jpg)
![[WordPress]HTMLサイトマップを自動で作成する方法](https://chocogon.com/wp-content/uploads/2019/11/sitemap-checklist.jpg)
![[WordPress]HTMLサイトマップを自動で作成する方法](https://chocogon.com/wp-content/uploads/2019/11/sitemap-keikoupen.jpg)
![[WordPress]HTMLサイトマップを自動で作成する方法](https://chocogon.com/wp-content/uploads/2019/11/sitemap-documenttree.jpg)
![[WordPress]HTMLサイトマップを自動で作成する方法](https://chocogon.com/wp-content/uploads/2019/11/sitemap-husen.jpg)
![[WordPress]HTMLサイトマップを自動で作成する方法](https://chocogon.com/wp-content/uploads/2019/11/sitemap-onpu.jpg)
![[WordPress]HTMLサイトマップを自動で作成する方法](https://chocogon.com/wp-content/uploads/2019/11/sitemap-yajirushi.jpg)
![[WordPress]HTMLサイトマップを自動で作成する方法](https://chocogon.com/wp-content/uploads/2019/11/sitemap-business.jpg)
![[WordPress]HTMLサイトマップを自動で作成する方法](https://chocogon.com/wp-content/uploads/2019/11/sitemap-sakuin.jpg)
![[WordPress]HTMLサイトマップを自動で作成する方法](https://chocogon.com/wp-content/uploads/2019/11/sitemap-urban.jpg)
![[WordPress]HTMLサイトマップを自動で作成する方法](https://chocogon.com/wp-content/uploads/2019/11/sitemap-underscore.jpg)
![[WordPress]HTMLサイトマップを自動で作成する方法](https://chocogon.com/wp-content/uploads/2019/11/sitemap-cube.jpg)
![[WordPress]HTMLサイトマップを自動で作成する方法](https://chocogon.com/wp-content/uploads/2019/11/sitemap-checklist.jpg)