SPAを導入する際に必要だったSEO対策についての話 -SSR? Prerendering?- 

これは[DMM.com #2 Advent Calendar 2017](https://qiita.com/advent-calendar/2017/dmm2)の４日目の記事です。

カレンダーのURLはこちら
[DMM.com #1 Advent Calendar 2017](https://qiita.com/advent-calendar/2017/dmm)
[DMM.com #2 Advent Calendar 2017](https://qiita.com/advent-calendar/2017/dmm2)

ども！おはこんばんちは！
動画配信サービスでWebエンジニアをしている、17新卒の小芝です！

動画配信サービスに配属されてからは、
フロントエンドの改修やログ収集システムの構築など、
幅広くやらせていただいています！

この記事では、

- SPAにおけるSEO対策がなぜ必要なのか？
- 対策するにはどんな候補が存在するのか？
- どういう基準で、どんな選択を行ったのか？

についてまとめてみました！

## 5/24 追記
[JSサイトのための第4のレンダリング構成としてダイナミックレンダリングをGoogleが発表 #io18 #io18jp](https://www.suzukikenichi.com/blog/google-will-support-dynamic-rendering/)

SEOのためのSSRはやらなくても良くなったかも？？

## ところでSPA(Single Page Application)ってなに？

>  特徴として、1枚のHTMLページに対してJavaScriptで動的に変更を加えながら、
> 画面の描画を行うアプリケーションのこと（名前の通り）
>  また、使用するパーツをコンポーネント化するため、
> パーツのカプセル化を実現し、再利用も容易になっている

### 従来のアプリケーションとは何が違うのか？

 - 従来：コンテンツの切り替えには、ページ全体を読み込む必要がある
 - SPA：都度都度ページ全体の更新する必要がなく、部分的な更新が行える

様々なフレームワーク(VueやReact等)が出てきたおかげで、
世の中にはかなり普及してきているのではないかと思います

ここでは、
**「SPAはjsで動的に画面描画を行う」**
というところがポイント！

## SPAでSEO対策がなんで必要なの？

### そもそもSEO(Search Engine Optimization)とは？

> ざっくり言うと、検索した時に上位表示させるための様々な手法
> （多少語弊はある）

コンテンツをたくさん持つ企業において、SEOはかなり重要！

仕組みとしては、

- クローラー(Googlebotなど)と呼ばれるロボット型検索エンジンが、Web上のファイルを常に収集
- 収集したファイルから、様々な要素を基に最適化を行っている

つまり、
クローラーに無視されれば、検索の上位には現れない、、、！

### SPAでSEO対策が必要な理由は？

さきほど、SPAは画面の描画にjsを主に使用する、と説明しました
実は、最も気を遣うクローラーの１つであるGooglebotの特徴として、

- GooglebotのJSエンジンが古い

このことから、動的に更新されたjs部分を、
クローラーが正しく評価できているかわからない問題が存在します！

ちなみに社内で行ったテストではうまく評価してくれなかった、、、

「SPAにしたはいいものの、検索に引っかからない」というのは、
かなり致命的な問題ですね！

ここでは、
**「クローラーはjsを正しく評価できない」**
というところがポイントです！

## どうやって解決すればいい？

### 一般的な解決方法は？

- サーバ側であらかじめレンダリングを行い、その結果をクライアントに返す

基本的にはこれに尽きます！
最初からクローラーのjs処理能力に頼らない、ということですね！

### どんな手法があるのか？

- SSR(Server-Side-Rendering)
  - その名の通り、サーバサイドでフロント側の処理を行う(nodejs等)
  - そのため、ページの初期表示が早い
  - SEO対策+ページ表示速度の改善のためにSSRを行う企業は多い
  - その代わり、開発コスト高い&CPU処理能力が必要
- Prerendering
  - 主にHeadless Browser(GUIのないブラウザ)を用いた手法
  - サーバの中にブラウザを用意して、URLを投げたらレンダリング結果が返ってくるイメージ
  - レンダリング用サーバさえあれば、割と簡単にできそう
  - GoogleChromeの中の人が良さげなのを作っていた（[Rendertron](https://github.com/GoogleChrome/rendertron)）
  - 懸念点として、オーバーヘッドやキャッシュをどうするか？などがある

SlideShare等で事例を調べると、ほとんどの企業がSSRを行っており、
Prerenderingの情報はあまり出てこない、、、(日本での事例はなさそう？)

割と最近の記事では、SEO対策ならPrerenderingが楽だよー
ってのがいくつかあり、日本では試してる人がいないだけかな？という印象

### いくつかの項目に分けて比較してみた

調べてみると、使用する技術も様々なものがありそうなので、
比較するようにいくつかの項目に分けてまとめてみました！

- 現在のシステムへの組み込みやすさ
- 開発コスト
- パフォーマンス

今回は、元々存在するシステムの改修のため、
PHP(サーバサイド)とVue(フロントエンド)を用いると仮定し、いくつか候補を出しました

|手法|用いる技術|組み込みやすさ|開発コスト|パフォーマンス|
|:-:|:-:|:-:|:-:|:-:|
|SSR|PHP+V8js+Vue <br> (V8js:PHPの中でjs書けるやつ)|○ <br> (V8jsのおかげでつなぎ込みが容易)|× <br> (実装のコストはそれなりにかかりそう)|○|
|SSR|Nuxtjs <br> (Vuejs+Nextjs)|× <br> (もしも最初からSPAで作っているならこれがbestか)|△ <br> (SSR用に色々用意されていて便利そう)|○|
|Prerender|Rendertron <br> (Headless Browser)|◎ <br> (別途レンダリング用サーバを用意するだけ)|○ <br> (実装はほぼないが、実験が必要なため)|△？ <br> (要実験)|

## で、最終的にどれを選んだの？

やはりSEOのためだけにSSRの実装を行うのはコスパが悪いと思い、
事例は少ないですがRendertronを簡単に使ってみることにしました！

今後は、キャッシュ機構やページ表示速度など、
懸念点を含めて色々実験を行っていく予定です、、、

これがイマイチなら組み込みやすさを考慮し、
（PHP+V8js+Vue）を使って仕方なくSSRしようと思います

## まとめ

- SPAなサービスではSEO対策を考慮する必要がある
- クローラーに気を遣って、あらかじめサーバー側でレンダリングが必要

対策するために、
まずは手っ取り早そうなRendertron(Headless Chrome)を試し、
イマイチであれば、PHP + V8js + Vuejsで実装していこうかなと

Rendertron使ってるよ！
とか、
もっといい方法あるよ！
とかとか、
より良い情報をお持ちの方は、ぜひご紹介ください！

明日は[DMM.com #2 Advent Calendar 2017](https://qiita.com/advent-calendar/2017/dmm2)の5日目！
@mukkoさんです！

#### 参考サイト

- [SPAを開発するエンジニアこそ知るべき、正しく評価されるためのSEO](https://qiita.com/yshnb/items/bc02a2e4609b38f8d3dd)
- [SPAとSEOのほんとのところ(3) クロールされはじめないとはじまりません](https://greative.jp/page/guidebook-spa-seo-3/)
- [新規プロジェクトへの Vue.js x SPA x SSR の導入](https://www.slideshare.net/TsuchiKazu/vuejs-x-spa-x-ssr-79213417?qid=1a0b5afd-8610-4929-897f-207ba6683b44&v=&b=&from_search=3)
- [アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ](https://www.slideshare.net/herablog/2016-69828463?qid=1a0b5afd-8610-4929-897f-207ba6683b44&v=&b=&from_search=4)
- [You Need to know SSR](https://speakerdeck.com/yosuke_furukawa/you-need-to-know-ssr)
- [2017年夏、Selenium、ヘッドレスブラウザ](https://www.kaitoy.xyz/2017/07/12/2017-selenium-headless-browsers/)
- [Vue公式　サーバサイドレンダリング](https://jp.vuejs.org/v2/guide/ssr.html)

SSR不要論系

- [サーバーサイドレンダリング不要論](https://qiita.com/shibukawa/items/184d3101946ec4fa98c1)
- [やっぱりサーバーサイドレンダリングなんかしなくていいやという気持ち](http://lealog.hateblo.jp/entry/2017/07/10/073926)
- [SPA + サーバーサイドレンダリング、そのダルさに関する私見](https://havelog.ayumusato.com/develop/performance/e741-ssr_feel_weary.html)
- [サーバレスアーキテクチャ + SPAで SSRなしのSEO対策した話](https://speakerdeck.com/matsnow/sabaresuakitekutiya-plus-spade-ssrnasifalseseodui-ce-sitahua)
- [Solving SEO with Headless Chrome for your client side framework](https://medium.com/dev-channel/solving-seo-with-headless-chrome-for-your-client-side-framework-288e66fdd2b7)