HTMLサイトマップは、訪問者がどこに行けばいいのかを示すロードマップのようなものです。サイトマップは、すべてのコンテンツをわかりやすく整理して表示するビジュアルガイドのようなものです。
検索エンジンが使用するXMLサイトマップとは異なり、HTMLサイトマップはサイト訪問者が簡単にコンテンツを探索し、探しているものを見つけられるように設計されています。
このガイドでは、WordPressサイトに役立つHTMLサイトマップを作成し、コンテンツをユーザーフレンドリーでアクセスしやすいライブラリとして読者に提供する方法を紹介します。
XMLサイトマップとHTMLサイトマップの違いとは？
XMLサイトマップとは、Googleなどの検索エンジンに向けて、サイトのコンテンツをXML形式でリスト化したファイルです。
ウェブマスターツールでXMLサイトマップを送信することで、検索エンジンがサイトをクロールする方法を改善し、コントロールすることができます。
一方、HTMLサイトマップは実際のサイト訪問者のためのものです。サイトマップは、あなたの投稿やページをすべて整理して一覧表示するシンプルなページです。
それでは、2つの異なるWordPressプラグインを使って、HTMLサイトマップページをWordPressに追加する方法を見てみましょう。以下のクイックリンクから、使いたい方法に直接ジャンプできます：
動画チュートリアル
もし、文章での説明がお望みなら、このまま読み進めてほしい。
方法1：All In One SEOでWordPressにHTMLサイトマップページを追加する
WordPressでHTMLサイトマップページを追加するには、All In One SEOプラグインを使用することをお勧めします。このプラグインは、300万以上のサイトで使用されている、市場で最高のWordPress SEOプラグインで、クリック数回でHTMLサイトマップを作成できます。
注： All In One SEO Liteには無料版があり、下記のHTMLサイトマップ機能が含まれていますが、スマートサイトマップ、リダイレクトマネージャー、SEOスキーマなどの強力な機能が含まれているため、スクリーンショットではプレミアム版を使用します。
最初に必要なことは、All In One SEOプラグインをインストールすることです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化した後、AIOSEOのセットアップウィザードが開き、プラグインの設定とSEOの正しい設定を案内します。
Let’s Get Started」ボタンをクリックし、手順に従ってください。
その後、WordPressの管理ダッシュボードに移動し、「All In One SEO」という新しいメニューオプションが表示されます。
そして、All In One SEO ” Sitemapsに行き、’HTML Sitemap’メニューオプションをクリックし、’Enable Sitemap’トグルがオンになっていることを確認する必要があります。
次に、HTMLサイトマップの表示方法を選択します。
このチュートリアルでは、「専用ページ」オプションを選択しますが、ショートコード、ブロック、ウィジェットなどとして追加することもできます。
次に、HTMLサイトマップを表示させたいページのURLを入力します。プラグインが自動的に新しいページを作成します。
それができたら、「HTMLサイトマップ設定」セクションまでスクロールダウンしてください。
ここでは、HTMLサイトマップの表示方法をカスタマイズできます。投稿やページの表示、カテゴリーやタグなどのタクソノミー、ソート順などをコントロールできます。
また、「コンパクトアーカイブ」をオンにすると、HTMLサイトマップをコンパクトな日付アーカイブ形式で表示できます。
これは、WPBeginnerの404ページにコンパクトなアーカイブを表示する方法と似ています。
HTMLサイトマップのカスタマイザーが終わったら、必ず「変更を保存」ボタンをクリックしてください。
これで訪問者はHTMLサイトマップを表示し、サイト内をより簡単に移動できるようになります。
上記の「専用ページ」設定を選択した場合は、「HTMLサイトマップを開く」ボタンをクリックすることで、そのページにアクセスすることができます。
方法2：シンプルサイトマップでWordPressにHTMLサイトマップページを追加する
Simple Sitemapは、WordPressサイトにHTMLサイトマップを簡単に追加できる無料のプラグインです。
最初に行う必要があるのは、Simple Sitemapプラグインをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法についての初心者ガイドをご覧ください。
プラグインを有効化したら、既存のページを開くか、ページ ” 新規追加に移動して新しいHTMLサイトマップページを作成することができます。
ブロックを使ったシンプルサイトマップでHTMLサイトマップを追加する
このプラグインには、HTMLサイトマップページを簡単に追加できるGutenbergブロックがあります。
必要なのは、「+」アイコンをクリックし、「シンプルサイトマップ」オプションを選択するだけです。
このプラグインに含まれるもう一つのブロックは、分岐するビジュアルサイトマップを作成する’Simple Sitemap Group’です。しかし、このチュートリアルでは’Simple Sitemap’ブロックを使用します。
ブロックを追加すると、自動的にHTMLサイトマップが作成されます。
右側のメニューにはカスタマイザーオプションがあり、’投稿’か’ページ’、または両方を一緒に表示することができます。
Select post types to display（表示する投稿タイプの選択）」のボックスに、「Post（投稿）」または「Page（ページ）」と入力し、表示する投稿タイプを選択します。
次に、’Orderby’または’Order’ドロップダウンを変更することで、リストの表示方法を変更できます。
また、リストされたページや投稿の抜粋を表示したり、リンクを有効化・無効化することもできます。ただし、HTMLサイトマップをシンプルで閲覧しやすいものにするため、プラグインの初期設定のままにします。
HTMLサイトマップページのカスタマイザーが完了したら、「公開する」をクリックするか、古いページを更新する場合は「保存する」をクリックしてください。
訪問者がHTMLサイトマップにアクセスすると、下のようなナビゲーションページが表示されます。
ショートコードを使ったシンプルサイトマップでHTMLサイトマップを追加する
WordPressにHTMLサイトマップを追加するもうひとつの方法は、ショートコードを使うことです。これにより、HTMLサイトマップの配置をよりコントロールすることができ、クラシックエディターを使っている人にも有効です。
ページ ” 新規追加 で新しいページを作成し、新しいページに名前を付けます。
その後、「プラス」アイコンをクリックして、ページに新しいブロックを追加する。
次に、検索ボックスに「ショートコード」と入力し、「ショートコード」ブロックを選択する。
その後、以下のショートコードのいずれかをコピー＆ペーストしてテキストエディターに貼り付けるだけです。最初のショートコードは投稿をカテゴリー別にリストアップし、2番目のショートコードはページをリストアップします。
[simple-sitemap-group]
[simple-sitemap]
公開したら、「公開する」または「更新」をクリックして変更を保存します。
さらにヘルプが必要な場合は、WordPressにショートコードを追加する方法のガイドをご覧ください。
プラグインがサイト訪問者にサイトマップを表示する方法です。
トップページのみのシンプルサイトマップでHTMLサイトマップを作成する
多くのサイトオーナーはWordPressをCMSとして使用しており、メインコンテンツは投稿ではなくページとして公開しています。詳しくは、WordPressにおける投稿とページの違いをご覧ください。
この場合、HTMLサイトマップに適切な階層順でページを表示させたい。
ここでは、ページだけのHTMLサイトマップを追加する方法を説明します。
HTMLサイトマップを表示したいページにこのショートコードを追加するだけです。WordPressの新規ページにショートコードを追加するには、上記と同じ手順に従ってください：
[simple-sitemap]
このように、WordPressのすべてのページが階層的にリストされたHTMLサイトマップが表示されます。
また、親ページと子ページが入れ子式に表示されます。詳しくは、WordPressで子ページを作成する方法をご覧ください。
WordPressのナビゲーション改善に関するエキスパートガイド
この投稿がWordPressでHTMLサイトマップページを追加する方法を学ぶのにお役に立てば幸いです。WordPressのナビゲーションの改善に関する他のガイドもご覧ください：
- WordPressでビジュアルサイトマップを作成する方法
- WordPressでパンくずナビゲーションのリンクを表示する方法
- WordPressで次へ/前へリンクを追加する方法（究極のガイド）
- WordPressに矢印キーによるキーボードナビゲーションを追加する方法
- WordPressの投稿とページで目次を作成する方法
- WordPressでナビゲーションメニューを追加する方法（初心者ガイド）
- WordPressで縦書きナビゲーションメニューを作成する方法
- WordPressで先頭固定表示ナビゲーションメニューを作成する方法
- WordPressサイトにメガメニューを追加する方法（ステップバイステップ）
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Robert Thompson
WordPress wants me to pay them $300 just to upgrade to their business plan so that I can have access to their plugins. I’ll pass on their offer.
WPBeginner Support
That would be a limitation if you are on WordPress.com, our tutorials are for WordPress.org sites. You can see the difference between the two in our article below!
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
管理者
faraz ahmed
How can i show sitemap specific category wise?
WPBeginner Support
The second plugin from this article should allow you to separate the content by category.
管理者
Carol
Cannot get POSTS to show like pages do, so it’s useless for me. On my site, pages are static stuff, About, etc. But posts are the new items that people want to see right away. I do research on various topics and that is the heart and soul of my blog. I want them to see the new stuff in order on that subject, in a list. I really don’t care about Pages, Privacy, Cookies, About, stuff you look at once, maybe, if ever
I have experimented with the code, get only the CODE on the finished page.
What can I do?
WPBeginner Support
Hi Carol,
Please see our article on how to add topics in WordPress navigation menus.
管理者
Shawn
I’d like to generate a sitemap page with all my woocommerce shop categories and products. Can this plugin do that?
Raghvendra singh Jadon
can’t we make a sitemap page like privacy policy or contact us
deepa
is it possible if we can create our own sitemap
shirish
really very nice and useful article.
ibu solihatun
The article is very interesting. Helped me understand many things and will be happy soon to write like again.
Memory
Thank you so very much, this site map is amazingly fine-tuned, absolutely perfect, and saved me a great deal of time.
srekanth
how can i create the xml sitemap like html site is there any possibilites
adilop
Sir, sitemap of yoast plugin isn’t enough?
WPBeginner Support
Please read the section about the difference between XML and HTML sitemaps.
管理者
adilop
Thanks for your suggestion sir.
Blane Beckwith
I added an HTML site map to my webpage, and it made a very nice looking, and functional archive page.
Connor Rickett
Never a bad idea to have a sitemap for your visitors. Just as a side note, when/if you submit your sitemap to Google, make sure it’s the XML one!
Natascha
What I do miss though is, why would someone need a HTML sitemap or when is it recommended? Maybe a short pro and cons list would help. Thanks
WPBeginner Support
It is more useful for sites with static and non-chronological content, i.e. pages. A sitemap page can help users see all the pages in their hierarchical order.
管理者