Shopify HTML サイトマップ: ストアの SEO メリットを飛躍的に高める

Shopifyストアを作成すると、XMLサイトマップが自動的に生成されます。しかし、Shopify HTML サイトマップ ショップのサイトマップを作成する場合は、さらに一歩踏み込む必要があるかもしれません。では、サイトマップとは一体何なのか疑問に思うかもしれません。それは文字通り 地図 名前の通り、あなたのストア向けです。

今日のウェブサイトには、膨大なコンテンツ、情報、製品が含まれているため、 発見するのは難しい あなたが探しているものを見つけてください。Shopify HTML サイトマップは、検索エンジンのクローラーがストアのすべてのページをナビゲートするのに役立ちます。

Shopify ストアの HTML サイトマップとは何ですか?

Shopify ストアの HTML サイトマップは目次であり、サイト上のさまざまなページへのクリック可能なリンクを提供し、多くの場合短い説明が含まれます。 

持つ HTML サイトマップ ユーザーがサイト内を簡単に移動できるようになり、ユーザーフレンドリーなエクスペリエンスが実現します。

注意: HTML サイトマップは、Google や他の検索エンジンではなく、ユーザー向けに作成されます。XML サイトマップとは異なり、HTML サイトマップを Google サイトマップ プログラムに具体的に送信することはできませんが、ユーザーのナビゲーションを改善するために強くお勧めします。Google などの検索エンジンは、明確な構造とテキストベースのリンクを持つ Web サイトを好みます。これにより、検索エンジンはコンテンツをインデックスして理解しやすくなります。

適切な XML 形式で Google サイトマップを作成するのが難しいと思われる場合は、別の方法があります。サイトの URL をリストした簡単なテキスト ファイルを送信できます。これにより、理想的な XML ファイルを作成できない場合でも、検索エンジンが Web ページを見つけてインデックスを作成できます。基本的に、Google サイトマップは検索エンジン用であり、HTML サイトマップは Web サイトの訪問者用であり、どちらも全体的なオンライン エクスペリエンスの向上に貢献します。

Shopify HTML サイトマップの例

HTMLサイトマップは、通常のウェブページに似たナビゲーション補助ツールで、ウェブサイト全体でシームレスなユーザーナビゲーションを容易にするために重要なページの包括的なリストを表示します。以下は、 Apple サイトマップ. 

大企業の場合 マイクロソフト そして エアビーアンドビーHTML サイトマップは、Web サイト上で利用できる膨大な情報や製品を整理する上で重要な役割を果たします。ユーザー エクスペリエンスを効率化するために、カテゴリ、サブカテゴリ、主要セクションへのリンクが含まれる場合があります。これは、顧客が特定の製品やカテゴリを探している可能性がある Walmart などの e コマース プラットフォームにとって特に重要です。

HTML サイトマップと XML サイトマップと画像サイトマップ 

HTML サイトマップはユーザーナビゲーションを強化し、XML サイトマップは検索エンジンを支援し、画像サイトマップは Web サイト上の画像の可視性を最適化します。

HTML サイトマップ 

HTML サイトマップは、Web サイトを訪問する人にとって役立つ地図のようなものです。サイト上のすべての重要な場所をリストし、リンクする特別なページです。本の目次と同じように、HTML サイトマップを使用すると、ユーザーは探しているものを簡単に見つけ、Web サイトのさまざまな部分をすばやく探索できます。

XML サイトマップ

XML サイトマップは、検索エンジンの秘密のガイドと考えてください。これは、Web サイト上のすべてのページのリストと、各ページの最終更新日時などの追加情報を含むファイルです。これにより、検索エンジンはサイトの構造を理解し、すべてのページを簡単に見つけることができるため、重要な情報を見逃すことはありません。

画像サイトマップ

画像サイトマップは、Web サイト上の画像専用の特別なマップです。ギャラリー ガイドのようなもので、すべての画像をリストし、その詳細を提供します。これにより、検索エンジンがこれらの画像を認識して検索結果に表示し、ユーザーが何か特定のものを探しているときに画像を見つけて楽しむ可能性が高くなります。

