ヘッドレスECのSEO設計 — SSR可視化・構造化データ・sitemap

はじめに

ヘッドレスEC、つまりShopifyのようなバックエンドと、Next.jsで自作したフロントエンドを切り離した構成は、デザインの自由度が魅力です。ところが公開してしばらく経つと、検索からの流入が思ったように伸びない、あるいは以前より落ちている、という状況になることがあります。

原因ははっきりしています。既製のECテーマが自動で出力していたSEO関連の情報が、フロントエンドを自作した時点で一斉に止まるためです。この記事では、モーターサイクル用品を扱うECサイトをヘッドレス化したときに、止まった機能をどう自前で取り戻したのかを整理します。個別の実装は3本のサブ記事に譲り、ここでは「何が止まるのか」と「どこを押さえれば戻るのか」の全体像を扱います。

フロントエンドを自作した時点で止まるもの

テーマが黙ってやっていたこと

既製テーマを使っているとき、ページの主役を示すh1、商品説明のサーバー出力、パンくずリスト、sitemap.xmlの生成といった処理は、テーマ側で自動的に行われています。設定した覚えがないのに効いていたものなので、無くなったことにも気づきにくい。何もしないままだと、検索エンジンから見て中身の薄いサイトになってしまいます。

画面には出ているのに、検索エンジンには届かない

Next.jsでReactコンポーネントを書くと、つい何でもブラウザ側で描画したくなります。ただ、商品名や説明をブラウザ上のJavaScriptだけで表示すると、サーバーが最初に返すHTMLは骨組みだけになります。クローラー（検索エンジンがページを読みに来るプログラム）はJavaScriptの実行を待たずに次のページへ移ることがあるので、「画面には出ているのに、検索エンジンには存在しないのと同じ」という状態が生まれます。

同じ画面でも、最初に届くHTMLに中身が入っているかどうかで伝わり方が変わる、という違いです。

取り戻した3つの柱

1. SSRで情報をHTMLに載せる

最初に取り組んだのが、クローラーに見せたい情報をサーバーサイドレンダリング（SSR。サーバー側でHTMLを組み立ててから返す方式）で確実に出力することです。h1、商品説明、関連商品への内部リンクを最初のHTMLに含めます。カテゴリページにはリード文と内部リンクのブロックを置き、サイト内を巡る経路と情報量を確保しました。

2. 構造化データで意味を添える

2つ目が、出力した情報に「これは価格です」「これは在庫状況です」と機械の読める形で意味を添える構造化データです。商品情報とパンくずリストをJSON-LDという形式で申告し、検索結果に価格や階層が表示されるようにしています。

3つの柱が揃い、その下でURLの表記が統一されている状態が完成形です。

3. sitemapとURL正規化で入口を整える

3つ目が、商品やカテゴリの増減に自動で追従するsitemap.xmlとrobots.txtです。数万SKUを手動で管理するのは現実的ではないので、生成を自動化しつつ結果をキャッシュし、URL数を監視できる仕組みを持たせました。あわせて、大文字混在のURLや不要なトラッキングパラメータをサイトの入口で301リダイレクトし、重複URLに評価が分散しないようにしています。

画面向けと検索エンジン向けを分けて設計する

これらに共通するのは、ユーザーに見せる画面と、クローラーに届ける情報を分けて設計するという考え方です。ただし、分けるのは形式だけで、中身は必ず同じにします。画面に出していない価格を申告したり、表示と違うテキストを隠して置いたりすると、検索エンジンから信頼できないページとして扱われます。

まとめ

ヘッドレスECのSEOは、テーマが自動でやっていたことを一つずつ手作業で取り戻す作業です。押さえるのは、最初のHTMLに中身を載せること、その内容に機械が読める意味を添えること、ページの入口を自動で最新に保つこと。そして、画面と申告の中身を必ず揃えること。

具体的な実装は、以下の3本で掘り下げています。