ecommerce-seo

E コマース SEO

概要

E コマース SEO は、検索エンジンが商品ページを理解して順位付けするための技術的な基盤とコンテンツの基盤を扱います。メタタグ、構造化データ（JSON-LD）、正規 URL、XML サイトマップ、Core Web Vitals が含まれます。Shopify と WooCommerce は技術的な SEO のほとんどを自動で処理するため、タイトル、説明文、構造化データの品質を最適化することに注力しましょう。基盤部分の設定に時間をかける必要はありません。

このスキルを使う場面

• Google ショッピングやオーガニック検索で上位表示が必要な商品ページを構築するとき
• リッチスニペット（価格、在庫状況、レビュー）用の JSON-LD 構造化データを実装するとき
• 複数のバリエーションやフィルターの組み合わせがある商品の正規 URL を扱うとき
• 大規模なカタログ（商品数 10K 以上）用の XML サイトマップを生成するとき
• 商品が Google ショッピングのリッチリザルトに表示されない原因を調査するとき

基本的な手順

ステップ 1：プラットフォームが自動で処理する内容を確認する

何かをインストールする前に、すでに組み込まれている機能を確認しましょう。

機能	Shopify	WooCommerce	BigCommerce
XML サイトマップ	/sitemap.xml に自動生成	/sitemap_index.xml に自動生成（Yoast SEO 使用時）	/xmlsitemap.xml に自動生成
正規 URL	対応（標準機能）	対応（Yoast SEO 使用時）	対応（標準機能）
メタタイトル／説明文の編集	対応（商品エディターから）	対応（Yoast SEO フィールドから）	対応（商品エディターから）
JSON-LD 商品スキーマ	基本機能（テーマによって異なります）	WooCommerce と Yoast または Rank Math が必要	基本機能（テーマによって異なります）
robots.txt	オンラインストアの設定で編集可能	ファイルまたは Yoast から編集可能	管理画面から編集可能

ステップ 2：SEO の基盤を導入する

---

Shopify

Shopify はサイトマップ、正規 URL、基本的なスキーマを自動で処理します。次の点に注力しましょう。

1. SEO アプリをインストールして、構造化データの拡張機能と一括編集機能を利用します。
   • Yoast SEO for Shopify（月額 $19）— 最も包括的
   • Schema Plus（無料プランあり）— JSON-LD 構造化データに特化
   • SEO Manager（月額 $20）— メタ情報の一括編集と構造化データ
2. Shopify Admin → Online Store → Preferences に移動し、次の点を確認します。
   • ホームページのタイトルとメタディスクリプションが設定されている
   • Google Analytics が接続されている
3. 管理画面で各商品のページに移動し、下部にある SEO セクションに入力します。
   • 次の形式に沿って、一意のメタタイトルを作成します。[Brand] [Product Name] - [Key Attribute] | [Store Name]
   • 価格帯、主なメリット、行動喚起を含む、一意のメタディスクリプション（150～160 文字）を作成します
4. Google Search Console にサイトマップを送信します。search.google.com/search-console → Sitemaps に移動し、yourstore.com/sitemap.xml を追加します

---

WooCommerce

1. WordPress プラグインディレクトリから Yoast SEO（無料）または Rank Math（無料）をインストールします。WooCommerce の SEO を適切に設定するには、これらが必要です
2. Yoast SEO のインストール後：
   • Yoast SEO → Search Appearance → WooCommerce に移動し、商品ページのテンプレートを設定します
   • Yoast SEO → Search Appearance → Schema で JSON-LD 構造化データを有効にします
   • Yoast SEO → Tools → Bulk Editor に移動すると、すべての商品のメタタイトルと説明文を一括編集できます
3. 商品スキーマ（価格、在庫状況、レビュー）を拡張するには：
   • レビューの集計機能が組み込まれた WooCommerce Product Schema を含む Rank Math をインストールします
4. Google Search Console にサイトマップを送信します。Yoast は /sitemap_index.xml を自動生成します

---

BigCommerce

1. BigCommerce には基本的な SEO 機能が組み込まれています。BigCommerce Admin → Products → [Edit Product] → SEO タブに移動します
2. 構造化データを拡張するには、BigCommerce App Marketplace から SEO Expert をインストールします
3. Store Setup → Search Engine Optimization に移動して、全体のデフォルト設定を行います
4. yourstore.com/xmlsitemap.xml のサイトマップを Google Search Console に送信します

---

カスタム／ヘッドレス

ヘッドレスストアフロントでは、構造化データを手動で実装します。すべての商品ページで JSON-LD を配信してください。

function buildProductJsonLd(product: Product, reviews: ReviewSummary) {
  return {
    '@context': 'https://schema.org',
    '@type': 'Product',
    name: product.title,
    image: product.images.map(img => img.src),
    description: product.metaDescription || product.description.slice(0, 200),
    sku: product.variants[0]?.sku,
    brand: { '@type': 'Brand', name: product.vendor },
    offers: product.variants.length === 1
      ? {
          '@type': 'Offer',
          url: `https://yourstore.com/products/${product.slug}`,
          priceCurrency: 'USD',
          price: (product.variants[0].priceInCents / 100).toFixed(2),
          availability: product.variants[0].inventoryQuantity > 0
            ? 'https://schema.org/InStock'
            : 'https://schema.org/OutOfStock',
        }
      : {
          '@type': 'AggregateOffer',
          lowPrice: (Math.min(...product.variants.map(v => v.priceInCents)) / 100).toFixed(2),
          highPrice: (Math.max(...product.variants.map(v => v.priceInCents)) / 100).toFixed(2),
          priceCurrency: 'USD',
          offerCount: product.variants.length,
        },
    ...(reviews.count > 0 ? {
      aggregateRating: {
        '@type': 'AggregateRating',
        ratingValue: reviews.average.toFixed(1),
        reviewCount: reviews.count,
        bestRating: '5',
      },
    } : {}),
  };
}