比較要因	HTML サイトマップ	XML サイトマップ	画像サイトマップ
サイトマップURL	HTML サイトマップのサイトマップ URL は、すべての重要なリンクを一覧表示して簡単にナビゲートできる、ユーザーフレンドリーな Web ページへの直接リンクを提供します。	XML サイトマップ URL は、主に検索エンジン向けに設計されたファイルにつながります。このファイルには、効率的なクロールとインデックス作成に役立つ URL と追加情報が含まれています。	画像サイトマップの URL は、画像検索の可視性を高めるために画像の URL と詳細を整理することに重点を置いたファイルに移動します。
含まれるもの	クリック可能なリンクと簡単な情報が含まれており、ユーザーが Web サイト上のさまざまなページを検索したりナビゲートしたりするのに役立ちます。	URL と追加の詳細が含まれており、ページの構造と最終変更に関する重要な情報を検索エンジンに提供します。	画像の URL と関連する詳細が含まれており、検索エンジンによる画像のインデックス作成とランク付けが容易になり、可視性が向上します。
設計対象	ユーザーが簡単にナビゲートできるように設計されており、Web サイトのさまざまなセクションやページをすばやく見つけてアクセスできます。	主に検索エンジン向けに設計されており、効率的なクロール、インデックス作成、Web サイトの階層と変更の理解に役立ちます。	画像を整理するために特別に設計されており、検索エンジンが画像をインデックスして検索結果に表示しやすくなります。
SEOのメリット	サイトナビゲーションを強化することでユーザーエクスペリエンスを向上させ、ユーザーエンゲージメントの向上を通じて間接的に SEO パフォーマンスの向上に貢献します。	検索エンジンに貴重な情報を提供することで検索エンジンの最適化を改善し、Web ページのより正確で包括的なインデックス作成を保証します。	画像情報を整理することで画像 SEO を強化し、画像検索結果での可視性とランキングを向上させます。

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

HTML サイトマップはユーザーフレンドリーなガイドとして機能し、すべての重要なリンクを 1 か所にリストし、訪問者が Web サイトを簡単にナビゲートできるようにします。

ユーザーエクスペリエンスを向上

HTML サイトマップは、ストアの Web サイトでの全体的なユーザー エクスペリエンスを向上させる上で重要な役割を果たします。これはロードマップのような役割を果たし、すべての重要なリンクをわかりやすく整理してレイアウトすることで、訪問者を導きます。これにより、ユーザーはさまざまなセクションを簡単にナビゲートし、製品を簡単に見つけ、快適なブラウジング エクスペリエンスを実現できます。

大量の商品在庫を持つウェブサイトの整理に役立ちます

膨大な数の商品を扱うストアでは、HTML サイトマップが仮想オーガナイザーとして機能します。すべての商品を 1 つのアクセスしやすい場所にきちんと分類して表示するため、ユーザーは効率的に特定の商品を閲覧して見つけることができます。この組織構造により、特に商品在庫が豊富なストアでは、ショッピングのプロセスが簡素化されます。

クロールとインデックス作成を高速化して SEO を向上

HTML サイトマップは検索エンジンの迅速なガイドとして機能し、Web ページのクロールとインデックス作成のプロセスを迅速化します。この効率性は SEO にとって非常に重要です。検索エンジンがサイトのコンテンツと構造を迅速に理解し、検索結果での可視性とランキングが向上するからです。

内部リンクを作成する

HTML サイトマップは、Web サイト内に貴重な内部リンクを確立します。これらのリンクは、さまざまなページやセクションを接続する経路として機能します。この内部リンクのネットワークを作成することで、サイトマップはコンテンツの相互接続性を高め、ユーザーにとってシームレスなナビゲーション フローを促進し、検索エンジンの最適化に役立ちます。

StoreSEOでHTMLサイトマップを理解する: 究極のShopify SEOソリューション

Shopify SEOを理解することは、eコマース起業家にとって難しいかもしれません。技術的なSEOと サイトマップの作成 特に Shopify の場合、これらのトピックに精通していないと非常に複雑になる可能性があります。

あなたを助けるために、あなたが知る必要があるすべてを学ぶための包括的なガイドを読んでください Shopify サイトマップ そして、それがオンライン ストアの検索ランキングにどのように影響するかについて説明します。

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

ShopifyストアのHTMLサイトマップを簡単に作成するための、簡略化された4ステップガイドをご紹介します。

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

StoreSEO は、Shopify ストア用の HTML サイトマップを作成できるアプリで、その他にも SEO の利点がいくつかあります。

StoreSEOアプリをインストールするには、まず Shopifyストアアカウントを作成する. 

まず、Shopify 管理ダッシュボードから「アプリ」オプションをクリックする必要があります。

