SEOに強いECページを作る

第18章では、Next.jsで高速なECページを作る考え方を学びました。

この章では、速く表示するだけでなく、検索から見つけてもらうためのSEOに強いECページを作ります。

SEOとは、Googleなどの検索エンジンにページの内容を正しく理解してもらい、検索結果から訪問してもらいやすくするための設計です。

ECでは、広告だけに頼ると費用がかかります。

一方で、商品ページやカテゴリページが検索に拾われるようになると、長く集客できる入口になります。

検索する
  ↓
商品ページを見つける
  ↓
商品内容を理解する
  ↓
購入を検討する
  ↓
購入する

攻略本風に言えば、第19章は**「検索からお客さんが来る入口を増やすステージ」**です。

---

19.1 商品ページSEOの基本

商品ページSEOで大切なのは、検索エンジンにも購入者にも、商品内容が分かりやすいページにすることです。

SEOというと、キーワードをたくさん入れることだと思われがちです。

しかし、それだけでは不十分です。

商品ページでは、次の情報をきちんと整理します。

・商品名
・価格
・商品画像
・商品説明
・内容量
・サイズ
・素材
・使い方
・配送情報
・在庫状況
・よくある質問

検索エンジンは、ページの中にある情報をもとに内容を理解します。

購入者も同じです。

ページを見た瞬間に、何の商品なのか、誰に向いているのか、なぜ買うべきなのかが分かる必要があります。

悪い商品ページ：
商品名と価格だけ

よい商品ページ：
商品名、特徴、使い方、配送、注意点まで分かる

商品ページの基本構成は、次のようにします。

1. 商品名
2. 商品画像
3. 価格
4. 購入ボタン
5. 商品説明
6. 使い方
7. 配送・送料
8. よくある質問
9. 関連商品

特に大切なのは、商品名です。

商品名には、購入者が検索しそうな言葉を自然に入れます。

悪い例：
極みセット

よい例：
クラシック節ギフトセット｜贈り物に使いやすい本枯節ギフト

ただし、キーワードを詰め込みすぎると不自然になります。

悪い例：
かつお節 ギフト 高級 だし 本枯節 贈答 お中元 お歳暮 送料無料 人気

人が読んで自然であることが大切です。

SEOは検索エンジンのためだけではありません。

購入者が迷わず理解できるページを作ることが、結果的にSEOにもつながります。

---

19.2 titleとdescriptionの設計

titleとdescriptionは、SEOで特に重要な情報です。

titleは、検索結果やブラウザのタブに表示されるページタイトルです。

descriptionは、検索結果で説明文として使われる可能性がある文章です。

Googleは、検索結果のタイトルリンクやスニペットをページ内容などから生成するため、設定した内容が必ずそのまま表示されるとは限りません。ただし、ページ内容を正しく伝えるための重要な手がかりになります。(Google for Developers)

商品ページのtitleは、次のように設計します。

商品名｜特徴｜ブランド名

例です。

クラシック節ギフトセット｜贈り物に使いやすい本枯節ギフト｜金七商店

descriptionは、商品の内容と購入者にとってのメリットを簡潔に書きます。

クラシック節ギフトセットは、贈り物や季節のご挨拶に使いやすい本枯節の詰め合わせです。内容量、配送、ギフト対応をご確認いただけます。

titleとdescriptionで避けたいのは、抽象的すぎる表現です。

悪いtitle：
最高の商品です

悪いdescription：
こだわりの商品をぜひご覧ください。

これでは、何の商品なのか分かりません。

よいtitleとdescriptionは、検索した人がクリック前に内容を理解できます。

何の商品か
誰に向いているか
どんな特徴があるか

Next.jsでは、商品ごとにメタデータを生成できます。

type ProductMetadataInput = {
  name: string;
  description: string;
  brandName: string;
};

/**
 * 役割: 商品ページ用のtitleとdescriptionを生成する
 * 入力: 商品名、商品説明、ブランド名
 * 出力: SEO用のtitleとdescription
 */
function createProductMetadata(input: ProductMetadataInput): {
  title: string;
  description: string;
} {
  return {
    title: `${input.name}｜${input.brandName}`,
    description: input.description,
  };
}

titleとdescriptionは、検索結果での第一印象です。

商品ページの中身とズレないように、正確に書きます。

---

19.3 カテゴリページの作り方

商品ページだけでなく、カテゴリページもSEOでは重要です。

カテゴリページとは、同じ種類の商品をまとめたページです。

/categories/gift
/categories/dashi
/categories/limited

カテゴリページは、購入者が商品を比較する場所です。

