HTMLサイトマップとは、Webサイト内に存在するコンテンツがカテゴリーごとやリスト形式で整理・表示されている一覧ページのことです。 今回はHTMLサイトマップに焦点を当て、その概要やSEOとの関係性、作成方法、作成例などをご紹介します。気になるポイントを一挙確認してしまいましょう。

HTMLサイトマップとは？

HTMLサイトマップとは、Webサイト内に存在するコンテンツがカテゴリーごとやリスト形式で整理・表示されている一覧ページのことです。

初めてWebサイトを訪問したユーザーはどこに、どのようなコンテンツがあるのか分かりません。

そのため、離脱率の向上や滞在時間の低下、機会損失などへとつながります。。

HTMLサイトマップを設置すれば、ユーザーが目的のコンテンツを探しやすくなるため、ユーザビリティを高め、機会損失を防ぐ効果が期待できます。

HTMLサイトマップとSEOとの関係性

2022年8月現在、検索エンジンがWebサイトを巡回する際に用いるのはXMLサイトマップだとGoogleが「サイトマップの概要」で公言しています。そのため、、HTMLサイトマップに直接的なSEO効果はないと言われています。

しかし、先ほども解説しましたが、HTMLサイトマップを設置することで離脱率の低下や滞在時間の向上、機会損失の防止などユーザビリティの向上に期待できます。

その結果、GoogleからのWebサイトやページの高い評価を得ることができるため、HTMLサイトマップの設置には間接的なSEO施策としての効果があります。

SEOとは？基礎知識と初心者がやるべき対策をわかりやすく解説

自社サイトの流入数を増やし、ビジネスを成長させるにはSEO対策(検索エンジン最適化)が欠かせません。このページでは初心者の方でもわかりやすいように、「SEO対策がそもそもどのようなものなのか？」を解説します。基本的な概念をどこよりもわかりやすくご紹介するので、SEO対策を検討されている方はぜひ参考にしてみてください。

HTMLサイトマップとXMLサイトマップの違い

