Shopify HTMLサイトマップ：ストアのSEO効果を一気に高める方法

Shopifyストアを作成すると、XMLサイトマップは自動で生成されます。しかし、ストア用のShopify HTMLサイトマップを用意するには、もう一歩踏み込んだ作業が必要になる場合があります。そもそもサイトマップとは何なのか、気になる方もいるでしょう。その名のとおり、ストアの「地図」です。

最近のウェブサイトには膨大なコンテンツ、情報、商品が詰め込まれているため、探しているものを見つけにくいことがあります。Shopify HTMLサイトマップは、検索エンジンのクローラーがストアのすべてのページを巡回する手助けをします。

ShopifyストアのHTMLサイトマップとは？

ShopifyストアのHTMLサイトマップは、いわばサイトの目次です。サイト内のさまざまなページへのクリック可能なリンクをまとめたもので、短い説明が添えられていることもよくあります。

HTMLサイトマップがあると、訪問者がサイト内を移動しやすくなり、使いやすい体験を提供できます。

なお、HTMLサイトマップはGoogleなどの検索エンジン向けではなく、ユーザー向けに作られるものです。XMLサイトマップとは異なり、HTMLサイトマップをGoogleのサイトマッププログラムに直接送信することはできませんが、ユーザーのナビゲーションを改善するために強くおすすめします。Googleなどの検索エンジンは、構造がわかりやすく、テキストベースのリンクを備えたサイトを好みます。そのほうがコンテンツをインデックスし、理解しやすいからです。

正しいXML形式でGoogleサイトマップを作るのが難しそうだと感じる場合は、別の方法もあります。サイト内のURLを一覧にしたシンプルなテキストファイルを送信するのです。こうすれば、理想的なXMLファイルを作れなくても、検索エンジンはウェブページを見つけてインデックスできます。つまり、Googleサイトマップは検索エンジンのため、HTMLサイトマップはサイト訪問者のためのもので、どちらもオンライン体験全体の向上に役立ちます。

Shopify HTMLサイトマップの例

HTMLサイトマップは通常のウェブページのような見た目のナビゲーション補助ツールで、重要なページを網羅的に一覧表示し、ユーザーがサイト内をスムーズに移動できるようにします。こちらはAppleのサイトマップの例です。

MicrosoftやAirbnbのような大企業では、サイト上の膨大な情報や商品を整理するうえで、HTMLサイトマップが重要な役割を果たします。カテゴリ、サブカテゴリ、主要セクションへのリンクを含めることで、ユーザー体験をスムーズにできます。特定の商品やカテゴリを探しているお客様が多い、WalmartのようなECプラットフォームでは特に重要です。

HTMLサイトマップ、XMLサイトマップ、画像サイトマップの違い

HTMLサイトマップはユーザーのナビゲーションを向上させ、XMLサイトマップは検索エンジンを助け、画像サイトマップはサイト上の画像の露出を最適化します。

HTMLサイトマップ

HTMLサイトマップは、ウェブサイトを訪れる人にとって便利な地図のようなものです。サイト内の重要な場所をすべて一覧にし、リンクでつなぐ専用ページです。本の目次と同じように、HTMLサイトマップがあればユーザーは探しているものを簡単に見つけられ、サイト内のさまざまな場所をすばやく見て回れます。

XMLサイトマップ

XMLサイトマップは、検索エンジン向けの「秘密のガイド」と考えるとわかりやすいでしょう。サイト内のすべてのページの一覧に加えて、各ページの最終更新日などの追加情報を含むファイルです。検索エンジンがサイトの構造を理解し、すべてのページを簡単に見つけられるようにして、重要なページの見落としを防ぎます。

画像サイトマップ

画像サイトマップは、ウェブサイト上の画像専用の特別な地図です。ギャラリーの案内図のように、すべての画像を一覧にし、その詳細情報を提供します。これにより検索エンジンが画像を認識して検索結果に表示しやすくなり、何かを探している人が画像を見つけて楽しんでもらえる可能性が高まります。