たとえば、ギフト商品を探している人にとって、1つの商品ページだけでなく、ギフト商品がまとまったページがあると便利です。

ギフトを探している
  ↓
ギフトカテゴリを見る
  ↓
複数商品を比較する
  ↓
商品詳細へ進む

カテゴリページに必要な要素は、次の通りです。

・カテゴリ名
・カテゴリ説明
・商品一覧
・選び方の案内
・よくある質問
・関連コラム

カテゴリページの例です。

本枯節ギフト一覧

贈り物や季節のご挨拶に使いやすい、本枯節のギフト商品をまとめました。
内容量、価格、用途に合わせてお選びいただけます。

商品だけを並べるより、冒頭に短い説明を入れる方が親切です。

悪い例：
商品カードだけが並んでいる

よい例：
どんな人向けのカテゴリか説明がある

カテゴリページでは、検索されやすい言葉を自然に入れます。

・ギフト
・贈り物
・お中元
・お歳暮
・内祝い
・手土産

ただし、関係のないキーワードを入れてはいけません。

食品ECなら、用途や食べ方、配送方法など、購入者が知りたい情報を入れます。

カテゴリページは、商品一覧と読み物の中間です。

商品を探せる
  ＋
選び方が分かる

この状態を目指します。

---

19.4 コラムと商品をつなげる

SEOでは、商品ページだけでなく、コラム記事も役立ちます。

なぜなら、購入者は最初から商品名で検索するとは限らないからです。

たとえば、次のように検索する人がいます。

・だしの取り方
・本枯節とは
・お中元に喜ばれる食品ギフト
・料理好きへのプレゼント
・味噌汁をおいしくする方法

このような検索に対して、コラム記事を用意します。

そして、記事の中から自然に商品ページへつなげます。

コラム記事
  ↓
商品の使い方を知る
  ↓
関連商品を見る
  ↓
購入を検討する

コラムと商品のつなげ方は、次のようにします。

記事：
だしの取り方を解説

関連商品：
だしに使いやすい本枯節を紹介

文章の途中で無理に売り込む必要はありません。

読者が知りたいことを説明し、その流れで商品を紹介します。

自然な導線：
この方法でだしを取る場合は、薄削りタイプの商品が使いやすいです。

不自然な導線：
今すぐこちらの商品を買ってください。

コラム記事から商品へつなげる場所は、次のような位置が自然です。

・記事の途中
・記事の最後
・関連記事の下
・使い方説明の直後

商品ページ側からも、関連コラムへリンクします。

商品ページ
  ↓
この商品の使い方を見る
  ↓
コラム記事へ

このように、商品ページとコラムを行き来できる構造にします。

コラム
  ↔
商品ページ

SEOでは、ページ同士のつながりも重要です。

孤立した商品ページではなく、記事、カテゴリ、FAQとつながったECにします。

---

19.5 構造化データ

構造化データとは、検索エンジンにページの内容をより分かりやすく伝えるためのデータです。

Googleは、構造化データを使ってページ内容を理解し、検索結果の表示に活用することがあります。商品ページでは、価格、在庫状況、レビュー、配送情報などが検索結果でリッチに表示される可能性があります。(Google for Developers)

商品ページで使う代表的な構造化データは、Productです。

Productには、次のような情報を入れます。

・商品名
・画像
・説明
・ブランド
・価格
・通貨
・在庫状況
・商品URL

JSON-LDで書くと、次のようなイメージです。

type ProductJsonLdInput = {
  name: string;
  description: string;
  imageUrl: string;
  price: number;
  url: string;
};

/**
 * 役割: 商品ページ用のJSON-LDを生成する
 * 入力: 商品名、説明、画像URL、価格、商品URL
 * 出力: Product構造化データ
 */
function createProductJsonLd(input: ProductJsonLdInput) {
  return {
    '@context': 'https://schema.org',
    '@type': 'Product',
    name: input.name,
    description: input.description,
    image: input.imageUrl,
    offers: {
      '@type': 'Offer',
      price: input.price,
      priceCurrency: 'JPY',
      availability: 'https://schema.org/InStock',
      url: input.url,
    },
  };
}

ここで注意したいのは、ページに表示していない情報を構造化データだけに入れないことです。

悪い例：
ページには在庫なしと表示
構造化データでは在庫あり

よい例：
ページ表示と構造化データを一致させる

構造化データは、検索順位を保証する魔法ではありません。

しかし、検索エンジンに商品情報を正しく伝えるための重要な補助線になります。

---

19.6 OGP画像

OGP画像とは、SNSやチャットでURLを共有したときに表示される画像です。

