SPAのSEO対策まとめ：SSR・SSG・プリレンダリングの使い分け

SPAにおけるSEOの課題と対策
1. なぜSPAはSEOに弱いのか？
2. SEO対応のための手法
  1. プリレンダリングの例：Prerender.io
まとめ

SPAにおけるSEOの課題と対策

なぜSPAはSEOに弱いのか？

SPAはJavaScriptでページの描画を制御するため、検索エンジンのクローラーがコンテンツを正しく読み取れない可能性がある。特にGoogle以外の検索エンジンや、SNSのOGP取得には不利な構成になりやすい。

読者

えっ、JavaScriptで描画してるとダメなの？

HTMLが最初に返されるタイミングでは、ほぼ空っぽの状態で、その後JavaScriptが実行されてようやくDOMが構築される。これがクローラーにとって認識しづらい理由になる。

ごりら

DOMが見えるタイミングとクローラーが見るタイミングにズレがあるってことだな。

SEO対応のための手法

SPAのSEO対策として代表的な方法は以下の3つ：1. SSR（サーバーサイドレンダリング）、2. SSG（静的サイト生成）、3. プリレンダリング。

読者

結局どの方法が一番いいの？

フレームワークに応じて選ぶのがベスト。Next.jsならSSRやSSGが簡単に導入できるし、Vue/Nuxtでも同様。既存SPAに後付けで対策するならプリレンダリングが現実的な選択肢。

ごりら

まずは自分のプロジェクトで使ってるフレームワークを確認しようぜ。

プリレンダリングの例：Prerender.io

Prerender.ioなどのツールを使えば、SPAでもクローラー向けにHTMLを事前に生成して返すことができる。これは非技術者でも比較的導入しやすい。

読者

実装難易度が低いなら試してみたい！


# Prerender.ioの設定例（nginx）
location / {
  try_files $uri @prerender;
}

location @prerender {
  set $prerender 0;
  if ($http_user_agent ~* "(baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot)") {
    set $prerender 1;
  }
  if ($args ~ "_escaped_fragment_") {
    set $prerender 1;
  }
  if ($http_user_agent ~* "Googlebot") {
    set $prerender 1;
  }

  if ($prerender = 1) {
    proxy_pass http://service.prerender.io;
  }
  if ($prerender = 0) {
    proxy_pass http://localhost:3000;
  }
}

まとめ

SPAのSEO対策は「クローラーに見えるHTMLをどう提供するか」が鍵になる。プロジェクトの規模や技術スタックに合わせて、SSR/SSG/プリレンダリングをうまく使い分けよう。

ごりら

特にBtoBサイトやLPなど、SEOが重要な場面では対策必須だぞ。