比較項目	HTMLサイトマップ	XMLサイトマップ	画像サイトマップ
サイトマップのURL	HTMLサイトマップのURLは、重要なリンクをすべて一覧にした使いやすいウェブページへ直接つながり、スムーズな移動を可能にします。	XMLサイトマップのURLは、主に検索エンジン向けに作られたファイルにつながります。URLと追加情報を含み、効率的なクロールとインデックスを助けます。	画像サイトマップのURLは、画像のURLと詳細情報を整理したファイルにつながり、画像検索での露出を高めます。
含まれる内容	クリック可能なリンクと簡単な情報を含み、ユーザーがサイト内のさまざまなページを見つけて移動できるようにします。	URLと追加の詳細情報を含み、ページの構造や最終更新日といった重要な情報を検索エンジンに提供します。	画像のURLと関連する詳細情報を含み、検索エンジンによる画像のインデックスとランキングを助けて露出を高めます。
対象	ユーザーが簡単に移動できるよう設計されており、サイトのさまざまなセクションやページにすばやくたどり着けます。	主に検索エンジン向けに設計されており、効率的なクロールとインデックス、サイトの階層や変更点の把握を助けます。	画像の整理に特化して設計されており、検索エンジンが画像をインデックスし、検索結果に表示しやすくします。
SEO効果	サイトのナビゲーションを改善してユーザー体験を高め、エンゲージメントの向上を通じて間接的にSEOパフォーマンスの改善に貢献します。	検索エンジンに有益な情報を提供することでSEOを改善し、ウェブページをより正確かつ網羅的にインデックスしてもらえるようにします。	画像情報を整理することで画像SEOを強化し、画像検索結果での露出と順位の向上につなげます。

ストアにHTMLサイトマップが必要な理由

HTMLサイトマップは、重要なリンクをすべて1か所にまとめた使いやすいガイドとして機能し、訪問者がサイト内を楽に移動できるようにします。

ユーザー体験が向上する

HTMLサイトマップは、ストアのウェブサイト全体のユーザー体験を高めるうえで重要な役割を果たします。道路地図のように、重要なリンクをわかりやすく整理して訪問者を案内します。ユーザーはさまざまなセクションを楽に移動し、商品を簡単に見つけ、快適に閲覧できるようになります。

商品数の多いサイトを整理できる

幅広い商品を扱うストアにとって、HTMLサイトマップはバーチャルな整理役になります。すべての商品をカテゴリごとにきれいに分類し、アクセスしやすい1か所にまとめて表示するため、ユーザーは効率よく閲覧し、目的の商品を見つけられます。こうした整理された構造は、特に商品数の多いストアで買い物の流れをシンプルにします。

クロールとインデックスを加速してSEOを強化する

HTMLサイトマップは検索エンジンにとってのスピーディーなガイドとなり、ウェブページのクロールとインデックスを早めます。この効率性はSEOにとって非常に重要です。検索エンジンがサイトのコンテンツと構造をすばやく理解できるため、検索結果での露出と順位の向上につながります。

内部リンクが生まれる

HTMLサイトマップは、サイト内に価値ある内部リンクを作ります。これらのリンクはさまざまなページやセクションをつなぐ通り道として機能します。内部リンクのネットワークを作ることで、コンテンツ同士のつながりが強まり、ユーザーはスムーズに移動でき、SEOの取り組みにも役立ちます。

StoreSEOでHTMLサイトマップを理解しよう：Shopify SEOの決定版ソリューション

Shopify SEOを理解するのは、どのEC事業者にとっても簡単ではありません。特に、テクニカルSEOやShopifyのサイトマップ作成について学ぶのは、なじみがなければかなり複雑に感じるでしょう。

そこで、Shopifyのサイトマップについて知っておくべきことと、サイトマップがオンラインストアの検索順位にどう影響するかをまとめた詳しいガイドをぜひご覧ください。

ShopifyでHTMLサイトマップを作成する最良の方法：4ステップガイド

Shopifyストア向けのHTMLサイトマップを手軽に作成できるよう、4つのステップにまとめたガイドをご紹介します。

ステップ1：StoreSEOアプリをストアにインストールする

StoreSEOは、ShopifyストアのHTMLサイトマップを作成できるアプリで、そのほかにもさまざまなSEO機能を備えています。

StoreSEOアプリをインストールするには、まずShopifyストアのアカウントを作成する必要があります。

まず、Shopify管理画面のダッシュボードから「Apps」（アプリ）をクリックします。

**Shopify App Store**のページに移動します。

ここで検索バーに「StoreSEO」と入力し、アプリをクリックします。その後、「Install」（インストール）ボタンを押します。

Shopifyにリダイレクトされるので、「Install App」（アプリをインストール）ボタンをクリックしてアプリをインストールします。

次に、ストアについての正確な情報を入力して、必要なフォームをすべて記入します。

ステップ2：HTMLサイトマップを生成する

Shopifyストアにログインし、StoreSEOアプリのダッシュボードから「Sitemap」（サイトマップ）タブに移動します。「HTML Sitemap」ボタンをクリックしてサイトマップを生成します。

「Generate Now」（今すぐ生成）ボタンを押すと、サイトマップが自動で生成されます。生成されたら、サイトマップのURLをコピーしましょう。

URLをコピーしたら、「Edit Navigation」（ナビゲーションを編集）ボタンをクリックします。Shopifyストアの「Navigation」タブに移動します。

ステップ3：サイトマップをカスタマイズする

