はじめに
ヘッドレスEC — つまりShopifyのようなバックエンドと、Next.jsで自作したフロントエンドを切り離した構成は、デザインの自由度が魅力ではないでしょうか。
ただ、その自由と引き換えにSEOが一気に不利になるという落とし穴があるんです。
この記事では、私がモーターサイクル用品を扱うECサイトをヘッドレス化したときに、失われたSEOをどう取り戻したのか、その全体像を解説します。個別の実装は各サブ記事に譲りつつ、まずは「なぜ不利になるのか」と「どこを押さえるべきか」を整理していきます。
なぜヘッドレスはSEOで不利になるのか
テーマが黙ってやってくれていたこと
既製のECテーマを使っているときは、実は多くのSEO施策がテーマ側で自動的に行われています。適切なh1、商品説明のサーバー出力、パンくずリスト、sitemap.xmlの生成 — これらは意識しなくても「勝手に効いていた」ものなんです。
ヘッドレス化してフロントエンドを自作すると、この自動でやってくれていたものが一斉に消えます。何もしなければ、検索エンジンから見て「中身の薄いサイト」に見えてしまう。これがヘッドレスの最初の落とし穴です。
クライアント描画の見えにくさ
Next.jsでReactコンポーネントを書くと、つい何でもクライアント側で描画したくなります。しかし商品名や説明をブラウザ上のJavaScriptだけで表示すると、クローラーによってはその内容を十分に読み取れないことがあります。
JSが実行されるまで中身が空。クローラーに商品情報が伝わりにくい
最初のHTMLに見出し・説明・内部リンクが含まれ、確実に伝わる
見た目は同じでも、クローラーへの伝わり方はまるで違います。
取り戻すべき3つの柱
SSRによる情報の可視化
まず取り組んだのが、クローラーに見せたい情報をサーバーサイドレンダリング（SSR）で確実に出力することです。h1、商品説明、関連商品への内部リンクをHTMLの初期状態に含めます。視覚的には見せたくないものは、sr-onlyという非表示テキストを使ってクローラーにだけ届ける工夫もしています。
カテゴリページにはリード文と内部リンクフッターをSSRで配置し、サイト内の回遊性と情報量を担保しました。詳しくは「クローラーに見せる情報をSSRで補完する」で解説します。
構造化データ（JSON-LD）
2つ目の柱が、検索結果にリッチな表示を出すための構造化データです。商品情報とパンくずリスト（BreadcrumbList）をJSON-LD形式で出力し、価格や在庫、階層構造を検索エンジンに明示的に伝えます。
h1・説明・内部リンク
商品・パンくずのJSON-LD
動的生成＋キャッシュ
ヘッドレスでも失わないSEO
これがうまく効くと、検索結果にパンくずや価格が表示され、クリック率の改善につながります。「JSON-LD構造化データの実装」で詳しく扱います。
動的sitemapとURL正規化
3つ目が、商品やカテゴリの増減に自動追従するsitemap.xmlとrobots.txtです。数万SKUを扱うと手動更新は現実的ではないので、生成を自動化しつつ結果をキャッシュし、URL数などを統計APIで監視できるようにしました。
あわせて、商品URLの大文字混在や不要なトラッキングパラメータをEdgeミドルウェアで301リダイレクトし、重複URLによる評価の分散を防いでいます。
地道な積み重ねが検索流入を守る
「見た目」と「クローラーに見せる情報」を分ける
これらの施策に共通するのは、ユーザーに見せる画面と、クローラーに届ける情報を意識的に分けて設計するという考え方です。sr-onlyテキストもJSON-LDも、人間の目には基本的に触れませんが、検索エンジンには重要な手がかりになります。
見た目を作り込むのと同じ熱量で、クローラー向けの情報も作り込む。この二重の視点を持てるかどうかが、ヘッドレスECのSEOの成否を分けるんです。
一つひとつは地味な作業
正直に言うと、これらの施策はどれも派手さがありません。h1を一つ足す、JSON-LDを一種類増やす、リダイレクトを一本引く — 個々の効果は小さく見えます。
SEOは複利で効く
一つひとつは小さくても、SSR・構造化データ・sitemap・正規化が揃うと、検索エンジンから見たサイトの「読みやすさ」が底上げされます。地道な積み重ねこそが、長期の検索流入を守ります。
まとめ
ヘッドレスECのSEOは、「テーマが自動でやってくれていたこと」を一つずつ手作業で取り戻す作業です。ポイントは、見た目とクローラー向け情報を分けて設計し、地道な施策を積み重ねること。
具体的な実装は、以下の3本のサブ記事で掘り下げています。
- クローラーに見せる情報をSSRで補完する — h1・商品説明・内部リンクのサーバー出力とsr-onlyの活用
- JSON-LD構造化データの実装（商品・パンくず） — リッチリザルトにつなげるスキーマ設計
- 動的sitemap・robotsの生成とキャッシュ — 商品増減への自動追従とURL正規化
自由なフロントエンドを手に入れつつSEOも守る。その両立は、決して魔法ではなく設計の積み重ねで実現できます。