リダイレクトされます Shopify アプリストア ページ。

ここから、検索バーで「StoreSEO」を検索し、アプリをクリックします。その後、「インストール」ボタンを押します。

Shopify にリダイレクトされ、そこから「アプリをインストール」ボタンをクリックしてアプリをインストールできます。

次に、店舗に関する正確な情報を入力して、必要なフォームをすべて記入する必要があります。

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

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

「今すぐ生成」ボタンをクリックすると、サイトマップが自動的に生成されます。次に、サイトマップの URL をコピーします。

URL をコピーしたら、「ナビゲーションの編集」ボタンをクリックします。これにより、Shopify ストアのナビゲーション タブにリダイレクトされます。

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

StoreSEOアプリは、ユーザー向けにデフォルトのサイトマップURLを自動的に作成しますが、好みや要件に応じてカスタマイズすることもできます。サイトマップURLをカスタマイズするには、 アプリの管理 –> アプリ そして 販売チャネル -> アプリプロキシ '内でサイトマップ' タブをクリックします。URLをカスタマイズ' ボタンをクリックし、サイトマップ URL に必要な変更を加えて、変更を保存します。

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

HTML サイトマップの目的の場所に新しいメニューを追加するか、既存のメニューを選択します。この例では、サイトマップを「フッター」に組み込みます。メニューを選択して項目を追加し、名前を指定してサイトマップの URL リンクを貼り付けます。その後、メニュー設定を保存してプロセスを完了します。

ストアに HTML サイトマップ リンクを追加したら、「確認」ボタンを押してカスタマイズの次の手順に進むことができます。

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

見出し、説明、セクション見出しなどの要素を調整し、ブランドアイデンティティに合う色を選択して、ストアのHTMLサイトマップをカスタマイズします。必要に応じてスタイルをカスタマイズし、特定のグループの表示を構成します。すべての設定をパーソナライズしたら、「保存' ボタンをクリックして変更を適用します。

HTML サイトマップの作成は、Shopify ストアの StoreSEO アプリに含まれる補足機能です。ストアには「Powered by StoreSEO」というブランドが表示されることに注意してください。このブランドを削除したい場合は、「リクエストを送信」ボタンをクリックして、StoreSEO チームにリクエストを伝えてください。

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

StoreSEO を使用すると、Shopify ストアの HTML サイトマップを簡単に生成できます。

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

Shopifyでサイトマップ用の新しいテンプレートを作成するのは簡単です。まず「オンラインストア」を選択し、「テーマ」をShopify管理パネルからクリックしてください。「ライブテーマ” セクションで、「アクション、" に続く "コードを編集します。次に、「テンプレート” フォルダに新しいテンプレートを追加し、ドロップダウンメニューから「ページ」を選択し、「サイトマップ.” 

「テンプレートを作成” ボタンをクリックしてセットアップを完了します。この簡単な手順により、特別なコード行を追加してストアのサイトマップをカスタマイズし、機能と外観を強化できます。

これは、独自のコードを挿入する特別なテンプレートです。通常のページ スタイルを維持するために、{{ page.content }} という行のすぐ下にコードを挿入することが重要です。すべての製品とコレクションを表示するには、新しいテンプレート ページに以下のコードを含めます。

<div class="”row”"><div class="”col-md-6″"><h2>コレクション</h2><ul>{% コレクション内の c の場合 %}<li><a href="/ja/”{{/" c.url }}”>{{ c.title }}</a></li>{% % の終了}</ul></div><div class="”col-md-6″"><h2>製品</h2><ul>{collections.all.products 内の製品の % %}<li><a href="/ja/”{{/" product.url }}”>{{製品.タイトル}}</a></li>{% % の終了}</ul></div></div>

注: 提供されているコードには Bootstrap フォーマットが付属しており、2 つの別々の列に表示する場合は、div クラスを調整する必要がある場合があります。 

テンプレートが完成したら、サイトマップ用の新しいページを設定します。手順は次のとおりです。オンラインストア」をクリックし、「ページ” を押して “ページを追加」ボタンをクリックします。ページのタイトルを「サイトマップ” を選択し、コンテンツセクションは空のままにしておきます。右側のテンプレートセクションで、「ページ.サイトマップ.”

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

Shopify HTMLサイトマップのカスタマイズは簡単なプロセスで、特定のニーズに合わせてカスタマイズできます。商品、コレクション、ページ、ブログ、法的ポリシーやプライバシーポリシーなどの重要なページ、カスタムリンクなどを追加する場合でも、ステップバイステップのガイドがあります。

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