StoreSEOアプリはデフォルトのサイトマップURLを自動で作成しますが、好みや要件に合わせて自由にカスタマイズできます。サイトマップURLを変更するには、「Sitemap」タブ内でManage Apps -> AppsおよびSales Channels -> App Proxyに移動します。「Customize URL」（URLをカスタマイズ）ボタンをクリックし、サイトマップURLを希望どおりに変更して保存します。

ステップ4：ストアにHTMLサイトマップのリンクを追加する

HTMLサイトマップを置きたい場所に、新しいメニューを追加するか既存のメニューを選択します。ここでは「Footer」（フッター）にサイトマップを追加してみましょう。メニューを選んで項目を追加し、名前を入力してサイトマップのURLを貼り付けます。最後にメニュー設定を保存すれば完了です。

ストアにHTMLサイトマップのリンクを追加したら、「Confirm」（確認）ボタンを押してカスタマイズの次のステップに進みます。

HTMLサイトマップをカスタマイズする

見出し（Heading）、説明（Description）、セクション見出し（Section Heading）などの要素を調整し、ブランドイメージに合った色を選んで、ストアに合わせたHTMLサイトマップに仕上げましょう。必要に応じてスタイル（Styling）をカスタマイズし、特定のグループに対する表示設定（Visibility）も行えます。すべての設定が終わったら、「Save」（保存）ボタンをクリックして変更を適用します。

HTMLサイトマップの作成は、ShopifyストアのStoreSEOアプリに含まれる無料の機能です。ただし、ストアには「Powered by StoreSEO」の表示が入る点にご注意ください。この表示を削除したい場合は、「Send request」（リクエストを送信）ボタンをクリックしてStoreSEOチームにご依頼ください。

HTMLサイトマップを追加してカスタマイズすると、ストアのサイトマップページは下の例のようになります。

このように、StoreSEOを使えばShopifyストアのHTMLサイトマップを簡単に生成できます。

HTMLサイトマップを手動で追加する別の方法

Shopifyでサイトマップ用の新しいテンプレートを作るのは簡単です。まずShopify管理画面で「Online Store」（オンラインストア）に移動し、「Themes」（テーマ）を選択します。「Live theme」（公開中のテーマ）セクションで「Actions」（アクション）をクリックし、続いて「Edit Code.」（コードを編集）を選びます。次に「Templates」フォルダで新しいテンプレートを追加し、ドロップダウンメニューから「page」を選んで「sitemap」と名前を付けます。

「Create template」（テンプレートを作成）ボタンをクリックすれば設定完了です。この簡単な手順で、特別なコードを追加してストアのサイトマップの機能や見た目をカスタマイズできるようになります。

これが、独自のコードを入れる専用テンプレートです。通常のページスタイルを保つため、{{ page.content }} と書かれた行のすぐ下にコードを挿入することが重要です。すべての商品とコレクションを表示するには、新しいテンプレートページに以下のコードを追加してください。

<div class=”row”><div class=”col-md-6″><h2>Collections</h2><ul>{% for c in collections %}<li><a href=”{{ c.url }}”>{{ c.title }}</a></li>{% endfor %}</ul></div><div class=”col-md-6″><h2>Products</h2><ul>{% for product in collections.all.products %}<li><a href=”{{ product.url }}”>{{ product.title }}</a></li>{% endfor %}</ul></div></div>

注：このコードはBootstrapの書式を使っています。2列に分けて表示したい場合は、divのクラスを調整する必要があるかもしれません。

テンプレートができたら、次はサイトマップ用の新しいページを作成します。手順は次のとおりです。Shopify管理画面で「Online Store」（オンラインストア）に移動し、「Pages」（ページ）をクリックして、右上の「Add page」（ページを追加）ボタンを押します。ページのタイトルを「Sitemap」とし、コンテンツ欄は空のままにします。右側のテンプレートセクションで「page.sitemap」を選択します。

Shopify HTMLサイトマップのカスタマイズ方法

Shopify HTMLサイトマップは、ニーズに合わせて簡単にカスタマイズできます。商品、コレクション、ページ、ブログ、利用規約やプライバシーポリシーといった重要なページ、さらにはカスタムリンクを追加したい場合まで、ステップごとに解説します。

商品、コレクション、ページ、ブログを追加するには

ステップ1：サイトマップテンプレートを開く

まず、作成したサイトマップテンプレートを探します。Shopify管理画面で「Online Store」（オンラインストア）から「Themes」（テーマ）に移動します。「Actions」（アクション）をクリックし、続いて「Edit Code」（コードを編集）を選びます。サイトマップテンプレートを探しましょう。

ステップ2：コンテンツ用のコードを挿入する

{{ page.content }} の下に、表示したいコンテンツ（商品、コレクション、ページ、ブログなど）に必要なコードを追加します。書式が正しいことを確認し、必要に応じてBootstrapのクラスを調整してスタイルを整えましょう。

