【SPA×MPA】初回クロールの罠と、検索流入を最大化するためのハイブリッドSEO戦略
個人でAI生成BGMの配布サイト（Neura Music Archive）を開発・運営しているのですが、前回のURLパス化やCanonicalタグの修正に続き、またしてもSPA特有の挙動と戦うことになりました。
今回は、個人開発サイトにおける「検索流入（集客）の窓口をどう増やすか」という設計の話と、その過程で直面したSearch Console（サチコ）の罠、そして「SPAとMPAのハイブリッド化」に至った経緯の備忘録です。
1. 素材サイトにおける「集客」のフック
当サイトの最大の価値は、「AI生成BGMが無料でダウンロードできること」です。しかし、どれだけ良質な素材を揃えたところで、検索エンジンにインデックスされなければ、インターネットの海においては存在していないのと同じになってしまいます。
そこで、素材ページ（アルバムページ）からの流入だけでなく、サイトの利便性を高めるために多数内蔵した「各種Generatorツール群」も、強力な検索流入の窓口（フック）にしたいと考えました。
ツールを充実させることで、「作業しながら当サイトのBGMを聴いてもらう」という最高の副産物（ループ）も生まれるため、認知を広げるための大きな戦略になるはずでした。
2. 準備不足の段階でサチコに登録してはいけない
ここで、今回の運用における最初の教訓です。
「SEO対策は後回しにして、とりあえず形ができたらSearch Consoleに登録しよう」という進め方は、大幅なタイムロスを生むことになります。
私は、サイトがまだ完全なシングルページ（SPA）で、ルーティングもCanonicalタグも未整備の段階で、サチコにサイトを登録してしまいました。
その結果、Googlebotに「トップページ1枚だけのサイト」と、最初のクロールで判定されてしまったのです。
一度このように低ボリュームなサイトだと判定されてしまうと、再評価の優先度が下がるのか、インデックスの更新頻度が著しく落ちてしまいます。後から慌ててURL設計を修正してインデックスをリクエストしても、クローラーがなかなか巡回に来てくれない期間が続くことになります。初手でSEOをサボった代償は、想像以上に重いものでした。
3. 「UXファースト」の時代に、SPAがSEOで不利という建前と現実
Googleは公式に「JavaScriptも適切に実行してレンダリングする」と明言しています。しかし、実際のGooglebotの挙動を見ていると、やはりJS実行前の静的なHTMLベースでファーストインプレッションを決めつけがちです。
画面遷移が高速で、インタラクティブなユーザー体験（UX）を提供できるSPAが、クローラーの都合（インデックスのコストカットや静的解析の限界）によって評価されにくいというのは、フロントエンド開発者としては少し釈然としない部分があります。
「ユーザーにとって価値あるサイトを評価する」という大原則があるならば、SPAの動的なコンテンツももう少しスムーズに評価してほしいのが本音です。とはいえ、検索エンジンの仕様に文句を言ってもインデックス数は増えないので、こちら側で泥臭く合わせていくしかありません。
4. R2＋iframe埋め込みによる「機会損失」
仕様への不満はさておき、自サイトのツールの実装方法にも大きな落とし穴がありました。
開発の手間を省くため、各種Generatorツール群の本体は「Cloudflare R2」にホスティングし、メインサイト側からは iframe で差し込む形をとっていました。
画面上はサクサク動き、ユーザーにとっては「音楽を聴きながらツールを扱える」という非常に良い体験を提供できていたのですが、SEOの観点からは最悪の構造でした。
Googleのクローラーから見れば、その中身は完全に「空箱」です。ツール内の貴重なテキストや機能名がまったく読み取られないため、「〇〇ジェネレーター 決定版」といった検索キーワードからの貴重な流入チャンスを、完全に逃している状態だったわけです。
5. 検索の窓口を増やすために「あえてMPAを内蔵した」
この「クローラーに無視されるツール群」を、ちゃんとした検索の入り口として機能させるため、サイトの設計を「SPAとMPAのハイブリッド」へと変更しました。
具体的には、ユーザー用とクローラー用で以下の2つのルートを同時に走らせています。
対策1：ロゴの横に「Generatorを選択」プルダウンを新設（MPAルート）
ヘッダーなどの共通レイアウトだけを維持したまま、ルートディレクトリ直下に独立した .html ファイルとして各ツールのページを内蔵しました。物理的なファイルを個別に用意することで、クローラーが直接HTML内のテキストや構造を巡回・インデックスできる「検索の入り口」を強制的に作りました。
対策2：サイドバーの「TOOLS」はそのまま維持（SPAルート）
もちろん、お気に入りのBGMをダウンロードしたり、作業用BGMとして聴きながらツールを弄ったりするユーザーの体験を壊すわけにはいきません。サイドバーから開くツールはSPAの文脈を残し、ページ遷移で音楽がブツブツ途切れない特等席としてそのまま残しました。
まとめ
今回の教訓をまとめると、「初手のSEOをサボると、リカバリーのために気の遠くなるような時間を溶かす」、そして「Googleの都合に付き合うために、時にはあえて枯れた技術（MPA）を混ぜる割り切りも必要」ということです。
「あとから対策すればいいや」の精神でサチコに突っ込むと、最初のクロールで弾かれて長い冬の時代を迎えることになります。
これから個人開発でサイトやサービスを立ち上げる方は、クローラーに「ここは沢山の価値あるページやツールが存在するサイトだ」と一発で理解してもらえる状態を作ってから、満を持してサチコに申請を出すことを強くおすすめします。