(引用：https://www.willgate.co.jp/promonista/glossary-sitemapxml/)

XMLサイトマップとは、検索エンジン向けにWebサイト内の各ページ情報（URLや最終更新日、更新頻度、優先度など）を記載したファイルです。

基本的に、検索エンジンはXMLサイトマップを参考にWebサイト内を巡回します。

その際、新規作成したページは検索エンジンが発見するまで時間がかかるのです。

しかし、XMLサイトマップを設置することで、検索エンジンに正確な情報を伝達し、素早く自サイトの更新情報を反映できます。その結果、スピーディに検索結果に自サイトのページ表示させることができます。

つまり、XMLサイトマップはクローラビリティを向上させる効果があり、その結果SEO効果が期待できるのです。

なおXMLサイトマップに関する詳細は、以下のページをご覧ください。

サイトマップとは？XML、HTMLなどの種類やSEOへの効果、作り方を解説

サイトマップは、サイト全体を構成するページの一覧を記載した樹形図のような資料です。ユーザーや検索エンジンにサイトの内容を伝える役割があり、ユーザビリティとクローラビリティの向上を目的としています。サイトマップの設置を考えている方は、サイトマップを最大限に活用できるようSEOへの効果や作り方を確認しておきましょう。

XMLサイトマップ(sitemap.xml)とは？WordPressでの書き方・作り方や設定方法

XMLサイトマップとは、検索エンジン向けにWebサイト内の各ページ情報（URLや最終更新日、更新頻度、優先度など）を記載したファイルです。 今回はXMLサイトマップに焦点を当て、その概要や役割、SEO効果、生成方法、構成要素、生成時の注意点などをご紹介します。気になるポイントを一挙確認してしまいましょう。

HTMLサイトマップを作成するメリット

HTMLサイトマップを設置すれば、ユーザビリティの向上が期待できます。

Webサイトの運営者はページ設定を把握しているため、Webサイトの閲覧に不便を感じることは少ないでしょう。

しかし、初めてWebサイトに訪問するユーザーはサイト内の構造がわかりません。目的のページに遷移するまで時間がかかったり、辿り着けない可能性があります。

HTMLサイトマップを設置すれば、ユーザーがスムーズに目的のページに遷移でき、利便性に優れたWebサイトとしてユーザーから重宝される可能性が高いです。

HTMLサイトマップの作成方法

ここでは、HTMLサイトマップの作成方法について2種類ご紹介します。

ぜひ参考にしてみてください。

1.手動作成

Webサイトのページを抜け漏れなく羅列し、手動で作成する方法です。

WordPressを活用せずに（例えば、VScodeなどのエディタを用いて）Webサイトを制作している場合、手動でHTMLサイトマップを作成することになります。

その際、Webページの抜けや漏れがないように注意しましょう。

2.WordPressのプラグインで自動作成

HTMLサイトマップは、WordPressのプラグインを用いて自動で作成することも可能です。

今回は例として、「PS Auto Sitemap」を活用した作成方法について解説します。

なお「PS Auto Sitemap」では、HTMLサイトマップの自動更新にも対応しています。

そのため、ページを新規で追加した場合に更新の手間が要らないだけでなく、抜け漏れのリスクを減らせるというメリットもあります。

具体的な「PS Auto Sitemap」の使用方法は以下です。

HTMLサイトマップの作成例(デザイン)

ここでは、参考になるHTMLサイトマップの作成例について3社ご紹介します。

1.株式会社ipe

弊社では、「シンプルかつわかりやすい」を意識したHTMLサイトマップ制作を心掛けています。

コンテンツに意識を向けていただきたいため、デザインやレイアウトはあえてシンプルに仕上げています。

2.ひらかたパーク

上記は、大阪府枚方市にある遊園地「ひらかたパーク」のWebサイトに設置されたHTMLサイトマップです。

カテゴリごとに色分けされているだけでなく、ページ上部のグローバルナビゲーションの色と揃えられているため、視覚的に見やすいデザインになっています。

3.神戸ベイシェラトン ホテル&タワーズ

上記は、神戸市の神戸ベイシェラトン ホテル&タワーズのWebサイトに設置されたHTMLサイトマップです。

大カテゴリーごとに写真を掲載することで、ユーザーがコンテンツをイメージしやすい演出が施されています。

また高級感溢れるオシャレなイメージを連想される背景色を使用することで、ホテルのイメージアップを意識しています。

HTMLサイトマップのソースの確認方法

参考にしたいWebサイトのHTMLサイトマップを見つけた場合、そのHTMLサイトマップがどのようなソース(プログラミングコード)で作成されているか気になりますよね。

各WebサイトのHTMLサイトマップのソースは以下の方法で確認することができます。

HTMLサイトマップを制作し、自社サイトのユーザビリティを向上させよう！

このページでは、HTMLサイトマップに焦点を当て、その概要やSEOとの関係性や作成方法、作成例などについて解説しました。

HTMLサイトマップは、主にユーザビリティの向上に役立ちます。

SEOに直接的に関係がなくても、ユーザビリティの観点から結果的にWebサイトやページの評価が向上する可能性が高いです。

そのため、Webサイトを運営する際は、HTMLサイトマップを作成することをおすすめします。

また同時に、クローラビリティを向上させ、自サイトの更新情報を検索エンジンに素早く反映し、スピーディに検索結果に表示させることができるという観点から、XMLサイトマップの作成も検討しましょう。

詳細は以下の記事をご覧ください。

【株式会社ipe ｜ XMLサイトマップ(sitemap.xml)】

HTMLサイトマップやSEOでお悩みの場合は株式会社ipeにご相談ください。株式会社ipeではSEOでの大手クライアント実績多数！
SEOを検討する際にはぜひ一度ご相談ください。