・そもそもサイトマップって必要？
・何でもいいからサイトマップが簡単に作れる方法が知りたい！
この記事では上記のような悩みについて解決していきます。
皆さんも一度は見たことがあると思いますが、ほとんどのインターネットサイトのページには隅っこの方に「サイトマップ」というものがあります。
ブログを開設して記事数が揃ってきたら「サイトの地図」を示すサイトマップを作っていきたいところですが、ブログ初心者にとってサイトマップページの作り方自体がそもそも分からないと思います。
そこで今回は初心者の方でも手軽にできるサイトマップの作り方を２パターンで紹介していきます。
そもそもサイトマップってなに？必要なもの？
サイトマップとは簡単にいうと、「サイト全体を地図のように一覧でまとめてあるページ」のことです！
つまりは、サイトマップを見ただけでそのサイトの構成が一目で分かり、どのページがどこにあるか瞬時に分かるということです。
記事数が多くなってくると過去に書いた記事はどうしても埋もれてしまいます。
そんな時にサイトマップを設置しておけば記事がどこにあるのか、構造を辿りながらすぐに見つけられるので読者は記事を探すのに苦労することが少なくります。
以上のことから、ブログを開設して記事数が増えてきたらユーザビリティを向上させるためにもサイトマップを設置しておくと吉です！
サイトマップは２種類ある
サイトマップには２種類あることを覚えておきましょう。
- HTMLサイトマップ←今回作るサイトマップ
- XMLサイトマップ
順番に説明していきますね。
HTMLサイトマップというのは、HTML（各ページのリンク→普通の記事ページのこと）によって構成されていてユーザー（読者）が利用するページのことです。
今回作るのはこのHTMLサイトマップの方ですね！
XMLサイトマップは、検索エンジンにサイト内のページ１枚１枚の存在を伝える役割をします。
このXMLサイトマップによって検索エンジンにサイトの更新を早く伝えたり、気付かれにくいページの存在を的確に知らせることができます。
まとめると、こんな感じです！
HTMLサイトマップ→読者が視覚的に記事がどこにあるのか把握するためのもの
XMLサイトマップ→検索エンジンが記事を見つけやすくするためのもの
XMLサイトマップの作り方とGoogleサーチコンソールの登録方法は以下記事からどうぞ！
-
-
【WordPress】Googleサーチコンソールの設定方法とブログへの連携を超解説
続きを見る
HTMLサイトマップの作成と手順
それではここから実際にHTMLサイトマップを作成していきましょう！
以下２パターンご用意していますが手軽ですぐ設置できるのはプラグインでの作成です。
- PS Auto Sitemapで作成する
- 固定ページに手動で作成する
自分がやりやすい方、あるいは好みに合わせて導入してみて下さい！
では一つずつ解説していきます。
①：PS Auto Sitemapで作成する
「とにかく手軽に導入したい！」「サイトマップも自動で更新してくれるものがいい」という方にはぴったりの作成方法です。
当プラグインの特徴はこんな感じですね。
- 記事投稿するごとに自動でサイトマップを更新してくれる
- 表示するページの種類も選択可
- デザインがシンプルで見やすい
設定する箇所も少なく初心者の方でも１５分もあれば導入できますよ！
プラグインの導入→サイトマップ設置まで一気にいきたいと思いますので頑張ってついてきて下さいね！笑
では手順をみていきましょう。
ステップ１：プラグインのインストールと有効化
「WordPress管理画面」→「プラグイン」→「新規追加」→「検索窓で"Ps Auto Sitemap"と検索」→「インストール」→「有効化」
まずは上記の手順でプラグインのインストールと有効化まで済ませちゃいましょう！
ステップ２：サイトマップページ（固定ページ）を作成する
「WordPress管理画面」→「固定ページ」→「新規追加」
まずは上記手順でサイトマップページを作るために新規の固定ページを作成しましょう。
ステップ３：タイトル名とパーマリンクを編集する
①タイトル名は適当に「サイトマップ」と付けておきましょう！
②パーマリンク名は「ps-sitemap」などでOKです。
注意することとしては、必ず「sitemap」と「sitemaps」以外の名前にして下さい！
上記のようなパーマリンクにするとサイトマップが正常に表示されない場合があります。
ステップ４：プラグイン用のテキストコードを貼り付ける
次に、プラグインと連携させるためにテキストコードを貼り付けます。
①まずはエディターを「テキスト」に切り替えましょう。
②以下コードをコピーして記事欄に貼り付けましょう。
<!-- SITEMAP CONTENT REPLACE POINT -->
③「公開」をクリックです！
これで一旦ページの準備は終了です。
ステップ５：記事IDをメモする
次に、プラグインを設定する際に使用する記事IDをメモしましょう！
少し見にくいですが、先ほど作成したサイトマップページのURLをクリックするとURLが全て表示されるので、画像のように「post=429」の「429」だけメモしておいて下さい！
こちらが記事IDになります。
ステップ６：PS Auto Sitemapの設定
ではここからプラグインの設定に入っていきます。
「WordPress管理画面」→「設定」→「PS Auto Sitemap」
上記からプラグインの設定画面に移りましょう。
①「ホームページの出力」→ 任意
サイトマップにトップページのリンクを表示できます
②「投稿リストの出力」→ チェックでOK
③「固定ページリストの出力」→ 任意
プライバシーポリシーなどの固定ページを表示するか設定できます
④「サイトマップを表示する記事」→ 記事IDを入力
先ほどメモした記事IDをここに入力します
⑤「出力階層制限」→「制限なし」でOK
⑥「先に出力するリスト」→ 任意で選択
固定ページを投稿ページより上部に表示したい場合は「固定ページ」にチェック
⑦「カテゴリーと投稿の表示」→「同一マップ内」でOK
⑧「除外カテゴリ」→ 除外したいカテゴリーIDを入力
ここでは「未分類」というカテゴリーを除外しています
⑨「除外記事」→ 除外したい記事IDを入力
⑩「スタイルの変更」→ 好みのデザインに設定
「矢印」がおすすめです
⑪「キャッシュの使用」→ チェックを外す
チェックを入れるとサイトマップの表示速度を多少速めることができますが、キャッシュ系プラグインを使用している場合は相互干渉する恐れがあるのでチェックは外しておいた方が無難です
設定が終わったら最後に、「変更を保存」をクリックしましょう！
作成したサイトマップページを確認してみましょう！
上の画像のような感じで表示されていたら完成です！お疲れ様でした。
- サイトマップのパーマリンクが「sitemap」または「sitemaps」になっていないか
- 記事のID番号が間違っていないか
- をテキストモードで入力しているか
- 固定ページで作っているか
- 他プラグインとの干渉を調べてみる
- サイトマップに表示するカテゴリーが設定されているか
正常に表示されないときは以上のことを確認してみましょう！
では次に、手動でサイトマップを作成していく方法をご紹介します。
②：手動でサイトマップを作成する
ここからは手動でサイトマップを作成する方法をご紹介します。
完成形としては上画像のような感じで作っていきます！
具体的な手順は以下になります。
１. 固定ページを作成
２. リストボックスを作成
３. 見出しを作成し、各見出しに記事リンクを導入
手動でサイトマップを作成するメリット＆デメリットとしては、
- 固定ページを用意するだけなのでプラグイン導入によるページ速度低下等の悪影響がない
- ページデザインや配置等、アレンジができる
- 記事を書くごとに手動でページを更新しないといけない
上記のような感じでメリットデメリットがあるので、この記事を読み終わった後に総合的に判断してどちらがいいか決めて下さい！
それでは見ていきましょう。
ステップ１：固定ページを作成する
「WordPress管理画面」→「固定ページ」→「新規追加」
ここはプラグインで説明した時と同じですね！
なお、パーマリンクは「sitemap」で構いません！
ステップ２：リストボックスを作成する
次にリストボックスをCSSコードを使用して作成していきます。
「WordPress管理画面」→「外観」→「テーマエディター」→「使用している子テーマ（Child）を選択」
以上の手順でテーマエディター画面に移行し、以下コードをコピペして皆さんが使用しているテーマの「子テーマ」に貼り付けて下さい！
.sitemapbox {
padding: 0.5em 1em 0.5em 2.3em;
position: relative;
background-color: #f7f7f7;
padding-top: 1px;
padding-bottom: 1px;
}
.sitemapbox li {
line-height: 1.5;
padding: 0.5em 0;
list-style-type: none!important;/*ポチ消す*/
}
.sitemapbox li:before {
font-family: "FontAwesome";
content: "\f00c";
position: absolute;
left : 1em; /*左端からのアイコンまで*/
color: #007cba; /*アイコン色*/
}
なお、上のボックスデザインはあくまで僕が使用しているものなので、皆さんが使用しているテーマのボックスデザインに変更しても全然OKですよ！
自分でボックスデザインを選ぶのが面倒な方は上のコードをそのまま使っちゃって下さい。
ステップ３：見出しを設置して各記事のリンクを挿入する
次に、上画像のように各カテゴリー（h2、h3）に分けて見出しを設置し、その下に先ほどのボックスを配置して記事を挿入していきます。
ここでは分かりやすいようにテキストエディターのHTML表記で解説しています。
<div class="sitemapbox">
<ul>
<li>記事のタイトル</li>
<li>記事のタイトル</li>
<li>記事のタイトル</li>
</ul>
</div>
ボックスデザインのHTMLは上のコードを使用してリストタグ<li></li>に記事のタイトルを入力していきましょう。
あとは、上のような感じでビジュアルエディターに切り替え、記事タイトルのテキストにそれぞれの記事URLを埋め込んでいけば完成です！
リンクの色も「テキスト色」で変更してみてもいいですね。
こんな感じになったでしょうか？
最後に、固定ページを入れてみたりページトップに画像を入れるなどしてアレンジを加えてみて下さい！
サイトマップの作り方まとめ
サイトマップは必ず設置しないといけないわけではありませんが、サイトマップがあった方がGoogleアドセンスやアフィリエイトパートナーを申請した際に審査が通りやすく可能性があります。
何よりもブログを見ていただく読者のためにもサイトマップはあった方が親切ですよね！
プラグインと手動で作成する方法をご紹介しましたが、皆さんがやりやすい方で設置していただければと思います。