たとえば、X、Facebook、LINE、Slackなどで商品ページを共有すると、画像、タイトル、説明文が表示されることがあります。

商品ページURLを送る
  ↓
画像とタイトルが表示される
  ↓
クリックされやすくなる

ECでは、OGP画像も購入導線の一部です。

商品ページのOGP画像には、次の要素を入れると分かりやすいです。

・商品写真
・商品名
・ブランド名
・用途が分かる短い言葉

例です。

クラシック節ギフトセット
贈り物に使いやすい本枯節ギフト
金七商店

OGP画像で避けたいのは、文字を詰め込みすぎることです。

SNS上では小さく表示されるため、細かい文字は読めません。

悪い例：
商品説明を長文で入れる

よい例：
商品名と短い訴求だけにする

商品ごとにOGP画像を用意できると理想です。

しかし、最初は共通テンプレートでも構いません。

商品画像
  ＋
商品名
  ＋
ブランド名

Next.jsでは、商品ごとにOGP画像を生成する設計もできます。

ただし、最初は手動で画像を用意するだけでも十分です。

OGP画像は、SEOというよりも、SNSやメッセージで共有されたときのクリック率に関係します。

検索から見つかる
  → titleとdescription

SNSで広がる
  → OGP画像

このように役割を分けて考えます。

---

19.7 パンくずリスト

パンくずリストとは、今見ているページがサイト内のどこにあるかを示すナビゲーションです。

たとえば、次のような表示です。

ホーム > ギフト > クラシック節ギフトセット

パンくずリストがあると、購入者は現在地を理解しやすくなります。

今どのカテゴリの商品を見ているのか
前のカテゴリに戻れるか
サイト全体の構造が分かるか

SEOでも、パンくずリストはサイト構造を伝える助けになります。Googleは、ページ内のパンくずマークアップを検索結果でページ分類に使うことがあります。(Google for Developers)

商品ページでは、次のように設置します。

ホーム
  >
ギフト
  >
クラシック節ギフトセット

Next.jsでパンくず用のデータを作るなら、次のような型にします。

type BreadcrumbItem = {
  label: string;
  href: string;
};

const productBreadcrumbs: BreadcrumbItem[] = [
  {
    label: 'ホーム',
    href: '/',
  },
  {
    label: 'ギフト',
    href: '/categories/gift',
  },
  {
    label: 'クラシック節ギフトセット',
    href: '/products/classic-bushi-gift',
  },
];

パンくずリストで注意したいのは、階層を深くしすぎないことです。

悪い例：
ホーム > 商品 > 食品 > 乾物 > かつお節 > ギフト > 季節商品 > 商品名

よい例：
ホーム > ギフト > 商品名

購入者が理解しやすい階層にします。

パンくずリストは地味ですが、ECでは大切なナビゲーションです。

迷わないサイトは、購入されやすくなります。

---

19.8 売り切れ商品のSEO対応

ECでは、商品が売り切れることがあります。

売り切れ商品をどう扱うかは、SEOでも重要です。

売り切れたからといって、すぐにページを削除するのはおすすめしません。

なぜなら、その商品ページに検索流入や外部リンクがある可能性があるからです。

商品が売り切れた
  ↓
ページを削除
  ↓
検索から来た人が404になる
  ↓
機会損失

売り切れ商品の対応は、状況によって分けます。

再入荷予定あり：
ページを残して売り切れ表示

再入荷予定なし：
販売終了として残す

完全に不要：
関連ページへリダイレクトを検討

売り切れ表示の例です。

現在、こちらの商品は売り切れです。
再入荷が決まり次第、こちらのページでご案内いたします。

再入荷通知やLINE登録につなげることもできます。

再入荷のお知らせをご希望の方は、LINEにご登録ください。

売り切れ商品ページには、関連商品を表示します。

この商品は売り切れです。
同じ用途の商品はこちらをご覧ください。

これにより、購入者を完全に逃さずに済みます。

売り切れ
  ↓
関連商品へ案内
  ↓
別の商品を購入

売り切れ商品の構造化データでは、在庫状況もページ表示と一致させます。

ページ表示：
売り切れ

構造化データ：
OutOfStock

ページ表示と構造化データがズレると、検索エンジンにも購入者にも不親切です。

売り切れ商品は、削除する前に、検索流入、再入荷予定、代替商品を確認します。

---

19.9 季節商品・限定商品の扱い

季節商品や限定商品は、ECで強い集客導線になります。

たとえば、次のような商品です。

