NetlifyのPrerenderingを使うとクローラにレンダリング済みのHTMLを返せる

どういうこと？

以下で試せる。ユーザーエージェントをGooglebotにしている。

code:bash

UA='User-Agent: Mozilla/5.0 (Linux; Android 5.0; SM-G920A) AppleWebKit (KHTML, like Gecko) Chrofari (compatible; AdsBot-Google-Mobile; +http://www.google.com/mobile/adsbot.html)'

curl -H "$UA" https://piping-ui.netlify.com/

以下のように返却される。Vuetifyを使っているのでVuetifyのCSSがちゃんとHTMLにレンダリングされている。サーバーサイドレンダリング（Vue）などは一切していないプロジェクト（Piping UI）

https://gyazo.com/aa8b85381ce8987b18037e541bf84dc6

ユーザーエージェントがクローラだとレンダリング済みのHTMLを返却するようになっている。

発見元: https://twitter.com/raise_ha_tenshi/status/1241361762370240512

Prerenderingを有効にする方法

Settings > Build & Deploy > Prerenderingにあるチェックボックスにチェックする。

https://gyazo.com/0e5e1cbcccf8f67384e0bb8af1276acd

Netlify公式ドキュメント: Prerendering | Netlify Docs

実際にどれぐらいレンダリングできているか？

まず、いかが実際のブラウザでのレンダリング。

https://gyazo.com/982dc961c88fd2447db5894f1c6d3fe0

以下がcurlコマンドでのリクエストHTMLに保存してブラウザで開いたもの。

https://gyazo.com/bd0c33bb7fd5fc5b365b1d439feb3514

重要な文字がだいぶレンダリングされている。Vueのプロジェクトで以下の"Piping UI"や"Send", "Get"や"Drop a file here"など全てJavaScriptが（Vueが）動かないと表示されないがちゃんとHTMLにその情報が載っていることがわかる。

クローラが見るのでデザインが多少崩れていることは問題ない。検索キーワードでヒットするために大事な文字がクローラに伝わる。

おまけ

Googlebotは現在JavaScriptをちゃんと実行してインデックス化している。

Piping UIで多言語対応ための動的な<meta name="description" content="...">追加をテストしているブランチとそのデプロイ

上記ではJavaScriptで<meta name="description" content="...">を書き換える処理をしてそれがちゃんとGoogle検索結果に乗ることを検証した。

だがGoogle以外のクローラだとまだまだJavaScriptを実行してくれてない気がしているので、このPrerenderingはとても良さそう。

またGoogleでも最初はJavaScript動かさずに得たHTMLを検索結果に載せている気がしているので最初からレンダリングされた文字をGoogleに伝えたい時に使えると思う。

Cloudflareなどのコンテンツをキャッシュする系のサービスを使うとこの効果を発揮できなかったり、最悪のケースとして逆にブラウザユーザーにクローラ用のHTMLを渡してしまいそう。キャッシュするサービス側にユーザーエージェントを見てキャッシュ使うか決めるような細かい設定がないこの機能を有効にしづらいかもしれない。