プリレンダリングについて調べたので書いておく。
構成と役割
Rails + React + Redux
以下プリレンダリング用のライブラリ
- prerender
- https://github.com/prerender/prerender
- クライアント側で動くnode_module
- HeadlessChromeを起動し、レンダリングしてくれる
- prerender_rails
- https://github.com/prerender/prerender_rails
- サーバー側で動くRack middleware
- クローラーからのリクエストかどうか判定する(User Agent と
_escaped_fragment_パラメーターで判断) - prerenderサービスへのGETリクエストを作成する
- クローラーにHTMLを返す
Ajaxを使ったWebページをクローリングするための歴史的経緯
_escaped_fragment_とはなんぞや？というところから。
当時(2009年頃)Ajaxを使ったWebページがクローラーでインデックスできないので以下のようなガイドをGoogleが出した。
- GoogleのクローラーはURLに
#!が含まれているとAjax使ったページだと認識するよ - なのでAjaxを使ったWebページのURLは
#ではなく#!を含むようにしておいてね#が使われていると#以降はHTTPリクエストとして認識されないから書き換えてね- サーバー側では
#!使ったページのスナップショットを用意する必要があるよ
- クローラーがURL内の
#!を発見すると_escaped_fragment_に置き換えてアクセスしてくるよ - その時は事前に用意したスナップショットをクローラーに返してね
#!をURLに含まないページについては<meta name="fragment" content="!">を設定してねwww.example.comをwww.example.com?_escaped_fragment_=にしてアクセスするよ- 私達はパラメーターが付加されたURLを
ugly URLと呼んでるよ
WebMaster向けに出されたDocument : https://developers.google.com/webmasters/ajax-crawling/docs/getting-started
この仕様が2018年夏でサポートされなくなる。
Googleによるアナウンス(2015年に出された) : https://webmaster-ja.googleblog.com/2015/10/deprecating-our-ajax-crawling-scheme.html
じゃあどうすればいいの？ということについては、
Google の 2009 年の提案は、もう有効なものではありませんので、今後はプログレッシブ エンハンスメントの原則に沿って開発を進められることを推奨します。たとえば、HTML5 の History API を使用することで、Google のシステムだけでなく幅広いブラウザが履歴にアクセスできるようにすることが可能です。
とのこと。
懸念点
プリレンダリングされたページと実際のページが異なるとクローキングとみなされる場合がある。
Q: JavaScript フレームワークを使用し、Googlebot にはプリレンダリングしたページを提示しています。このままで問題ありませんか？ A: 通常、Google のためだけにプリレンダリングする必要はありません。プログレッシブ エンハンスメントの原則に沿いつつ、パフォーマンス最適化のためプリレンダリングを行う場合、プリレンダリングしたコンテンツと、通常のユーザーに対して表示するコンテンツが、見た目上も体験上も同じになるようにしてください。Googlebot に対して提示するコンテンツと、通常のユーザーに対して表示するコンテンツが異なる場合はクローキングと見なされ、ウェブマスター ガイドライン違反と判断されることがあります。
まとめ
クローラーがJavascriptを実行して実際のページを自分でレンダリングできるようになっているため、GoogleのSEOのためにプリレンダリングの仕組みを導入することは有効ではない。
プログレッシブ エンハンスメントの原則に沿ったWebページを作成することが必要になると思われる。