エス・エム・エス キャリア開発グループ Tech Blog

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順位

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

フルリプレース後の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なければ描画終了とみなす）等細かな設定も可能。