ステップ1: サイトマップテンプレートにアクセスする

まず、作成したサイトマップテンプレートを見つけます。Shopify管理パネルで、「オンラインストア" その後 "テーマ」をクリックします。アクション、" に続く "コードを編集。」 サイトマップのテンプレートを探します。

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

{{ page.content }} の下に、製品、コレクション、ページ、ブログなど、表示するコンテンツに必要なコードを追加します。適切な書式設定を確認し、スタイル設定のために Bootstrap クラスを自由に調整してください。

<div class="”row”"><div class="”col-md-6″"><h2>コレクション</h2><ul>{% コレクション内の c の場合 %}<li><a href="/ja/”{{/" c.url }}”>{{ c.title }}</a></li>{% % の終了}</ul></div><div class="”col-md-6″"><h2>製品</h2><ul>{collections.all.products 内の製品の % %}<li><a href="/ja/”{{/" product.url }}”>{{製品.タイトル}}</a></li>{% % の終了}</ul></div></div>

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

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

法律やプライバシーポリシーなどの重要なページを追加するには

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

「オンラインストアShopify管理画面で「ページ、」を選択し、「ページを追加” を右上隅にクリックします。法的ポリシーやプライバシー ポリシーのページを作成し、コンテンツ セクションは空のままにします。

ステップ2: サイトマップテンプレートへのリンク

ページ タイトル フィールドに「プライバシー ポリシー」と入力し、コンテンツ フィールド メニューのコード アイコン ボタンをクリックして HTML を表示します。

プライバシー ポリシーを作成したら、ポリシーのテキストを取得しましょう。[プライバシー ポリシーをコピー] セクションで、[これをクリップボードにコピー] を選択します。

Shopify ストア ページに戻ります。コンテンツ エディター フィールドに HTML コードを貼り付けて、[保存] ボタンをクリックします。

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

ページを保存し、重要なページがカスタマイズされた HTML サイトマップの一部になっていることを確認します。

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

ステップ1: リンク構造を決定する

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

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

サイトマップ テンプレートに移動し、{{ page.content }} の下にカスタム リンク コードを追加して、適切な書式と配置を確認します。

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

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

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

以下では、Shopify ストアからリンクを削除する方法について、簡単な手順を追って説明します。 

ステップ1: ナビゲーションセクションにアクセスする

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

ステップ2: 編集メニューを選択する

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

ステップ3: メニュー項目の識別と削除

選択したメニュー内で、削除したい特定の項目を特定し、「消去削除したいメニュー項目の横にある「」をクリックします。

ステップ4: 削除の確認

「消去」と入力すると確認プロンプトが表示されるので、「取り除く選択したメニュー項目の削除を確認するには、「」をクリックします。

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

変更を確実に有効にするには、目的のメニュー項目を削除した後、「メニューを保存」をクリックします。

顧客体験を向上させる HTML サイトマップのベスト プラクティス

顧客体験を向上させるためにHTMLサイトマップを作成するときは、これらのシンプルでありながら効果的な方法を念頭に置いてください。

明確で整理された構造

HTML サイトマップが目次のようなわかりやすい構造になっていることを確認し、顧客が Web サイトのさまざまなセクション間を簡単に移動できるようにします。

説明的なリンクラベル

HTML サイトマップ内の各リンクには、明確で説明的なラベルを使用します。これにより、顧客は特定のリンクをクリックしたときに表示されるコンテンツを簡単に理解できるようになります。

アルファベット順または論理順

HTML サイトマップ内のリンクをアルファベット順または論理的な順序で並べます。これにより、顧客は探しているものをすばやく見つけられるようになり、全体的なブラウジング エクスペリエンスが向上します。

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

HTML サイトマップをモバイル デバイス向けに最適化し、スマートフォンやタブレットでサイトにアクセスする顧客にとって使いやすく、ナビゲートしやすいようにします。

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

定期的に新しいページを追加したり、古くなったページを削除したりして、HTML サイトマップを最新の状態に保ってください。これにより、顧客は常に最新の情報にアクセスでき、Web サイトでのエクスペリエンスが向上します。

以上がShopify HTMLサイトマップガイドのまとめです。お役に立てれば幸いです。Shopifyのチュートリアルやガイドをもっとご覧になりたい方は ブログを購読する 詳しいコンテンツについてはこちらをご覧ください。