背景
クライアントはReactで高速にWebアプリを開発していました。UIはモダンで使いやすい一方、検索エンジンから見ると初期HTMLに十分な本文、見出し、メタ情報が入っておらず、重要なサービスページや記事が思うように評価されていませんでした。Reactはアプリ開発を速くできますが、SEOを自動で解決するわけではありません。検索に強くするには、SSR、SSG、プリレンダリング、メタデータ管理、構造化データなどの追加設計が必要です。
課題
課題は、既存のReactアプリの開発スピードを維持しながら、Googleが初回HTMLで理解できるページに変えることでした。JavaScript実行後にしか表示されない本文、ページごとに変わらないtitle/description、canonicalやOGPの不足、動的ルートのインデックス漏れ、画像altやschemaの弱さが、検索流入と問い合わせ導線の妨げになっていました。
戦略
SEOレンダリング監査
ブラウザ表示だけでなく、初期HTML、メタタグ、canonical、hreflang、OGP、robots、sitemap、構造化データを確認。GooglebotがJavaScript実行前に何を見ているかを可視化しました。
SSR / SSG / プリレンダリング方針の設計
検索流入を狙うページはサーバーサイドレンダリングまたは静的生成、ログイン後の管理画面はクライアントサイドReactのまま残すなど、ページの役割ごとにレンダリング方式を分けました。
メタデータと構造化データの実装
ページごとにtitle、description、canonical、OG画像、Article/Service/Breadcrumb schemaを出し分け、検索結果とSNS共有で内容が正しく伝わるようにしました。
Core Web Vitals改善
画像最適化、不要なJavaScript削減、コード分割、フォント読み込み改善を行い、LCP、INP、CLSを改善しました。
問い合わせ導線の再設計
SEO流入したユーザーが次に何をすべきか迷わないよう、サービスページ、ケーススタディ、無料相談フォームへの内部リンクとCTAを整理しました。
結果
- 検索対象ページの初期HTMLに本文・見出し・メタ情報を配信できるようになった
- Reactの開発スピードを維持しながら、SEOに必要なSSR/SSG構成を追加
- サービスページと記事ページのインデックス安定性が向上
- Core Web Vitalsとモバイル表示速度が改善
- 検索流入から問い合わせフォームまでの導線が明確になった
結論
ReactはWebアプリを素早く作る強力な選択肢ですが、SEOは別途設計が必要です。検索で集客したいページには、SSR、SSG、プリレンダリング、正しいメタデータ、schema、Core Web Vitals対策が欠かせません。IT Support in Tokyoでは、既存ReactアプリのSEO診断から、Next.js移行、SSR実装、問い合わせにつながる導線設計まで支援できます。Reactサイトの検索流入が伸びない場合は、まず無料相談で現状を確認しましょう。