ほとんどのWordPressサイトには、すべてを1か所にまとめた単一のページがなく、訪問者はメニューや検索に頼って正しいコンテンツを見つけなければなりません。
HTMLサイトマップは、すべての重要なコンテンツを1つのページにまとめることでこれを解決します。このガイドでは、プラグインを使用して作成する方法と、コードスニペットを使用しない方法を説明します。
XMLサイトマップとHTMLサイトマップの違いとは？
XMLサイトマップは、Googleなどの検索エンジンが読み取れる形式で、ウェブサイトのすべてのコンテンツを一覧表示するファイルです。検索エンジンがページをより速く見つけてクロールするのを助けるために、Google Search Consoleに送信できます。
HTMLサイトマップは異なる方法で機能します。ショッピングモールの案内板のようなものだと考えてください。
検索エンジンを誘導する代わりに、訪問者を誘導し、投稿やページを1つの整理されたページに一覧表示して、人々が求めているものをすばやく見つけられるようにします。
違いがわかったところで、WordPressサイトにHTMLサイトマップを追加する方法を見てみましょう。下のクイックリンクを使用して、使用したい方法に直接ジャンプできます。
方法1：All in One SEOでWordPressにHTMLサイトマップページを追加する
無料のAll in One SEOプラグインのようなWordPress SEOプラグインを使用すると、数回クリックするだけでHTMLサイトマップページを追加する最も簡単な方法です。
プラグインはすでにXMLサイトマップとコアSEO設定を処理しているため、これのためだけに別のツールをインストールする代わりに、同じ場所から両方を管理できます。
まず、プラグインをインストールしてアクティブ化する必要があります。アクティブ化すると、セットアップウィザードが開きます。ここで「始めましょう」ボタンをクリックできます。
各設定の完全なウォークスルーが必要な場合は、WordPressでAll in One SEOを設定する方法に関するガイドを参照してください。
完了したら、**All in One SEO » Sitemaps**に移動し、「HTML Sitemap」タブをクリックします。次に、「Sitemapを有効にする」トグルをオンにします。
次に、サイトマップを表示する方法を選択します。このチュートリアルでは、「専用ページ」オプションを選択します。または、ショートコード、ブロック、ウィジェットとして追加することもできます。
それが完了したら、サイトマップを表示したいURLを入力すると、プラグインが自動的にそのページを作成します。
注意：All in One SEOは動的にこのページを作成するため、WordPress管理エリアのページリストには表示されません。この設定画面に戻ればいつでも変更できます。
次に、「HTML Sitemap Settings」セクションまでスクロールします。ここで、サイトマップに表示する投稿タイプとタクソノミー（カテゴリやタグなど）を選択できます。
より詳細な制御が必要な場合は、「詳細設定」で特定の投稿、ページ、またはタームをリストから除外できます。
完全なリストではなく、サイトマップをコンパクトな日付アーカイブとして表示したい場合は、「Compact Archives」をオンにすることもできます。設定に満足したら、「変更を保存」をクリックします。
HTMLサイトマップが公開されました。「専用ページ」オプションを選択した場合、「HTMLサイトマップを開く」ボタンをクリックすると表示できます。
方法2：コードを使用してWordPressにHTMLサイトマップページを追加する
All in One SEOの他の機能が不要なため使用したくない場合は、子テーマのfunctions.phpファイルにカスタムコードを追加することでHTMLサイトマップを作成できます。
しかし、わずかな間違いでもサイト全体が破損し、WordPressのホワイトスクリーンオブデスを引き起こす可能性があります。
そのため、WPCodeのようなコードスニペットプラグインの使用をお勧めします。無料版では、テーマファイルを編集せずに安全にコードを追加および管理できます。
まず、WPCodeプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
有効化したら、WordPressダッシュボードからコードスニペット » + スニペットを追加に移動します。「カスタムコードを追加（新規スニペット）」にカーソルを合わせ、「スニペットを使用」をクリックします。
新しい画面で、コードタイプとして「PHPスニペット」を選択し、後で見つけやすいようにスニペットにタイトルを付けます。「HTMLサイトマップ」のようなもので構いません。
次に、以下のコードを「コードプレビュー」ボックスに貼り付けます。
function custom_html_sitemap() {
$out = '<ul class="custom-sitemap">';
// Pages
$pages = get_pages(
array(
'sort_column' => 'menu_order,post_title',
'post_status' => 'publish',
)
);
foreach ( $pages as $page ) {
$out .= sprintf(
'<li><a href="%s">%s</a></li>',
esc_url( get_permalink( $page->ID ) ),
esc_html( get_the_title( $page->ID ) )
);
}
// Recent posts
$recent_posts = get_posts(
array(
'posts_per_page' => 50,
'post_status' => 'publish',
'orderby' => 'date',
'order' => 'DESC',
'post_type' => 'post',
'ignore_sticky_posts' => true,
)
);
foreach ( $recent_posts as $p ) {
$out .= sprintf(
'<li><a href="%s">%s</a></li>',
esc_url( get_permalink( $p->ID ) ),
esc_html( get_the_title( $p->ID ) )
);
}
$out .= '</ul>';
return $out;
}
add_shortcode( 'custom_html_sitemap', 'custom_html_sitemap' );
このコードは、公開済みのすべてのページを最初にリストし、次に最も最近の投稿50件をリストし、すべてを[custom_html_sitemap]というショートコードにラップします。このショートコードは任意のページに配置できます。
完了したら、上部にあるスイッチを「非アクティブ」から「アクティブ」に切り替え、「スニペットを保存」をクリックします。
次に、ページ » 新規追加に移動して新しいページを作成するか、サイトマップを表示したい既存のページを開きます。「ショートコード」ブロックを追加し、以下のショートコードを貼り付けます。
[custom_html_sitemap]
ページを公開すると、訪問者はページと最近の投稿のシンプルなリストを見ることができ、すべてリンクされており、閲覧準備が整っています。
HTMLサイトマップ FAQ
HTMLサイトマップはSEOに良いですか？
はい。HTMLサイトマップは、サイトのすべての重要なページへの内部リンクを追加するため、検索エンジンがコンテンツを発見するのに役立ちます。また、訪問者にとってサイトのナビゲーションが容易になります。
新しいコンテンツを追加したときに、HTMLサイトマップは自動的に更新されますか？
はい。All in One SEOを使用する場合でも、上記のカスタムコード方法を使用する場合でも、新しい投稿やページを公開するたびにサイトマップは自動的に更新されます。最新の状態を保つために追加の作業を行う必要はありません。
HTMLサイトマップはどこに置くべきですか？
HTMLサイトマップへのリンクを配置する最も一般的な場所は、ウェブサイトのフッターです。これにより、メインのナビゲーションメニューを煩雑にすることなく、どのページからでもアクセスできます。
もう1つの良い場所は、404エラーページです。訪問者が壊れたリンクに着地した場合、HTMLサイトマップへのリンクは、探していたものを見つけるのに役立ちます。
新しいHTMLサイトマップページをナビゲーションメニューに追加するにはどうすればよいですか？
サイトマップを公開したら、WordPress管理ダッシュボードの外観 » メニューに移動して、任意のメニューに追加します。カスタムコード方法を使用した場合は、新しいページの前にあるチェックボックスをオンにします。
ただし、All in One SEOを使用した場合は、動的に作成されたページは「ページ」リストに表示されません。サイトマップのURLを貼り付けるには、「カスタムリンク」タブをクリックする必要があります。
ブロックテーマを使用している場合は、代わりにサイトエディターからリンクを追加する必要があります。
動画チュートリアル
この記事がWordPressにHTMLサイトマップページを追加する方法を学ぶのに役立ったことを願っています。また、WordPressでパンくずナビゲーションを表示する方法や、包括的なWordPress SEOガイドもご覧ください。
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
Linh
今のところ、これらの2つの方法は私のウェブサイトには適用されません。なぜなら、HTMLサイトマップに表示したい特定のカテゴリのみを選択したいからです。AIOSEOもSimpleSitemapもそれを許可していません。もちろん、詳細設定（AIOのみにあります）も試しましたが、サイトマップから除外する投稿やページをすべて手動で選択しなければなりません。この手動での選択という要件は、HTMLサイトマップを作成するためにプラグインを使用する目的を完全に台無しにします。
このAIO（wpbeginnerが毎回宣伝していて、まるで万能プラグインのように感じさせます）に関するもう一つの点は、パンくずリストについてです。
AIOのこの機能はURLのロジックに従っていません！具体的には、ウェブサイト上で見栄えは良いのですが、前のページ（または親ページ）に戻るためにクリックすると、ウェブサイトを閲覧する際に人間が必ず行うことですが、別のページ（アーカイブページ）に移動してしまいます。AIOはそうします。個人的には理解できません。
私にとって、SEOツールを除けば、AIOはセルフホスト型ウェブサイトに関しては、役に立たないとは言わないまでも、あまりにも基本的な機能を提供しています。
WPBeginnerサポート
フィードバックありがとうございます。もし、すべての投稿やページをまとめたコレクションではなく、特定のページに投稿やページの一部だけを表示したい場合は、ご希望のリストを手動で作成することをお勧めします。これにより、ご希望のものが達成できるはずです。もし、目指している目標を誤解している場合は、お知らせください。
パンくずリストに関するご指摘についてですが、パンくずリストはコンテンツの組織構造へのリンクを目的としており、特定のバックボタンではありません。通常、これはブラウザや別の方法で行われます。
管理者
イジー・ヴァネック
私は常にサイトマップをSEOを改善し、Googleなどの検索エンジンボットに私のページのコンテンツを示すためのツールと考えてきました。時々、検索エンジンに集中しすぎて、通常のユーザーがウェブサイトをより利用しやすくすることを忘れてしまうことがあります。HTMLサイトマップを作成し、ウェブサイトに配置したので、人々がコンテンツをより簡単にナビゲートできるようになります。サイトマップがロボットと同じくらいユーザーにも役立つという新しい洞察をありがとうございます。
デニス・ムトミ
WPBeginner様、この有益な記事をありがとうございます。
私は常に検索エンジンのためのXMLサイトマップに焦点を当てていましたが、今ではユーザーナビゲーションのためのHTMLサイトマップの価値を理解しています。
All in One SEOの使用方法についての説明をありがとうございます。
ロバート・トンプソン
WordPressは、プラグインにアクセスするためにビジネスプランにアップグレードするために300ドルを支払うように求めています。そのオファーはパスします。
WPBeginnerサポート
WordPress.comをご利用の場合は制限となります。当社のチュートリアルはWordPress.orgサイト向けです。両者の違いは以下の記事で確認できます！
https://014.leahstevensyj.workers.dev/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
管理者
ファラズ・アフメド
カテゴリ別にサイトマップを表示するにはどうすればよいですか？
WPBeginnerサポート
この記事の2番目のプラグインは、カテゴリ別にコンテンツを分離できるはずです。
管理者
キャロル
POSTSがページのように表示されないため、私には役に立ちません。私のサイトでは、ページは静的なもの（Aboutなど）です。しかし、投稿は人々がすぐに確認したい新しいアイテムです。私は様々なトピックについて調査しており、それが私のブログの心臓部です。それらの新しいものを、そのトピックごとにリスト形式で順序立てて見てもらいたいのです。一度見て、もし見るとしても、About、Privacy、Cookiesのようなページはあまり気になりません。
コードを試しましたが、完成したページにはコードしか表示されません。
どうすればよいですか？
WPBeginnerサポート
キャロルさん、
WordPressナビゲーションメニューにトピックを追加する方法については、この記事をご覧ください。
管理者
ショーン
すべての WooCommerce ショップカテゴリと製品を含むサイトマップページを生成したいのですが。このプラグインで可能ですか？
Raghvendra singh Jadon
プライバシーポリシーやお問い合わせページのようなサイトマップページを作成することはできませんか？
deepa
独自のサイトマップを作成することは可能ですか
shirish
本当にとても良い、役立つ記事です。
ibu solihatun
この記事は非常に興味深いです。多くのことを理解するのに役立ちました。すぐにまたこのように書けることを楽しみにしています。
メモリ
本当にありがとうございます。このサイトマップは驚くほど微調整されており、完全に完璧で、多くの時間を節約できました。
srekanth
HTMLサイトのようなXMLサイトマップを作成するにはどうすればよいですか？可能性はありますか？
adilop
サー、Yoastプラグインのサイトマップでは不十分ですか？
WPBeginnerサポート
XML サイトマップと HTML サイトマップの違いに関するセクションをお読みください。
管理者
adilop
ご提案ありがとうございます。
Blane Beckwith
ウェブページにHTMLサイトマップを追加したところ、非常に見栄えの良い、機能的なアーカイブページになりました。
コナー・リケット
訪問者のためにサイトマップを用意しておくことは、決して悪い考えではありません。ちなみに、サイトマップをGoogleに送信する際は、XMLのものを使用してください！
Natascha
ただ、HTMLサイトマップが必要な理由や、いつ推奨されるのかが分かりません。長所と短所のリストがあれば役立つかもしれません。ありがとうございます。
WPBeginnerサポート
静的で非時系列のコンテンツ、つまりページが多いサイトに特に役立ちます。サイトマップページは、ユーザーがすべてのページを階層順に確認するのに役立ちます。
管理者