背景
クライアントはAIを活用してReactのWebアプリを素早く形にしました。しかし公開後も検索経由のアクセスやページ閲覧はほとんど伸びていませんでした。私たちは既存の画面と機能を活かしながらNext.jsへ移行し、検索対象ページの表示方法を見直しました。別案件のクラウドストレージサービスVirtualDrive.usでも、Next.jsへの移行とSSRの実装に取り組みました。
課題
アプリが動くことと、検索で見つけてもらえることは別の課題です。React自体がSEOに不向きというわけではありませんが、公開ページの初期HTMLに内容やページ固有の情報が十分に含まれない構成では、検索エンジンに内容が伝わりにくくなります。既存機能を壊さず、公開ページを検索ユーザーにも理解しやすい構造へ移す必要がありました。
実施したこと
公開ページをNext.jsへ移行
既存ReactのUIや機能を活かしながら、検索から見つけてもらいたいページをNext.jsのルーティングへ移しました。
SSRと初期HTMLを改善
重要な内容を最初のHTMLに含められるようにし、JavaScriptの実行だけに依存しない公開ページを目指しました。
検索向けのページ情報を整理
ページごとの見出し、タイトル、説明文、内部リンクなどを見直し、サービスの内容が検索結果からも伝わるようにしました。
VirtualDrive.usにも適用
別プロジェクトのVirtualDrive.usでもNext.jsとSSRを採用し、製品紹介ページの発見性を改善しました。
移行後の変化
- AIを活用して開発したReactアプリの公開ページをNext.jsへ移行
- 移行後、検索経由のアクセスとページ閲覧数が増加傾向に転じた
- 別案件のVirtualDrive.usでもNext.jsとSSR導入後に閲覧数の増加が見られた
- 増加率や順位を保証するものではなく、継続的な計測と改善が必要
学び
AIを使って素早く作ったアプリも、公開後の集客まで考えると設計の見直しが必要になることがあります。Next.jsやSSRはそれだけで検索順位を上げる魔法ではありません。内容、メタデータ、内部リンク、表示速度と合わせて整えることで、検索から見つけてもらえる土台を作れます。今回のWebアプリとVirtualDrive.usでは、移行後に閲覧数の増加が見られました。