コードリックのHPをSSRに変えてみた

プログラミング

こんにちは！カレーライス好きな人だいたいいい人。中島です。

SEO対策として、弊社のホームページをSPA(シングルページアプリケーション)からSSR(サーバーサイドレンダリング)に変更しました。

今回は、SSRにすることで得られるGoogleさんの評価とSEOについて書いていきたいと思います。

Googleのクローラーはhrefを読み込んでインデックス(Googleで検索した時に検索結果として出てくるようになること)を登録していくらしい
vue-routerのpushを使わずにaタグを使う
階層は３つまでがいいらしい (深くなればなるだけ、情報の価値が低いと判断されるらしい) 。デザインするときも、アプリは深くなっても別にいいけど、サイトは浅くした方がいいかも
コンテンツは、上部にあるほど情報としての価値が高いという判断になるらしいので、記事は結論を先に書いた方がいい
サイトは早い方がいい。遅いと表示される前にユーザーがサイトから離れるためそもそもサイトの意味がない
画像はwebp使うといい👍
インデックスされたくないページはrobots.txtで設定できる
外部リンクが多ければ価値が高まっていくらしい。twitterに載っている、インスタに載っている、別のサイトが参照として使ってくれているとか

実験

SPAでも、インデックスされるという噂を聞いたので実験してみました。


// 例です！情報量によっては、そうならない場合もある！
// 下の非同期処理はfirebaseから配列で情報取得してる。
await funHugahuga() // インデックスされる
await funHogeHoge() // インデックスされない
await funChiriChiri() // インデックスされない
// 下の書き方で全てインデックスされる時がある。
// spaでインデックスをしっかりとさせたかったら結構意識しないとできない。
// firebaseでクエリを使うことで情報を持ってくる量を減らせるので
// ページごとで必要な情報だけを持ってくるようにした方がいい。
// ※aタグにすれば毎回mainから走る
await Promise.all([funHugahuga(), funHogeHoge(), funChiriChiri()])

結果としては、一部インデックスされるという結果になりました。
予測にはなりますが、JavaScriptを実行はしてくれるものの数秒実行したのちに途中で処理を強制的に止めているのではないかと思います。