バリエーションページの正規 URL を処理するには、バリエーションパラメーターを削除します。

// Always use the base product URL as canonical
// /products/blue-widget?variant=123 → canonical: /products/blue-widget
function getCanonicalUrl(path: string): string {
  // Strip variant query parameters
  return `https://yourstore.com${path.split('?')[0]}`;
}

大規模なカタログ（商品数 1 万点以上）では、サイトマップインデックスを使用します。

// Serve /sitemap.xml as a sitemap index pointing to paginated product sitemaps
// Each child sitemap: max 50,000 URLs
// Regenerate every 6 hours or on product publish/unpublish events

ステップ 3：商品タイトルと説明を最適化する

SEO の効果が最も高い作業です。次のタイトル形式に従ってください。

• 商品タイトルの形式：[Brand] [Product Name] [Key Attribute] - [Store Name]
  • 例：「Nike Air Max 90 White - Running Store」
• メタディスクリプションの形式：150～160 文字で、価格帯、主なメリット、行動を促す文言を含めます
  • 例：「Nike Air Max 90 を $120 から購入できます。毎日のランニングに適した軽量クッショニング。$75 以上のご注文は送料無料。今すぐ購入。」

よくある問題と修正方法：

• バリエーション間でメタタイトルが重複している（修正方法：バリエーションごとの属性をタイトルに追加する）
• メタディスクリプションが商品説明をそのまま切り詰めたものになっている（修正方法：目的に沿った説明を作成する）
• 商品画像に alt テキストがない（修正方法：[Product Name] - [Color/View] 形式を使用する）

ステップ 4：技術的な SEO の問題に対処する

フィルターページの正規 URL：

• フィルターが有効なコレクションページ（/collections/shoes?color=red）では、自己参照型の正規 URL を使用します
• 並べ替え順のみを指定したページ（/collections/shoes?sort=price-asc）では、フィルターなしのコレクション URL を正規 URL として指定します

Shopify では、これは自動的に処理されます。Yoast を使用する WooCommerce では、Yoast SEO → Search Appearance → Taxonomies に移動し、フィルターされたページの正規 URL の動作を設定します。

robots.txt — 次のパスをブロックします：

• /cart と /checkout — インデックス登録の対象外です
• /account と /search? — インデックス登録の対象外です
• 有効なフィルターが 3 つ以上あるコレクションのフィルターの組み合わせ — noindex, follow メタタグを使用します

Shopify の場合：オンラインストア → テーマ → コードを編集 → robots.txt.liquid WooCommerce の場合：Yoast SEO が robots.txt を自動的に管理します

ステップ 5：Google のツールで確認する

1. Google リッチリザルトテスト（search.google.com/test/rich-results）：任意の商品 URL を貼り付け、構造化データが正しいことを確認します
2. Google Search Console：拡張 → 商品で構造化データのエラーを確認します
3. PageSpeed Insights：Core Web Vitals をテストします。LCP は 2.5 秒未満、CLS は 0.1 未満を目標にします

ベストプラクティス

• すべての商品に固有のメタディスクリプションを作成する — 商品タイトルの重複を避け、クリック率の向上に役立つ主な属性（サイズ、素材、価格）を含めます
• 商品画像を圧縮し、適切なサイズにする — サイズの大きすぎる画像は、LCP スコア低下の最大の原因です。Shopify では自動的に圧縮されます。WooCommerce では ShortPixel または Imagify プラグインを使用します
• マイクロデータではなく JSON-LD を使用する — 保守しやすく、Google も推奨しています
• すべてのページに正規 URL を設定する — 自己参照型の正規 URL により、URL パラメーターによる重複コンテンツを防止できます
• サイトマップを自動更新する — Shopify と WooCommerce + Yoast では自動的に更新されます。カスタムビルドの場合は、商品の公開／非公開時に再生成します
• 画像サイトマップを追加する — Google 画像検索からのトラフィック向けに、説明的な alt テキストを含む商品画像を追加します

よくある落とし穴

問題	解決策
Google ショッピングのリッチリザルトに商品が表示されない	Google Search Console → 拡張 → 商品で構造化データのエラーを確認し、リッチリザルトテストで検証します
ファセットナビゲーションによって、インデックス可能な URL が何百万件も生成される	Shopify／WooCommerce では正規 URL によって自動的に処理されます。カスタムビルドの場合は、フィルターが多いページで noindex, follow を使用します
在庫切れの商品が 404 を返す	ページをステータス 200 で公開したままにし、「在庫切れ」と表示して代替商品を提案します。完全に販売終了した場合のみ、サイトマップから削除します
Schema.org の検証エラー	Google のリッチリザルトテストでテストします。価格と在庫状況が常に存在し、正しい形式になっていることを確認します
Core Web Vitals の低下によるランキングへの悪影響	ヒーロー画像をプリロードし、商品画像を圧縮し、スクロールせずに表示される範囲より下で遅延読み込みを使用します。Shopify の CDN は大きく役立ちます

Related Skills

• @google-shopping-feed
• @google-ads-ecommerce
• @content-commerce
• @social-proof-widgets