サイトフルリプレースしたらSEOが死んだ話と復活劇

こんにちは。プロダクト開発部 大野です
タイトルの通り、以前10年程運用が続いていたサービスのフルリプレースを行いました。
今回はその時の主にSEO周りについてお話したいと思います。

変えたこと

  • PHP 5.2→7.3
  • Ethna→Laravel 5.8
  • Ethna→Vue.js 2.6  (←今回はここの話)
  • 共有個人開発サーバ→ローカルdocker環境
  • オンプレ→AWS
  • デザイン一新
  • DB定義一新
  • 画面操作上の仕様は基本踏襲

Vue.js

SPAで動作するフロントエンドFWのひとつ。ここでは細かい説明は割愛します。
Nuxt.js等もありますが、今回のフルリプレース時点では以前別のサービス構築時にも使用していたVue.jsを採用しました。

フルリプレース後のSEO(予定)

  • SEO対策基本的にはしてるので、きっと大丈夫
  • SPAがSEO不利とよく言われているが、2年前に作った同じくVue.jsベースのサービスも正しくインデックスされてるしたぶん大丈夫だろう
  • 旧サービスの全ページ移行してるわけじゃないので、少しSEO下がりそうなのは想定内

すべてが楽観的すぎました。。。

加速度的に下がっていくSEO順位

リリース後、じわじわ下がっていく順位。
想定はしてたので、許容内ぐらいかな?と思っていましたが、下げ止まらずにリリースから10日間、ほぼ下がり続けました。

フルリプレース後のSEO(現実)

  • SEO対策基本的にはしてるので、きっと大丈夫
    →そもそもAPIで取得されたデータ読み込まれてない
  • SPAがSEO不利とよく言われているが、2年前に作った同じくVue.jsベースのサービスも正しくインデックスされてるしたぶん大丈夫だろう
    →そもそもAPIで取得されたデータ読み込まれてない
  • 旧サービスの全ページ移行してるわけじゃないので、少しSEO下がりそうなのは想定内
    →そもそもAPIで取得されたデータ読み込まれてない

APIのレスポンス待たずに、クローラーの読み込みが終わってる模様。死んだ
実際、インデックスされ直したページのSEO上のキャッシュ表示すると、真っ白のページがちらほら・・・

対策!!

SEO以外にも色々と課題があったのでこなしつつ、SEO順位が下げ止まらないと判断したリリース4,5日ぐらい後から本格開始。

◆1日目

Vue.js初期読み込み高速化リリース

◆2日目

画像遅延読み込みリリース
初回アクセスAPI回数削減リリース

◆4日目

Prerender導入

Vue.js初期読み込み高速化リリース

jsファイルの分割&遅延ローディングを対応
分割しすぎると、http通信のオーバーヘッドが増えて逆効果なので、現状は全体を8つに分割して運用中
https://router.vuejs.org/ja/guide/advanced/lazy-loading.html

【before】

【after】

画像遅延読み込みリリース

vue-lazyloadを導入
https://github.com/hilongjw/vue-lazyload

初回アクセスAPI回数削減

  • Vue側で使用する定数用のマスタデータ取得API
  • 認証API
  • ヘッダーメニュー情報取得API
    等、初回アクセス時に発行するAPIが多かったり重複していたものを整理

Prerender導入

SPAでのSEO対策のひとつ。動的ページのキャッシュ化(高速化)等にも使ったりします。
他にもSPAのSEO対策ではSSR(サーバサイドレンダリング)が定番ですが、Nuxt.jsへの乗り換え等スピード感持った対応が難しそうだった為、Prerenderでの対策を採用。
https://github.com/prerender/prerender

仕組みをざっくり


1. google botの場合だけ、Prerenderサーバへリダイレクト
2. Prerenderサーバから、WebサーバへURLをリクエスト
3. Prerenderサーバ側で、全データが返ってきてレンダリングされた結果をまとめてgoogle botへ返す
これにより、APIで後から取得するデータもまとめてクローラーに認識してもらう。
chrome driverで動作するので、その辺の設定やレスポンス返す条件(最大秒、Ajaxのアクセスが0.5sなければ描画終了とみなす)等細かな設定も可能。

Docker + Fargate でサクサク

元々、APIサーバをDocker + AWS Fargateで構築していたので、同列にPrerenderサーバをFargateのタスクとして追加。
ローカルでの環境構築・検証に1.5日、本番サーバ構築に0.5日程度でできました。便利な時代ですね。

復活しだした順位

最後に

フルリプレースから約半年、最初は少し下落してしまったSEO順位も、フルリプレースで開発改善しやすくなった分、
リプレース前より高い順位を維持できるできるようになりました。
今回、当初の見積もりが甘く、対応が後手に回ってしまったものの、スピーディなリカバリができ、よい経験となりました。

Pocket
LINEで送る