クローラーに見せる情報をSSRで補完する

はじめに

ヘッドレスECをNext.jsで組むと、Reactの気持ちよさに任せてつい何でもクライアント側で描画したくなります。
ただ、それをやりすぎると、検索エンジンから見て「中身の薄いページ」になってしまうんです。

この記事では、モーターサイクル用品を扱うECサイトで、クローラーに届けたい情報をサーバーサイドレンダリング（SSR）でどう補完したのかを解説します。見た目を変えずに、クローラーへの伝わり方だけを底上げする — その具体策を見ていきましょう。

クライアント描画だけでは何が起きるか

JavaScript頼みのリスク

商品名や説明をブラウザ上のJavaScriptで組み立てて表示する場合、最初にサーバーが返すHTMLはほぼ空っぽです。人間のユーザーはJSが実行されれば普通に見られますが、クローラーによってはその実行を待たず、空のHTMLだけを見て立ち去ってしまうことがあります。

つまり「画面には出ているのに、検索エンジンには存在しないも同然」という状態が起こりうるんです。ヘッドレス化で真っ先に気をつけたいのが、この見えないズレでした。

SSRで初期HTMLに情報を載せる

そこで、クローラーに読ませたい情報は初期HTMLの時点で含めるようにします。Next.jsのサーバーコンポーネントやSSRを使えば、サーバー側で商品データを取得し、h1や説明文をあらかじめHTMLに埋め込んだ状態で返せます。

何をSSRで出力するか

h1と商品説明

まず外せないのが、ページの主役を示すh1と商品説明です。h1はそのページが「何のページなのか」をクローラーに伝える最重要の見出しなので、必ずサーバー側で出力します。商品説明も、ユーザーに見せている本文をそのままクローラーにも読めるようにHTMLへ含めました。

ここを疎かにすると、いくらデザインが良くても検索エンジンには「何のページか分からない」と判定されかねません。地味ですが、最優先で押さえる部分です。

関連商品への内部リンク

もう一つ重視したのが、関連商品への内部リンクです。内部リンクはクローラーがサイト内を巡回する経路になり、ページ同士の関連性も伝えます。関連商品ブロックをSSRで出力しておくと、クローラーが商品ページ間を辿りやすくなります。

カテゴリページのリード文とリンクフッター

カテゴリページには、そのカテゴリを説明するリード文と、関連カテゴリや主要商品へつながる内部リンクフッターをSSRで配置しました。カテゴリページはサイトの回遊のハブになるので、情報量とリンクの充実がそのまま巡回性の向上につながります。

見た目を崩さず情報を届ける工夫

sr-onlyという非表示テキスト

「クローラーには伝えたいが、デザイン上は画面に出したくない」情報もあります。そんなときに使うのがsr-only（スクリーンリーダー専用）というテクニックです。CSSで視覚的には隠しつつ、HTMLとしては存在させるので、クローラーやスクリーンリーダーには届きます。

見た目とクローラー向けを分けて考える

ここで大事なのは、「ユーザーに見せる画面」と「クローラーに届ける情報」を意識的に分けて設計する姿勢です。同じページでも、この2つの視点で必要な要素は微妙に違います。デザインを詰めるのと同じ熱量で、クローラー向けの情報設計にも手をかける。この二重の目線がヘッドレスSEOの土台になります。

まとめ

SSRによる情報の可視化は、ヘッドレスECのSEOで最初に取り組むべき施策です。h1・商品説明・内部リンクを初期HTMLに載せ、必要に応じてsr-onlyで補い、カテゴリページには回遊の起点となるリード文とリンクフッターを置く。

見た目を変えずにクローラーへの伝わり方だけを改善できるのが、この手法の強みです。次は、出力した情報にさらに意味を付ける「JSON-LD構造化データの実装」と、ページの入口を検索エンジンに知らせる「動的sitemap・robotsの生成とキャッシュ」も合わせてご覧ください。