前回、 FIrebaseのSPAでOGP対応をしたので、よろしくmetaタグの出力はうまくできるようになったのですが、依然コンテンツがなかなか検索エンジンに認識されないという問題がありました。
検索エンジンに認識されないという問題対策
SPAはJSをまるっとダウンロード、実行する必要があるため、検索エンジンはコンテンツを読みづらいという問題があります。どうすればいいのか調べてみましたが、
- NuxtのSSRを使用する.
- いまの Firebase Hostingをやめて、 HerokuなどのPaaSサービスに乗り換える必要がある。工数大。
JAMStack的な構成に作り変える。
- JAMStackって言いたかっただけです。使用しているフレームワークや方式を大幅に変える必要があり、工数大大。
Rendertron のような Renderingツールを間に挟んでごまかす。
といった方法があるようです。
Rendertronによる対応は、以下の一休さんの記事で知りました。
どうやら、クローラがアクセスする場合は、通常のブラウザアクセスとは異なり、間にレンダラ(Rendertron)をかましてやり、ここがレンダリングした結果をクローラに返しているという方式のようです。通常、この手の課題はSSRを行うことで解消しそうなものですが、SSRを導入することでサーバ側の負荷が上がり、パフォーマンス低下を引き起こした事例がったので、SSRではなく、レンダラを介する手法を取っているとのことでした。
https://developers.google.com/search/docs/guides/dynamic-rendering
Google本家でも、 Javascript実行に時間がかかるサイト(SPA)に対しては、(いろいろと議論はあるようですが)ダイナミックレンダリングを推奨しているようです。
Rendertronの導入、苦戦
Rendertron自体は上記のリポジトリから入手可能ですが、導入や設定において、いくつか苦戦したポイントがあったので、メモしておきます。
Dockerイメージがない
公式ではGoogle App Engineでのデプロイ方法が説明されていて、確かにすぐにデプロイできたのですが、デフォルトのconfigのメモリが４Gになっていて、さらに途中で停止させるわけにはいかないので、無料枠があるとは言えコスト的にちょっとお高い感じになってしまいます。なので安そうなVPSにインストールしようと思ったのですが、残念ながらDockerイメージがなく、新規でインストールする必要がありました。インストール方法はここでは割愛しますが、Puppeteerなどの依存ライブラリにを入れるのに多少時間がかかりました。
Firestore を使用しているページにアクセスするとタイムアウトする
早速Rendertronで試していたいたのですが、レンダリングしたいページFireStoreを使用していたのですが、なぜか必ずタイムアウトします.. おそらくsnapShotなどをFireStoreが待ち受けているので、リクエストが終了したと判断されないような気がします。
このあたりでも似たような問題に遭遇している人がいるようで、とりあえずfirebase.app をDeleteすればいけるとのことです。自分も取り急ぎの、Rendertronからのレンダリングは途中でFirebase.app.deleteを呼んで回避(どうせページ遷移はしないので)しましたが、おそらくもっと良いやり方がありそうです。
それでも遅い
上記の対策によりタイムアウトはしなくなりましたが、それでもレスポンスを返すのに5-7秒かかってしまいました。レスポンスが遅いのがSEO対策上あまりよろしくないので、何かしら改善をする必要がありそうです。取り急ぎRendertronはレスポンスをキャッシュできるので、デイリーで別のところからリクエストを投げて、Rendertronにキャッシュされるようにすることで、レスポンスを改善させました。
試行錯誤はしましたが..
そもそもダイナミックレンダリング自体が議論になっているような話ですが、いろいろ深みにハマっている感が拭えない感じになってしまいました。もっとスマートな方法がないか模索していきたいところです。
