ShopifyのURLをheadlessへ移行してSEOを守る方法

Shopify URL 移行が中断される理由

Shopify Liquid から Next.js、Hydrogen、または独自のheadless storefrontへ移行するとき、いちばん壊れやすいのは見た目ではなくURLです。古い商品URLやコレクションURLが検索結果、広告、メール、アフィリエイト、QRコードに残ったままだと、公開日に404と売上ロスが出ます。

Shopify は決まったURL構造を使います。

• /products/{handle}
• /collections/{handle}
• /pages/{handle}

headless構成では、より短いルートや柔軟なルートへ変えることがよくあります。

• /shop/{handle}
• /c/{handle}
• /{handle}

新しいストアには良い設計でも、既存のShopify URLが外部に残っているなら危険です。Google、メール、有料広告、アフィリエイトリンク、QRコード、パートナーページ、顧客のブックマークは、公開後もしばらく古いURLへアクセスし続けます。

移行のリスク

リダイレクト マップがないと、ヘッドレス移行では通常、次の 3 つの問題が発生します。

1. 404 エラー: Googlebot と実際の買い物客が、存在しない商品、コレクション、コンテンツの URL にアクセスします。
2. ランキングシグナルの喪失: バックリンク、内部リンク、古い検索結果が、最適な新しいリンク先を明確に示していなくなりました。
3. キャンペーン流入の損失: メール、有料SNS、インフルエンサー、アフィリエイトリンクから来た買い物客が、正しい商品やカテゴリに到達できなくなります。

[!WARNING] リダイレクトを構築するために DNS カットオーバーまで待たないでください。新しいストアフロントが運用トラフィックを受信する前に、リダイレクト マップの準備が完了し、インポートされ、ステージングでクロールされる必要があります。

ステップ 1: 従来の Shopify URL をエクスポートする

リダイレクト ルールを作成する前に、すでにトラフィックを受信している URL をエクスポートします。 Shopify から始めて、そのリストを SEO と分析データで充実させます。

方法 A: Shopify 管理者

Products > Export に移動し、「すべての製品」を選択します。これにより、Handle 列を含む CSV が得られます。

Handle,Title,Variant Price
cool-tshirt,Cool T-Shirt,29.99
blue-jeans,Blue Jeans,49.99

方法 B: サイトマップの解析

製品、コレクション、ページ、ブログ投稿を含むより広範なリストについては、Shopify sitemap.xml を解析します。

# Install a sitemap parser
npm install -g sitemap-to-csv
 
# Fetch and convert
sitemap-to-csv https://store.example/sitemap.xml > urls.csv

方法 C: 検索と分析のエクスポート

Shopify は、重要な URL をすべて知っているわけではありません。高価値の URL を次からエクスポートします。

• インプレッション数とクリック数を含む Google Search Console ページ
• Google Analytics またはウェアハウスのランディング ページ レポート
• 有効な UTM パラメータを持つ有料メディア URL
• アフィリエイトとパートナーのリンク
• 顧客メールとライフサイクル キャンペーン

これらの URL は、リダイレクト マップで高優先度としてマークされる必要があります。

ステップ 2: リダイレクト マップを設計する

すべての URL に対して 1 対 1 ルールが常に必要なわけではありません。パターン ルールは予測可能な Shopify 構造を処理できますが、1 回限りのルールは廃止された製品、統合されたカテゴリ、および高価値の例外をカバーします。

シナリオ A: 単純なプレフィックス変更

• 古い: https://shop.example/products/blue-jeans
• 新: https://shop.example/shop/blue-jeans

UrlEdge ルール:

• ソース: ^/products/(.*)$
• 宛先: /shop/$1
• タイプ: 301 (永久)

シナリオ B: プレフィックスの削除

• 古い: https://shop.example/products/blue-jeans
• 新: https://shop.example/blue-jeans

UrlEdge ルール:

• ソース: ^/products/(.*)$
• 宛先: /$1

[!TIP] ルートレベルの製品 URL には注意してください。新しいルーターが /about、/contact、/cart、またはコレクション スラグと競合しないことを確認してください。

シナリオ C: キャンペーン パラメータの保持

キャンペーンのリンクは、電子メール、SMS、クリエイターの投稿、有料広告で数か月間存続することがよくあります。

https://shop.example/products/blue-jeans?utm_source=newsletter&utm_campaign=spring

は次のURLへ到達するべきです:

https://shop.example/shop/blue-jeans?utm_source=newsletter&utm_campaign=spring

リダイレクトによってクエリ パラメーターが誤って削除された場合、クロール ツール上は移行が成功しているように見えても、キャンペーンのアトリビューションは見えないところで崩れます。

ステップ 3: エッジでのリダイレクトの実装

ヘッドレス アプリでリダイレクトを処理することもできますが、その場合は移行用のルーティングがフロントエンドのデプロイに結びつきます。大規模なリダイレクト マップでは、専用のエッジ レイヤーに分けておく方が運用しやすくなります。

遅延の問題

next.config.js またはミドルウェアでリダイレクトを処理する場合、リクエストはオリジン サーバー (Vercel/Node.js) に到達し、コンピューティング インスタンスを起動し、ルールに一致して応答する必要があります。

構成

UrlEdge を使用すると、CSV マップをインポートしたり、正規表現ルールを直接定義したりできます。

{
  "rules": [
    {
      "source": "^/products/(.*)",
      "destination": "/shop/$1",
      "type": 301
    },
    {
      "source": "^/pages/contact-us",
      "destination": "/contact",
      "type": 301
    }
  ]
}

ステップ 4: 検証

DNS を切り替える前に、新しいリダイレクトレイヤーに対して古い URL インベントリをテストします。

1. ステージング ドメイン: ステージング用ホスト名を UrlEdge に指定し、最初に価値の高い URL をテストします。
2. カールテスト:

curl -I https://staging.shop.example/products/old-product
 
# 期待される出力:
# HTTP/2 301 
# location: /shop/old-product
# x-urledge-rule: regex-product-match

3. クロール テスト: Screaming Frog または同様のクローラーを使用して、ステージング環境に対して古い URL リストをテストします。
4. キャンペーン テスト: utm_source、utm_medium、utm_campaign、クーポン パラメーター、およびアフィリエイト パラメーターを含む少なくともいくつかの URL を確認します。
5. 例外レビュー: 製造中止となった製品は、デフォルトでホームページではなく、最適なコレクション、代替製品、またはサポート ページにルーティングされるようにしてください。

結論

ヘッドレス Shopify 移行では、新しいストアフロントの公開と、古いトラフィックを受け止めるリダイレクトレイヤーの準備を同時に進める必要があります。リダイレクト マップは後片付けではなく、公開前に用意するインフラです。

リダイレクト ロジックをエッジに移すと、次の運用がしやすくなります。

• 大きなリダイレクト マップをフロントエンド コードから外します。
• DNS カットオーバーの前にルールを検証します。
• 製品、コレクション、キャンペーンのパスを維持します。
• ストアフロントを再デプロイせずに例外を更新します。

公開前にリダイレクト マップを固めるなら、無料の UrlEdge アカウントを作成 して最初のCSVを取り込んでおきましょう。