2020.12.28
サイトフルリプレースしたら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順位も、フルリプレースで開発改善しやすくなった分、
リプレース前より高い順位を維持できるできるようになりました。
今回、当初の見積もりが甘く、対応が後手に回ってしまったものの、スピーディなリカバリができ、よい経験となりました。