ReactなどのJavaScriptでページを作るサイト(SPA)はGoogle等の検索ページに情報が掲載されない、SEO(Search Engine Optimization)的に弱いというイメージを私は持っていました。世間的にもそう思っている人は多そうです。
しかし、State of SEO for SPA 2019 という記事を読んで最新のSEO情報にアップデートされました。
まず大前提
そのサイトは本当にSEOが必用なのか？ 最初に検討すべき重要なことです。
- 社内(やパートナー)向け業務システムなどはSEOと無関係です
- ログインしないと使えないクローズなサービスは、サービスの紹介ページを作り、そこをSEOすれば良いはずです
GoogleのクローラーはJavaScriptが動作します
以前はGoogleのクローラーはJavaScriptは読み飛ばしているので、React等で作ったサイトは情報がクロールされないと言われていましたが、現在のGoogleのクローラーはJavaScriptを解釈しますしAjax(JavaScriptとサーバーとの通信)も動作します。 ただし、
- GoogleのクローラーはChrome 74 相当です(2019年5月現在)、したがって通常のReactで書かれたサイトは問題無く解釈されます
- State of SEO for SPA 2019 本文では Chrome 41と書かれていますが、追記で更新されています
- ただし、クローラーは一定時間以上の処理はしてくれないようです、Googleは公式な情報を公開していませんが記事によると 5 秒程度で表示出来れば問題ないようです
- また JavaScript のあるサイトは直ぐにクロールされずに数分〜1週間後に読み込まれる事があるので頻繁に更新される情報が直ぐには検索に反映されない可能性があります
ということで直ぐにページの情報が検索結果に反映されなくてもかまわなければ、表示速度に気を付けて作れば特別なSEO対策はいらない事になります。
SSR(Server Side Rendering)
SSR(Server Side Rendering)は、最初のリクエスト時にサーバー側でページを送り出す方式です。この様なシステムを作る事でSEOを完璧にする事が出来ます。
サーバーをNode.jsのようなJavaScriptを動かせるもので作り、Next.js等のライブラリーを使う事でベースが出来ます。 しかし、
- サーバーが Ruby, PHP, Java … だった場合はどうしまようか？
- ブラウザーで動かす事を前提としてReactのコードはそのままサーバー側で動くのでしょうか？
このように、SSRは開発コスト・運用(サーバー)コストがかかります。
しかし、SSRはページの初期表示が高速化される等のSEO以外のメリットもあるので、開発リソースが豊富にあれば考えても良いと思います。
SSR以外の方法
SSRは開発・運用コストがかかりますが、もう少し手軽な方法もあるようです。
PRERENDER.IO は、サイトをHeadless Chromeでアクセスしたページをキャッシュし、クローラーにはそれを返すというアーキテクチャでSSRに近い事が出来るライブラリー・サービスです。
このように、ローコストでSSR風のSEO対策を行う方法もあります。
まとめ
ネットを使うといろいろな情報が簡単に手に入りますが、その情報がアップデートした事を知らずに古い情報に惑わされている事がままあります。
SEOは、Google社の都合で変化していく情報ですが、アップデートした内容が伝わりにくいような気がします。
State of SEO for SPA 2019 にはさらにいくつかの方法や、それらの比較検討もありますので、SEO情報が古いままのSPA開発者は是非読んでみて下さい。
