こんにちは、ぱのん(@panonbox)です。
今回はWordPressを使って作ったwebサイトに、便利なプラグインを使いHTMLサイトマップを自動生成する方法を解説します。
また「PS Auto Sitemap」を使ってサイトマップを自動生成するときに選べるスタイルを一覧で紹介していますので参考にしてみて下さい。
それでは、さっそく手順を解説していきます。
サイトマップには２種類あります！またその違いは？
そもそも「サイトマップ」とは？
サイトに訪れた者のために、「このサイトには、これだけのページがあって、その場所はここですよ。」という感じで、サイト内のページリンクを一つに、まとめたページのことです。
それぞれの用途の違いで、サイトマップには大きく分けて２種類あります。
この２種類のサイトマップにはどのような違いがあるのか解説します。
HTML サイトマップ
「HTML サイトマップ」とは、Webサイトに訪れた読者のために、設置するサイトマップです。
訪れた読者がサイト内のコンテンツを一覧で見ることができて、目的のコンテンツを見つけやすく、すぐに移動できるようにまとめたページのことです。
XML サイトマップ
「XML サイトマップ」とは、HTMLサイトマップとは違いWebサイトに訪れた検索エンジンのクローラーのために、設置するサイトマップです。
巡回してる検索エンジンクローラーに、このサイトにあるすべてのページを知らせるのが、目的でまとめられたページのことです。
誰のためにサイトマップを設置するかで、２種類に分別されます。
この記事では、上記２種類あるサイトマップの内で「HTMLサイトマップ」読者のために設置するものを、プラグインを使って自動生成する方法を解説していきます。
XML サイトマップについは、この記事を参考にしてみて下さい。
HTMLサイトマップて必要なの？
そもそもHTMLサイトマップって必要なのか？
絶対に必要なのかと聞かれれば、私の個人的な意見は「以前とは違い今では必要ない」です。
サイトマップを設置する目的は２つあると思います
- 検索エンジンのクローラーに効率よく回ってもらうため
- サイトに訪れた読者さんが目的の記事を探せるように
検索エンジンのクローラー向けには「XML サイトマップ」の方が効率よく適しているのでSEOの観点からもHTMLサイトマップは必要ありません。
次にサイトを訪れた読者さんが目的のサイトを探せるようにですが、サイトのリンク設計が悪すぎて目的のページにたどり着けないような場合を除けば、必要ないと感じます。
そもそもWord Pressで最近のテーマを使っているのであれば、「有料、無料」に関係なく内部リンクの設計が悪く目的ページにたどり着けない事はありません。
HTMLサイトマップはユーザビリティのために設置するものと言われていますが、読者がサイトマップをみて読む記事を探す可能性は低いと感じます。少なくとも私は一度もサイトマップがあって「便利だな」って感じたことは一度もありません。
ではHTMLサイトマップは無いほうが良いのか？
HTMLサイトマップを設置することによるデメリットも特に無いと考えています。ただ単に内部リンクの集合体ページですのでSEO的にはプラスもマイナスも無いと思います。
つまり、HTMLサイトマップは個人的な好みで設置してしなくても良いと思います。
PS Auto Sitemapインストール
HTMLサイトマップを自動生成するプラグインは、いくつかあります。今回は日本語で作られていて利用してる方も多い、有名な「PS Auto Sitemap」を使って作成します。
さっそく、「HTMLサイトマップ」を自動生成するプラグイン「PS Auto Sitemap」のインストールします。
Word Pressの管理画面の プラグイン ＞ 新規追加 ＞ 「ps auto sitemap」と入力して検索しましょう。
検索結果から「PS Auto Sitemap」の『今すぐインストール』をクリック
インストール完了後は「有効化」をクリックしてプラグインを有効にしましょう。
サイトマップページの作成
サイトマップページの作成
まずは、Word Press管理画面の 設定 ＞ PS Auto Sitemapをクリックして設定画面を開きます。
設定画面の下の方に、「ご使用方法」の項目があります。その中にサイトマップのページに貼り付けるためのコードが表示されているので、選択してコピーしておきます。
ダブルクリック → Ctrl ＋ C
<!-- SITEMAP CONTENT REPLACE POINT -->
この後、作成するサイトマップのページに、このコードを貼り付ける必要があります。
サイトマップページに貼付け用のコードをコピーしたら、次は固定ページにサイトマップページを作成します。
Word Pressの管理画面の 固定ページ ＞ 新規作成 を選んでページの作成を行います。
サイトマップ用の固定ページを作成します。必要に応じて「タイトル」「パーマリンク」「アイキャッチ画像」などの設定を行ってください。
そしてコードエディターモードにした後に、先ほど「PS Auto Sitemap」の設定画面でコピーしたコードを貼り付けます。
Ctrl ＋ V
入力が完了したら、公開ボタンをクリックして「サイトマップ」のページを公開します。
その後、プレビューボタンをクリックして、サイトマップのプレビューを表示させます。
プレビュー画面のURLをチェックすると「ページID」が確認できるので、このIDを覚えておいてください。あとで「PS Auto Sitemap」の設定で使用します。
PS Auto Sitemap の設定
次は「PS Auto Sitemap」の設定を行います。
再度、Word Pressの管理画面 ＞ 設定 ＞ PS Auto Sitemap と順にクリックして設定画面を開きます。
・ホームページの出力
チェックを入れると、トップページヘのリンクが表示されます。トップに戻るリンクは他にあるので、特に表示をさせる必要はないと思います。
・投稿リストの出力
チェックを入れると、投稿した記事へのリンクが表示されます。これを表示させるためにサイトマップを作っている人が多いはずなのでチェックを入れましょう。
・固定ページリストの出力
チェックを入れると、固定ページへのリンクが表示されます。固定ページも表示させたい場合はチェックしましょう。
・サイトマップを表示する記事
この設定無しでは、機能しません。サイトマップ表示させる「ページID」を入力しましょう。
・出力階層制限
カテゴリーの階層をどこまで表示するかを設定できます。指定した階層より下のページは表示されなくなります。
・先に出力するリスト
投稿ページと固定ページの両方を出力する場合に、どちらを先に出力するか設定できます。選択したほうが先に出力されます。
・カテゴリーと投稿の表示
同一のマップ内では、一つのページにすべてのリンクが表示されます。投稿を分割を選ぶとカテゴリー別にページが作られるようになります。
・除外カテゴリー
IDを入力したカテゴリーは出力されなくなります。サイトマップに表示させたくないカテゴリーがある場合はここに入力しましょう。
・除外記事
先程はカテゴリー別の設定ですが、こちらは記事を指定して出力させないようにします。サイトマップに表示させたくない記事がある場合はここに入力しましょう。
・スタイル変更
表示されるサイトマップのスタイルを選ぶ事ができます。好みに合わせて変更して下さい。
・キャッシュの使用
キャッシュ系は競合する場合がありますので、基本的にチェックを外しておいたほうが良いと思います。テーマやプラグインでキャッシュ機能をつかっていなければチェックしても良いかもです。
「PS Auto Sitemap」の設定が完了したら、変更を保存ボタンをクリックして保存します。サイトマップを表示するのページIDだけは必須なので必ず設定しましょう。
サイトマップのページを表示して、ページへのリンクが表示されてれば成功です。
スタイル一覧【１４種類】
スタイルなし
シンプル
シンプル２
チェックリスト
蛍光ペン
ドキュメントツリー
付箋
音符
矢印
ビジネス
索引
アーバン
アンダースコア
キューブ
結構、いろいろな種類のスタイルが選択出来るようになっています。設定を変えながら確認するのが結構大変だったので、スタイルの確認をしたい方は是非参考にしてみてください。
行間が狭いスタイルのものは、スマホで表示させた時に指で選択しにくいので行間が広いスタイが良いですよ。
スタイルシートの問題が出た場合の解決方法
テーマのスタイルシートの設定などと、かぶってしまって変な表示になることもあります。
僕の場合も、おかしな表示になってしまったので、この方法で改善させました。
このように『▶』がテーマのスタイルによって表示してます。『○』と『▶』が続いてなんだか変ですよね？これをCSSの調整で改善していきましょう。
まずは、問題を起こしてる「CSS」を探します。
Google Chromeで問題のページを表示させてデベロッパーツール（検証モード）にします。
右クリック ＞ 検証 もしくは F12
図のとおりクリックして、表示に問題があるCSSの内容を確認します。
.cat-item a::before {
font-family: FontAwesome;
content: '\f0da';
margin-right: 6px;
}僕の場合は、テーマのCSSで上記のように設定されているため、リンクテキストの先頭に『▶』を自動で生成しているのがわかります。
『▶』表示を他で使っていなければ、削除してしまっても問題ないですが、今回は「PS Auto Sitemap」で自動生成されたページの『▶』を表示しないように設定します。
Word Press子テーマのCSSファイルに下記のように追加
#sitemap_list .cat-item a::before {
content: none;
}これで、今まで重複して表示していた『▶』が表示されなくなりました。
まとめ
「PS Auto Sitemap」を使ってHTMLサイトマップを自動生成される方法を解説してきました。
一度、設定が終わってしまえば、その後は自動でサイトマップを作成してくれるので非常に便利ですしユーザービリティの向上にも繋がるのでぜひ作成しましょう。
さて今回はいかがだったでしょうか？
最後まで読んでいただいてありがとうございました。
コメント