モバイルファーストとSSR最適化｜JavaScript SEOとレンダリング戦略
hanayama結論：モバイル版が「Google評価の本体」
Googleは2018年からモバイルファーストインデックス（MFI）を段階導入し、2024年に完全移行を完了。2026年現在、Googleが評価するのはモバイル版のサイトコンテンツが本体です。PC版の出来が良くても、モバイル版が貧弱ならSEO評価は低くなります。レスポンシブデザインの徹底とJavaScriptの適切な利用がSEO成果を左右します。
レンダリング方式比較（SSR/SSG/CSR/ISR）
| 方式 | 特徴 | SEO適性 |
|---|---|---|
| SSR（Server Side Rendering） | サーバー側でHTMLを毎回生成 | ◎ 動的サイト向け |
| SSG（Static Site Generation） | ビルド時に静的HTML生成 | ◎ 最速・SEO最適 |
| CSR（Client Side Rendering） | ブラウザ側でJSがHTML生成 | △ クロール課題あり |
| ISR（Incremental Static Regeneration） | SSGに動的更新を組み合わせ | ◎ Next.js等で人気 |
SEO最優先なら SSG > SSR > ISR > CSR の順で選択。
JavaScript SEOの落とし穴と対策
- コンテンツがJSでしか表示されない: クロール時に空ページ扱いされるリスク
- 内部リンクが
<a href>ではない: Googlebotがリンクと認識しない - 遅延読み込みが過度: スクロール前のコンテンツが評価されない
- 対策: 重要コンテンツはHTML初期描画に含める、内部リンクは標準的な
<a>タグで実装
レスポンシブ vs 動的配信
Googleが公式推奨するのはレスポンシブデザイン。理由は以下。
- URLが1つで運用効率が高い
- 重複コンテンツリスクがない
- リダイレクト不要で高速
動的配信（同一URLで端末別に異なるHTML配信）は高度な実装が必要で、UAスニッフィングのバグも起きやすいため、特別な理由がなければレスポンシブ一択です。
モバイルUX最適化のチェックポイント
- タップ要素の十分なサイズ: 48px×48px以上
- タップ要素間の余白: 8px以上
- フォントサイズ: 16px以上（ズーム不要）
- ビューポート設定:
<meta name="viewport" content="width=device-width, initial-scale=1"> - 横スクロール禁止: コンテンツの幅をビューポート内に
- ポップアップの控えめ運用: 全画面ポップアップはペナルティ対象
WordPressのモバイル最適化
- モバイル対応テーマ選定: Astra、GeneratePress、Cocoonなど軽量テーマ
- AMP対応: ニュース系では選択肢、ただし2026年は必須ではない
- モバイルプレビュー機能: Block Editor内で常に確認
- Tap Target Checker等プラグイン: タップ要素のサイズ自動診断
計測ツールと検証手順
- Mobile-Friendly Test: https://search.google.com/test/mobile-friendly （廃止予定だが代替指標は健在）
- PageSpeed Insights: モバイル/デスクトップ別スコア
- Search Console > モバイルユーザビリティ: サイト全体の問題検出
- Chrome DevTools > Device Mode: 実機シミュレーション
FAQ
Q1. PC版とモバイル版で内容を変えても良いですか？
A. 推奨されません。同一コンテンツをレスポンシブで配信するのが原則。
Q2. JavaScriptフレームワーク（React/Vue）はSEOに不利ですか？
A. SSR/SSG構成にすれば問題なし。CSRのみは避けるべきです。
Q3. AMPは2026年も必要ですか？
A. ニュース系の一部以外は必須ではありません。Core Web Vitals最適化で代替可能です。
まとめ
モバイル版がGoogle評価の本体です。レスポンシブ＋SSR/SSG＋CWV最適化で、モバイルファースト時代のSEOを制覇しましょう。
