テクニカル
CSR
ブラウザ側のJSで画面を描画する方式。初期HTMLが空でSEOに不利になりやすい。
CSRとは？
CSR（Client-Side Rendering）は、サーバーは最小限のHTMLとJavaScriptを返し、実際の画面描画はブラウザ側のJSが行う方式です。
SPAの標準的な描画方法です。
初期HTMLには本文がほとんど含まれず、JS実行後に内容が現れます。
Googleはレンダリングを試みますが、遅延や失敗のリスクがあり、SEOではSSRより不利になりがちです。
CSRの使い方・実践方法
CSRのSEO課題と対策は次のとおりです。
- 初期HTMLが空でクローラーが内容を取得しにくい
- インデックスが遅延・不安定になることがある
- 重要ページはSSRやプリレンダリングへ移行
- メタ情報がJS依存だとSNS共有でも不利
CSRで押さえるべきポイント
管理画面やログイン後のアプリなど「検索流入が不要な領域」ならCSRで問題ありません。
一方、検索集客が必要な公開ページは、CSR単独を避けてSSRやプリレンダリングを採用するのが安全な判断です。
CSRを実践するなら
Saguru なら、月額270円から、SEOキーワード調査・上位サイト分析・自サイトSEO診断のすべてが使えます。
「CSR」を理解した上で、すぐに実践に移せます。
登録なしで1日5回まで無料 ／ メール登録で1日30回 ／ ベーシック月額270円 ／ 自サイトをSEO診断
CSRについてよくある質問
CSRは絶対にSEOで不利？
公開ページでは不利になりがちです。
ただし検索流入が不要な管理画面等では問題ありません。
ただし検索流入が不要な管理画面等では問題ありません。
GoogleはCSRを処理できる？
レンダリングしますが、遅延や失敗のリスクがあります。
確実性ではSSRが上です。
確実性ではSSRが上です。
CSRからの改善策は？
重要ページのSSR化、プリレンダリング、ダイナミックレンダリングの導入が有効です。