・お中元
・お歳暮
・母の日
・父の日
・年末年始
・バレンタイン
・催事限定商品
・数量限定商品

季節商品では、販売期間が終わったあともページをどう扱うかが重要です。

毎年同じような商品を販売する場合、ページを残して育てる方法があります。

2026年のお中元ページ
  ↓
販売終了後もページを残す
  ↓
2027年に内容を更新する

毎年URLを変えすぎると、ページの評価が分散しやすくなります。

毎年URLを変える：
/2026/summer-gift
/2027/summer-gift

継続して使う：
/summer-gift

長く使うページは、次のようなURLにします。

/summer-gift
/winter-gift
/mothers-day

販売期間が終わったら、次のように表示します。

今年の販売は終了しました。
次回の販売開始は、決まり次第こちらのページでご案内いたします。

また、LINE登録やWaiting Listにつなげることもできます。

次回販売のお知らせをご希望の方は、LINEまたはWaiting Listにご登録ください。

限定商品では、販売終了後にページを削除するのではなく、ブランドの実績として残す方法もあります。

販売終了しました。
たくさんのご注文をいただき、ありがとうございました。
関連商品はこちらからご覧いただけます。

季節商品と限定商品は、短期販売ですが、ページ設計は長期で考えます。

短期で売る
  ＋
長期で検索入口として育てる

これが季節商品のSEO設計です。

---

19.10 AI検索に拾われやすい商品説明

最近は、通常の検索結果だけでなく、AIによる検索体験も広がっています。

Googleは、AI OverviewsやAI ModeなどのAI機能に関して、サイト運営者向けの公式ガイドを公開しています。基本方針としては、AI専用の特別な裏技よりも、ユーザーに役立つ高品質なコンテンツを作り、検索エンジンがアクセスできる状態にすることが重要です。(Google for Developers)

AI検索に拾われやすい商品説明を作るには、次の情報を分かりやすく書きます。

・何の商品か
・誰に向いているか
・どんな用途で使うか
・他の商品と何が違うか
・サイズや内容量
・使い方
・注意点
・配送条件

AIは、商品名だけではなく、文脈も見ます。

そのため、短すぎる商品説明は不利になりやすいです。

悪い例：
こだわりのギフトセットです。

よい例：
クラシック節ギフトセットは、料理好きの方への贈り物や季節のご挨拶に使いやすい本枯節の詰め合わせです。常温で保存でき、味噌汁、煮物、和え物など日常の料理に使えます。

AI検索に向けた商品説明では、質問に答えるように書くと分かりやすくなります。

どんな人に向いていますか？
どんな料理に使えますか？
ギフト対応はありますか？
保存方法は？
配送には何日かかりますか？

FAQも有効です。

Q. ギフト包装はできますか？
A. 対応可能です。注文時にギフト包装を選択してください。

Q. 常温で保存できますか？
A. 未開封の場合は常温保存が可能です。開封後は湿気を避けて保存してください。

AI検索に拾われやすくするために、無理に不自然な文章を書く必要はありません。

大切なのは、人が読んでも分かりやすく、検索エンジンにも内容が伝わることです。

商品名だけで終わらせない
用途を書く
対象者を書く
使い方を書く
注意点を書く
FAQを書く

AI検索対策は、特別な魔法ではありません。

情報不足のページを、分かりやすく具体的なページにすることです。

---

第19章のまとめ

SEOに強いECページを作るには、検索エンジンだけを見るのではなく、購入者にとって分かりやすいページを作ることが大切です。

この章で覚えておきたいポイントは、次の通りです。

1. 商品ページには、商品名、価格、説明、画像、配送情報を整理して載せる
2. titleとdescriptionは、何の商品か分かるように書く
3. カテゴリページは、商品を探しやすくする棚になる
4. コラム記事と商品ページをつなげると検索入口が増える
5. 構造化データで商品情報を検索エンジンに伝える
6. OGP画像はSNSやチャットで共有されたときの入口になる
7. パンくずリストでサイト構造を分かりやすくする
8. 売り切れ商品は、すぐ削除せず再入荷や関連商品へつなげる
9. 季節商品や限定商品は、短期販売でもページを長期で育てる
10. AI検索に拾われやすい商品説明は、具体的で分かりやすい説明である

SEOの基本は、次の一言にまとめられます。

検索する人の疑問に、商品ページの中で正確に答える。

検索エンジンに向けて作るのではなく、購入者が知りたいことを丁寧に整理する。

その結果として、検索にもAIにも理解されやすいECページになります。

第20章では、検索やSNSから来た購入者を、実際の購入につなげるための売れる導線設計を作っていきます。