- HTMLサイトマップ(読者向け)の作り方を知りたい!
- 手動とプラグインでやる方法があるって聞いたけど自分におすすめなのは?
- 画像つきで手取り足取り教えてほしい!
読者向けにサイトマップを作成することはSEOにいい影響をもたらします。
利便性が上がることで、読者満足度や回遊率が向上するからです。
この記事ではHTMLサイトマップの作成方法(2種類)を画像つきでわかりやすく解説しています。
サイトマップがSEOにもたらす効果を詳しく知りたい方は以下の記事をご覧ください。
- HTMLサイトマップの2つの作成方法
- サイトマップ作成後にやるべき1つのこと
この記事を読めば、だれでも簡単にHTMLサイトマップを作成できるようになります。
(合わせて自分におすすめの作成方法もわかります。)
- 手動で作成する方法
ページ表示速度を落としたくない人向け - プラグインを使用する方法
面倒な管理なしでサイトマップを作りたい人向け
下のボタンからお好きな方へ↓
![](https://www.shibayu-blog.com/wp-content/uploads/2021/06/shibayu-human.jpg)
読者のためにもHTMLサイトマップを作っておきましょう!
運営者プロフィール・Twitter(@shibayu_blog)
手動でHTMLサイトマップを作成する方法
![手動でHTMLサイトマップを作成する方法](https://www.shibayu-blog.com/wp-content/uploads/2021/03/①固定ページを作成-1024x853.png)
![手動でHTMLサイトマップを作成する方法](https://www.shibayu-blog.com/wp-content/uploads/2021/03/①固定ページを作成-1024x853.png)
- 固定ページの作成
- カテゴリ等で見出しを作り記事タイトルを貼り付け
- タイトルに記事URLをリンク
- アドセンス広告を非表示
手動によるHTMLサイトマップ作成のメリット・デメリットは以下のとおりです。
![](https://www.shibayu-blog.com/wp-content/uploads/2021/06/shibayu-human.jpg)
![](https://www.shibayu-blog.com/wp-content/uploads/2021/06/shibayu-human.jpg)
![](https://www.shibayu-blog.com/wp-content/uploads/2021/06/shibayu-human.jpg)
ページ表示速度を落としたくない方にオススメです!
①固定ページの作成
![固定ページを作成する](https://www.shibayu-blog.com/wp-content/uploads/2021/03/Untitled-design-12-1024x853.png)
![固定ページを作成する](https://www.shibayu-blog.com/wp-content/uploads/2021/03/Untitled-design-12-1024x853.png)
はじめに固定ページを作成しましょう。
ここで作成する固定ページがサイトマップになります。
(1)固定ページを「新規追加」
WordPressの管理画面で「固定ページタブ」内「新規追加」をクリックしてください。
![WordPressの管理画面で「固定ページタブ」内「新規追加」をクリック](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-13.png)
![WordPressの管理画面で「固定ページタブ」内「新規追加」をクリック](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-13.png)
(2)タイトルを「サイトマップ」にする。
![タイトルをサイトマップに変更する](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-14-1024x326.png)
![タイトルをサイトマップに変更する](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-14-1024x326.png)
(3)パーマリンクを英語表記に変える。
編集画面右側の「投稿タブ」内「パーマリンク」で変更できます。
![パーマリンクをsitemapに変更する](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-24.png)
![パーマリンクをsitemapに変更する](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-24.png)
②カテゴリ等で見出しを作り記事タイトルを貼り付け
![テキストリンクを貼り付ける](https://www.shibayu-blog.com/wp-content/uploads/2021/03/Untitled-design-13-1024x853.png)
![テキストリンクを貼り付ける](https://www.shibayu-blog.com/wp-content/uploads/2021/03/Untitled-design-13-1024x853.png)
(1)カテゴリをH2に、カテゴリの中の小さなトピックをH3に設定する。
(トピックが多い場合はH4を使っても大丈夫です。)
![カテゴリを見出しに設定する](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-15-1024x788.png)
![カテゴリを見出しに設定する](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-15-1024x788.png)
(2)記事タイトルをコピーして貼り付ける。
記事タイトルは記事編集画面や実際の記事内からコピーしてきて貼り付ければOKです。
![記事タイトルを貼り付ける](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-16-1024x561.png)
![記事タイトルを貼り付ける](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-16-1024x561.png)
記事タイトルが長ければ、不要な部分を短くすることも可です。
スッキリして読者が見やすいサイトマップになります。
(要点は残して変更しましょう。)
【SEO初心者】ブログにおける見出しの書き方|4つの基本ルールとNG行動
➡見出しの書き方|4つの基本ルールとNG行動
③タイトルに記事URLをリンク
![URLをリンクする](https://www.shibayu-blog.com/wp-content/uploads/2021/03/Untitled-design-14-1024x853.png)
![URLをリンクする](https://www.shibayu-blog.com/wp-content/uploads/2021/03/Untitled-design-14-1024x853.png)
(1)貼り付けた記事タイトルに記事URLをリンクする。
URLは実際の記事からコピーして貼り付けてください。
(編集画面からURLを取得すると管理画面のURLを開いてしまいます。)
![URLをコピーする](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-17.png)
![URLをコピーする](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-17.png)
![記事URLをリンクする](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-18-1024x603.png)
![記事URLをリンクする](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-18-1024x603.png)
④アドセンス広告を非表示に
![広告を非表示にする](https://www.shibayu-blog.com/wp-content/uploads/2021/03/Untitled-design-15-1024x853.png)
![広告を非表示にする](https://www.shibayu-blog.com/wp-content/uploads/2021/03/Untitled-design-15-1024x853.png)
(1)「この記事で広告を表示しない」にチェック。
記事の編集画面右側の「固定ページタブ」内「この記事で広告を表示しない」にチェックしましょう。
![「この記事で広告を表示しない」にチェックする](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-19.png)
![「この記事で広告を表示しない」にチェックする](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-19.png)
以上でHTMLサイトマップが完成となります。(以下完成イメージ)
![サイトマップが完成](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-20-801x1024.png)
![サイトマップが完成](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-20-801x1024.png)
プラグインを使ってHTMLサイトマップを作成する方法
![プラグインを使ってHTMLサイトマップを作成する方法](https://www.shibayu-blog.com/wp-content/uploads/2021/03/②固定ページを作成-HTML貼付け-1024x853.png)
![プラグインを使ってHTMLサイトマップを作成する方法](https://www.shibayu-blog.com/wp-content/uploads/2021/03/②固定ページを作成-HTML貼付け-1024x853.png)
- 「PS Auto Sitemap」をインストール・有効化
- 固定ページを作成しカスタムHTMLを貼り付ける
- 「PS Auto Sitemap」の詳細設定
- カテゴリの順番を整える
プラグインによるHTMLサイトマップ作成のメリット・デメリットは以下のとおりです。
![](https://www.shibayu-blog.com/wp-content/uploads/2021/06/shibayu-human.jpg)
![](https://www.shibayu-blog.com/wp-content/uploads/2021/06/shibayu-human.jpg)
![](https://www.shibayu-blog.com/wp-content/uploads/2021/06/shibayu-human.jpg)
面倒な管理なしでサイトマップを作りたい方にオススメです!
①「PS Auto Sitemap」をインストール・有効化
![「PS Auto Sitemap」をインストール・有効化](https://www.shibayu-blog.com/wp-content/uploads/2021/03/Untitled-design-16-1024x853.png)
![「PS Auto Sitemap」をインストール・有効化](https://www.shibayu-blog.com/wp-content/uploads/2021/03/Untitled-design-16-1024x853.png)
(1)プラグイン追加画面で「PS Auto Sitemap」を検索
PS Auto Sitemap
上記をコピーして検索タブに貼り付けてください。
(2)「PS Auto Sitemap」をインストール・有効化
画像のプラグインですので間違えないようにしてください。
![「PS Auto Sitemap」をインストール](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-21.png)
![「PS Auto Sitemap」をインストール](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-21.png)
②固定ページを作成しカスタムHTMLを貼り付ける
![固定ページにHTMLを貼り付ける](https://www.shibayu-blog.com/wp-content/uploads/2021/03/Untitled-design-17-1024x853.png)
![固定ページにHTMLを貼り付ける](https://www.shibayu-blog.com/wp-content/uploads/2021/03/Untitled-design-17-1024x853.png)
次に固定ページを作成しましょう。
ここで作成する固定ページがサイトマップになります。
(1)固定ページを「新規追加」
WordPressの管理画面で「固定ページタブ」内「新規追加」をクリックしてください。
![固定ページを新規作成する](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-13.png)
![固定ページを新規作成する](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-13.png)
(2)タイトルを「サイトマップ」にする。
![タイトルを「サイトマップ」に変更する](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-14-1024x326.png)
![タイトルを「サイトマップ」に変更する](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-14-1024x326.png)
(3)作成した固定ページにカスタムHTMLを貼り付ける。
記事投稿画面で「/html(半角スラッシュ+HTML)」と入力してください。
![カスタムHTMLをクリックする](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-22-1024x296.png)
![カスタムHTMLをクリックする](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-22-1024x296.png)
コード入力タブが表示されるため、以下のコードを入力してください。(コピペでOKです。)
<!-- SITEMAP CONTENT REPLACE POINT -->
![カスタムHTMLの入力バーにコードを入力する](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-23-1024x186.png)
![カスタムHTMLの入力バーにコードを入力する](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-23-1024x186.png)
(4)パーマリンクを英語表記に変える。
編集画面右側の「投稿タブ」内「パーマリンク」で変更できます。
![パーマリンクをsitemapに変更する](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-24.png)
![パーマリンクをsitemapに変更する](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-24.png)
③「PS Auto Sitemap」の設定
![「PS Auto Sitemap」を設定する](https://www.shibayu-blog.com/wp-content/uploads/2021/03/Untitled-design-18-1024x853.png)
![「PS Auto Sitemap」を設定する](https://www.shibayu-blog.com/wp-content/uploads/2021/03/Untitled-design-18-1024x853.png)
(1)「PS Auto Sitemap」設定ページに移動する。
WordPress管理画面の「設定タブ」内「PS Auto Sitemap」をクリックしてください。
![WordPressの設定から「PS Auto Sitemap」をクリックする](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-25.png)
![WordPressの設定から「PS Auto Sitemap」をクリックする](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-25.png)
(2)「PS Auto Sitemap」の詳細設定を行う。
下の画像のとおりに設定をしてください。
![「PS Auto Sitemap」の詳細設定を行う](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-26-1024x819.jpg)
![「PS Auto Sitemap」の詳細設定を行う](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-26-1024x819.jpg)
入力に困りやすい以下のポイントについて解説します。
- サイトマップを表示する記事
- 除外記事・除外カテゴリ
【サイトマップを表示する記事】
「サイトマップを表示する記事」には、先程作成した固定ページ(サイトマップ)の記事IDを入力します。
記事IDは、記事編集画面上部のURL内で確認できます。
「post=」の後ろの数字をコピーしてください。
![先ほど作った固定ページの記事IDをコピーする](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-27-1024x159.png)
![先ほど作った固定ページの記事IDをコピーする](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-27-1024x159.png)
コピーしたIDを以下の通り入力すればOKです。
![コピーした記事IDを入力する](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-28-1024x159.png)
![コピーした記事IDを入力する](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-28-1024x159.png)
【除外記事・除外カテゴリ】
WordPress管理画面の「投稿タブ」で「記事一覧」または「カテゴリー」を選択します。
![投稿一覧またはカテゴリーを選択する](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-29-1024x321.png)
![投稿一覧またはカテゴリーを選択する](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-29-1024x321.png)
<記事IDの確認方法>
記事IDは以下画像の赤枠部に表示されています。
![記事IDを確認する](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-30-1024x119.png)
![記事IDを確認する](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-30-1024x119.png)
表示したくない記事の記事IDをコピーし、
「PS Auto Sitemap」の設定画面に貼り付けてください。(複数の場合は「,」で区切る)
<カテゴリーIDの確認方法>
カテゴリーIDは以下画像の赤枠部に表示されます。
![カテゴリーの記事IDを入力する](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-31.png)
![カテゴリーの記事IDを入力する](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-31.png)
表示したくないカテゴリーのカテゴリーIDをコピーし、
「PS Auto Sitemap」の設定画面に貼り付けてください。(複数の場合は「,」で区切る)
④カテゴリの順番を整える
![カテゴリの順番を入れ替える](https://www.shibayu-blog.com/wp-content/uploads/2021/03/Untitled-design-19-1024x853.png)
![カテゴリの順番を入れ替える](https://www.shibayu-blog.com/wp-content/uploads/2021/03/Untitled-design-19-1024x853.png)
ここまででサイトマップは完成しましたが、
このままではカテゴリIDが若い順に記事が並んでしまいます。
![そのまま設定するとカテゴリIDをの番号が若い順に並んでしまう。](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-32-1024x653.png)
![そのまま設定するとカテゴリIDをの番号が若い順に並んでしまう。](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-32-1024x653.png)
サイトマップに表示される順番を変更したいときは、追加でプラグインを入れることで解決できます。
(1)プラグイン追加画面で「Category Order and Taxonomy Terms Order」を検索
Category Order and Taxonomy Terms Order
上記をコピーして検索タブに貼り付けてください。
(2)「Category Order and Taxonomy Terms Order」をインストール・有効化
画像のプラグインですので間違えないようにしてください。
![「Category Order and Taxonomy Terms Order」をインストール](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-33.png)
![「Category Order and Taxonomy Terms Order」をインストール](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-33.png)
(3)「Category Order and Taxonomy Terms Order」設定ページに移動する。
有効化したら「投稿タブ」内の「Taxonomy Order」をクリックします。
![「Category Order and Taxonomy Terms Order」をクリックする](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-34-1024x373.png)
![「Category Order and Taxonomy Terms Order」をクリックする](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-34-1024x373.png)
(4)ドラッグでカテゴリーの順番を入れ替える
ドラッグすることでカテゴリーの順番を入れ替えることが出来ます。
順番を入れ替えたら「更新ボタン」をクリックしてください。
![ドラッグでカテゴリの順番を入れ替える](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-35-1024x696.png)
![ドラッグでカテゴリの順番を入れ替える](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-35-1024x696.png)
更新ボタンを押してサイトマップに戻ってみると、カテゴリの順番が入れ替わっていることがわかると思います。(再読み込みしてくださいね)
(5)公開前に!「この記事で広告を表示しない」にチェック
記事の編集画面右側の「固定ページタブ」内「この記事で広告を表示しない」にチェックしましょう。
![「この記事で広告を表示しない」にチェック](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-19.png)
![「この記事で広告を表示しない」にチェック](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-19.png)
以上でHTMLサイトマップが完成となります。(以下完成イメージ)
![HTMLサイトマップが完成](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-36-1024x643.png)
![HTMLサイトマップが完成](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-36-1024x643.png)
サイトマップはどのページからでもアクセス可能にする
HTMLサイトマップはどのページからでもアクセスできる場所に設定してください。
読者が見つけづらくては、せっかく作成しても意味がないからです。
オススメはグローバルナビゲーションに設定することです。(以下イメージ)
![シバログのグローバルナビゲーション](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-11-1024x191.png)
![シバログのグローバルナビゲーション](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-11-1024x191.png)
グローバルナビゲーションにサイトマップを登録する手順は以下のとおり。
(JINの場合を解説しますが、どのテーマでもそこまで変わりません。)
(1)「メニュー」設定画面を開く
WordPress管理画面から「外観タブ」内「メニュー」をクリックしてください。
![外観からメニューをクリックする](https://www.shibayu-blog.com/wp-content/uploads/2021/03/メニュー-‹.png)
![外観からメニューをクリックする](https://www.shibayu-blog.com/wp-content/uploads/2021/03/メニュー-‹.png)
(2)グローバルナビゲーションを選択
![グローバルナビゲーションを選択する](https://www.shibayu-blog.com/wp-content/uploads/2021/03/メニュー-‹-2-1024x151.png)
![グローバルナビゲーションを選択する](https://www.shibayu-blog.com/wp-content/uploads/2021/03/メニュー-‹-2-1024x151.png)
(3)「サイトマップ」を「グローバルナビゲーション」に追加
「サイトマップ」チェック、「メニューに追加」ボタンをクリックしてください。
![サイトマップにチェックをしてメニューに追加をクリックする](https://www.shibayu-blog.com/wp-content/uploads/2021/03/メニュー-‹-1.png)
![サイトマップにチェックをしてメニューに追加をクリックする](https://www.shibayu-blog.com/wp-content/uploads/2021/03/メニュー-‹-1.png)
「メニューを保存」ボタンを押したら設定完了です。(以下完成イメージ)
![グローバルナビゲーションへのサイトマップ設定が完了](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-11-1024x191.png)
![グローバルナビゲーションへのサイトマップ設定が完了](https://www.shibayu-blog.com/wp-content/uploads/2021/03/image-11-1024x191.png)
まとめ|HTMLサイトマップの作成方法は2種類
この記事ではHTMLサイトマップの2つの作成方法を解説しました。
【こんなひとにおすすめ!】
ページ表示速度を落としたくない人
【作成ステップ】
- 固定ページの作成
- カテゴリ等で見出しを作り記事タイトルを貼り付け
- タイトルに記事URLをリンク
- アドセンス広告を非表示
【こんなひとにおすすめ!】
面倒な管理なしでサイトマップを作りたい人
【作成ステップ】
- 「PS Auto Sitemap」をインストール・有効化
- 固定ページを作成しカスタムHTMLを貼り付ける
- 「PS Auto Sitemap」の詳細設定
- カテゴリの順番を整える
サイトマップはどのページからでもアクセス可能にする
![](https://www.shibayu-blog.com/wp-content/uploads/2021/06/shibayu-human.jpg)
![](https://www.shibayu-blog.com/wp-content/uploads/2021/06/shibayu-human.jpg)
![](https://www.shibayu-blog.com/wp-content/uploads/2021/06/shibayu-human.jpg)
サイトマップで読者の利便性アップ=SEO評価アップ!
コメント
コメント一覧 (3件)
こんにちは、はじめまして。
いつもブログみて勉強にさせていただいています。
固定ページから手動でHTMLサイトマップを作成して完成したのですが、そのあと公開を押せばサイトマップ完成という意味でいいのでしょうか?
無知な質問で申し訳ありません。
としブログさま、はじめまして。
コメントいただきありがとうございます🙇♂️
返信遅くなり、大変申し訳ありません。
サイトマップを作成できましたら『公開』を押せばOKです。
あとはグローバルナビゲーション等わかりやすい場所に表示させれば完了となります☺️
返信返していただき誠にありがとうございます。
さっそく作成して反映させました。
これからも勉強させていただきます。