<div class=”row”><div class=”col-md-6″><h2>Collections</h2><ul>{% for c in collections %}<li><a href=”{{ c.url }}”>{{ c.title }}</a></li>{% endfor %}</ul></div><div class=”col-md-6″><h2>Products</h2><ul>{% for product in collections.all.products %}<li><a href=”{{ product.url }}”>{{ product.title }}</a></li>{% endfor %}</ul></div></div>

ステップ3：保存してプレビューする

表示したいコンテンツを追加したら、テンプレートの変更を保存します。ページをプレビューして、すべてが想定どおりに表示されているか確認しましょう。必要に応じて調整できます。

利用規約やプライバシーポリシーなどの重要なページを追加するには

ステップ1：重要なページを作成する

Shopify管理画面で「Online Store」（オンラインストア）に移動し、「Pages,」（ページ）をクリックして、右上の「Add page」（ページを追加）を選択します。利用規約やプライバシーポリシーのページを作成し、コンテンツ欄は空のままにしておきます。

ステップ2：サイトマップテンプレートにリンクする

ページタイトル欄に「Privacy Policy」と入力し、コンテンツ欄のメニューにあるコードアイコンのボタンをクリックしてHTMLを表示します。

プライバシーポリシーを作成したら、ポリシーのテキストを取得しましょう。「Copy your Privacy Policy」セクションで「Copy this to clipboard」（クリップボードにコピー）を選択します。

Shopifyストアのページに戻ります。コンテンツエディタ欄にHTMLコードを貼り付け、「Save」（保存）ボタンをクリックします。

ステップ3：保存して確認する

ページを保存し、重要なページがカスタマイズしたHTMLサイトマップに含まれていることを必ず確認しましょう。

カスタムリンクを追加するには

ステップ1：リンク構成を決める

外部の参考ページやサイト内の追加ページなど、HTMLサイトマップに含めたいカスタムリンクを決めます。

ステップ2：サイトマップテンプレートにリンクを挿入する

サイトマップテンプレートを開き、{{ page.content }} の下にカスタムリンクのコードを追加します。書式と配置が正しいことを確認しましょう。

ステップ3：確認して保存する

変更を保存してサイトマップをプレビューし、カスタムリンクが意図どおりに表示されているか確認します。必要に応じて調整すれば、カスタマイズしたShopify HTMLサイトマップでストアのナビゲーションを改善する準備が整います。

ShopifyでHTMLサイトマップへのリンクを削除する方法

ここでは、Shopifyストアからリンクを削除するシンプルな手順をステップごとにご紹介します。

ステップ1：ナビゲーションセクションを開く

Shopify管理画面にログインし、「Online Store」（オンラインストア）に移動して「Navigation」（ナビゲーション）をクリックします。

ステップ2：編集するメニューを選ぶ

ナビゲーションページで、編集したいメニューのタイトルを見つけてクリックします。

ステップ3：メニュー項目を見つけて削除する

選択したメニューの中から削除したい項目を見つけ、その項目の横にある「Delete」（削除）をクリックします。

ステップ4：削除を確定する

「Delete」をクリックすると確認画面が表示されるので、「Remove」（削除）をクリックして、選択したメニュー項目の削除を確定します。

ステップ5：変更を保存する

メニュー項目を削除したら、「Save menu」（メニューを保存）をクリックして変更を反映させましょう。

顧客体験を高めるHTMLサイトマップのベストプラクティス

顧客体験を高めるHTMLサイトマップを作るために、シンプルながら効果的な次のポイントを押さえておきましょう。

明確で整理された構成

HTMLサイトマップは目次のようにわかりやすい構成にして、お客様がサイト内のさまざまなセクションを簡単に移動できるようにしましょう。

内容が伝わるリンクラベル

HTMLサイトマップの各リンクには、わかりやすく内容が伝わるラベルを付けましょう。リンクをクリックした先にどんなコンテンツがあるのか、お客様がすぐに理解できます。

五十音順・アルファベット順または論理的な順序

HTMLサイトマップのリンクは、アルファベット順か論理的な順序で並べましょう。お客様が探しているものをすばやく見つけられ、閲覧体験全体が向上します。

モバイルフレンドリーなデザイン

HTMLサイトマップをモバイル端末向けに最適化し、スマートフォンやタブレットでアクセスするお客様にとっても使いやすく、移動しやすい状態を保ちましょう。

コンテンツを定期的に更新する

新しいページを追加したり古いページを削除したりして、HTMLサイトマップを常に最新の状態に保ちましょう。お客様がいつでも最新の情報にアクセスでき、サイトでの体験が向上します。

Shopify HTMLサイトマップのガイドは以上です。お役に立てば幸いです。Shopifyのチュートリアルやガイドをもっと読みたい方は、ぜひブログを購読してください。