Shopifyストアに独自サイトマップを追加する

Shopifyの簡単なカスタマイズであれば自分でやることもある、そんなWebディレクター田辺です、こんにちは。

ECサイトにおいて、SEOは重要なマーケティング要素です。
そして、SEOの第一歩は、「検索エンジンにページの存在を知ってもらうこと」であります。
その最もポピュラーな手段は、サイトマップを送信する、ことです。

そして、Shopifyでは、サイトマップを自動生成してくれます。ありがたいですね。

しかし、、、

Shopifyが自動生成してくれるサイトマップには、下記のページが含まれません。

商品タグで絞った商品一覧ページ ( 例: /collections/all/{{商品タグ}} )

Shopifyにおける商品一覧ページの作成方法の王道は、コレクションです。
コレクションであれば、作成した分だけサイトマップに、そのURLが自動的に掲載されます。
しかし、商品タグを使用した商品一覧ページのURLは、サイトマップに掲載されません。(理由は不明です。)

そして、困ったことに、私が参加するShopifyストアでは、訳あって、商品タグをメインに据えた運用を行なっています。

サイトマップからURLをGoogleに伝えることができないためか、商品タグを使用したURLが、検索エンジンになかなかインデックスされないという状況になりました。

そこで、独自サイトマップを作成し、そこに、商品タグを使用したURLを記載することにしました。
本記事では、独自サイトマップを、Google Search Consoleに認識させるまでの手順を紹介します。

なお、本記事は、下記の参考ページの内容を日本語で説明しているだけです。
若干の変更点として、サイトマップの設置に、ファイルアップロードではなく、アセットを利用するようにしていますが、これは私たちがテーマをGit管理しており、可能な限りGitで運用したかった、ことだけが理由です。
アセットではなくファイルアップロードを利用した方が簡単ですので、アセットで管理する理由がない方は、参考ページの方をご覧になることをおすすめします。

参考ページ
https://thisisnovos.com/blog/how-to-create-a-custom-xml-sitemap-in-shopify/

こんな方におすすめ

1. 私と同じように商品タグによる商品一覧ページをGoogleにうまくインデックスしてもらえない方
2. Shopify標準のサイトマップに何らかの理由で掲載されないURLがあり、そのURLをGoogleにインデックスしてもらいたい方 (Shopify標準のサイトマップには、xxxxx.myshopify.com/sitemap.xml でアクセス可能です。)

Shopifyに独自サイトマップを追加する際の考え方 (※Google前提)

1. Shopifyに独自ファイルを追加する方法は、2種類あります。ファイルアップロードか、テーマのアセットを利用するか、です。しかし、そのどちらも、ストアのドメインである、 xxxxxx.myshopify.com ではなく、cdn.myshopify.com にファイルがアップされます。今回も、そのどちらかを利用することになります。
2. 基本的にサイトマップは、サイトマップに記載されたURL群と同一ドメインに設置する必要があります。( ( クロスサイト送信 という手法もあり、必ずしも、サイトマップの内容とサイトマップの設置ドメインが一致していなければならないわけではありませんが、登場する全てのドメインが、「Search Consoleで確認済み」である必要があり、Shopifyの場合、cdn.myshopify.com をその状態にすることができないので、使用できない、という見解です。)
   
3. 別ドメイン( cdn.myshopify.com )に設置されたサイトマップを、Shopifyストア( xxxxx.myshopify.com ) のサイトマップとして認識させる工夫が必要になります。
4. そこで、サイトマップはリダイレクトが許容されている、ことを利用します。
5. Shopifyでは、ストア内の404をレスポンスするURLにおいて、自由にリダイレクトを作成できます。
6. 独自サイトマップを、ファイルアップロードか、テーマのアセットを利用してアップすると、次のようなURLが生成されます。https://cdn.myshopify.com/xxxxxxxx/xxxxxxxx/sitemap.xml
7. https://xxxxx.myshopify.com/another-sitemap.xml から、https://cdn.myshopify.com/xxxxxxxx/xxxxxxxx/sitemap.xml へのリダイレクトを作成することで、独自サイトマップをGoogleに認識させることができます。

Shopifyに独自サイトマップを追加する具体的な手順

前準備

Shopifyストアの準備、ShopifyストアのテーマのGit管理の準備、追加したいサイトマップの準備、Google Search Consoleの登録などは完了している、ことを前提に手順をご説明します。

手順01

Git管理しているテーマにおいて、assetsディレクトリ内に、独自サイトマップを設置し、コミットします。
ファイル名は、another-sitemap.xmlとします。(※ファイル名は何でも大丈夫です。変更する場合は、後の手順を読み替えてください。)

※なお、Shopifyストア管理画面 > オンラインストア > テーマ > 利用中のテーマの「アクション」 > コード編集 からxmlファイルをアップロードすることはできません。アップロードファイルに拡張子制限があり、xmlが許可されていないためです。xmlファイルを追加したい場合は、Gitからか、shopify cliからの操作が必要になります。

※もし、手軽にこの手順を進めたい場合は、Shopifyストア管理画面 > 設定 > ファイル から、サイトマップをアップロードするのが簡単です。

手順02

アセットファイルのURLを取得するために、
テーマの、layout/theme.liquid の適当な箇所に下記を記述します。

<!-- another sitemap url: {{ 'another-sitemap.xml' | asset_url }} -->

その後、ブラウザでストアを表示し、ソースコードを表示させ、another sitemap url: で検索いただくと、another-sitemap.xmlのURLが見つかります。そちらをコピーします。

※なお、手順1でShopifyストア管理画面 > 設定 > ファイルからアップロードされた方は、アプロードされたファイルのリストの「リンク」というボタンからURLを取得できます。

手順03

下記のようにしてリダイレクトを設定します。

手順04

リダイレクトされることを、https://xxxxx.myshopify.com/another-sitemap.xml にアクセスして確認します。
無事リダイレクトされていたら、
https://xxxxx.myshopify.com/another-sitemap.xml を、
Google Search Consoleにサイトマップとして登録して完了です。

注意

アセットに設置したファイルを編集すると、cdn.myshopify.com 上でのURLが変わることがあります。(条件は不明です。)
アセットに設置したサイトマップを編集した際は、手順02を行い、URLに変化がないか確認されることをお勧めします。

まとめ

本記事で紹介した内容は、1つ、2つのURLをGoogleにインデックスさせたい場合には、正直に申しますと、too muchです。
なぜなら、Google Search Consoleから直接、インデックスリクエストを送れば良いからです。
そういった場合は、本記事のような手順を踏まず、Google Search Consoleから直接ポチポチした方が楽ですので、そちらをお勧めします。

しかし、Google Search Consoleから直接インデックスリクエストを送る方法は、1日のリクエスト数に上限が設けられています。
また、単純に数が多いと面倒、ということもあります。

ですので、Shopify標準のサイトマップには記載されない大量のURLをGoogleにインデックスさせたい時 が、本記事が活躍する時になります。

滅多にない状況だとは思いますが、滅多にないからこそネット上のナレッジも多くないと思います。
本記事が、同様の問題にお困りの方の一助になれば幸いです。