ダイナミックレンダリングとSEOへの影響は？

弊社のSEOコンサルタントが愛用しているSEOツール「Botify」。
最近日本法人（https://jp.botify.com/）が設立されました。
このたびBotify blogの記事翻訳の許可をいただきましたので今後ご紹介していきます。
サイトの規模が大きくなると、直面するのがクロールやインデックスの問題です。メインコンテンツにJavaScriptを使用しているサイトの場合、解決方法の一つとしてダイナミックレンダリングが挙げられます。しかし、現場の感覚ですとダイナミックレンダリングを導入しているサイトはまだ少数派です。そこで今回はダイナミックレンダリングを基礎から学べるbotifyの記事をご紹介します。

Googleの2018年のI/O会議で、ジョン・ミューラー氏がダイナミックレンダリングの概念を紹介しました（実際には、多くのサイトが自作のソリューションやサードパーティのソフトウェアを活用してすでにレンダリングしていましたが）。

「ダイナミックレンダリングを一言で言うと、ユーザーにはクライアント側でレンダリングされた通常のコンテンツを送り、検索エンジンにはサーバーサイドで完全にレンダリングされたコンテンツを送るという原理です」とジョンは説明しました。

そして6月30日、Bingはウェブマスターガイドラインを更新し、興味深い追加事項を発表しました。それは「Bingは、Bingbotのような特定のユーザーエージェントに対して、特に大規模なウェブサイトでは、クライアントサイドでレンダリングされたコンテンツとプリレンダリングされたコンテンツを切り替えるダイナミックレンダリングを推奨しています。」というものでした。

GoogleとBingの両方が推奨ソリューションとして発表するほどのことであれば、SEO担当者としては、どのような状況でそれが適切なのか、どのように役立つのか、どのような影響に注意しなければならないのかを理解しなければなりません。

ダイナミックレンダリングとは何か？

ダイナミックレンダリングとは、サーチエンジンボット用のプリレンダリングです。各ページの静的なHTML（サーバー側のレンダリング）バージョンを作成し、GooglebotやBingbotなどに提供します。

これは、ユーザーエージェントの呼び出しに応じて、ページのレンダリング方法を変える技術です。ユーザーエージェントごとに、クライアントサイドでレンダリングされたコンテンツと、プリレンダリングされたコンテンツを切り替えます。

言い換えると、ダイナミックレンダリングは、クライアント側でレンダーしたコンテンツをユーザーに送信し、動的なコンテンツを静的なHTMLに変えてサーチエンジンに送信します。つまり、GoogleがJavaScriptを実行しなくてもコンテンツがクロールされて、インデックスが作成されます。

検索エンジンのボットがダイナミックレンダリングしたページにアクセスすると、ヘッドレスクロームでオンデマンドにレンダリングしたページのバージョンを取得します。

「ヘッドレス」とは、視覚的な表現や画面を持たないブラウザのことで、インタラクティブな画面ではなくコードで出力されることを除けば、ブラウザの基本的な技術をすべて備えています。

ダイナミックレンダリングは何のため？

ダイナミックレンダリングは、大規模でJavaScriptを多用する、変化の激しいサイトに最適です。また、予算や技術者不足の企業にも有効です。

Googleは、「ダイナミックレンダリングは、インデックス作成可能で、JavaScriptで生成されたコンテンツが急速に変化する際に適している」と説明しています。

ダイナミックレンダリングは、検索エンジンのボットが重要なコンテンツをより多くクロールし、インデックス作成することにも役立つため（詳しくは後述します）、クロールバジェットの問題に悩むサイト – 通常、大規模ウェブサイトに最適です。

また、サーバー側のレンダリングよりも導入が容易で、人間とボットの両方にコンテンツを事前にレンダリングするよりも低コストなこともわかっています。

あなたのサイトにダイナミックレンダリングが適しているかどうか判断が難しい場合、以下の質問にひとつでも当てはまるなら、導入を検討してみてはいかがでしょうか

ダイナミックレンダリングの実装を検討しているウェブプロパティは、インデックス作成可能 (つまり、検索エンジンで見つけられるようにしたい)
当該ウェブプロパティは、コンテンツの一部または全部の生成にJavaScriptを使用している
自社ウェブサイトのコンテンツは急速に変化している(例：在庫が常に変化するEコマースサイトなど)
クロールバジェットの問題で悩んでいる(つまり、検索エンジンのボットが重要なコンテンツを見つけられない懸念がある)
エンジニアチームは、業務が多すぎて、サーバー側のレンダリングを実装できない状態
予算の制約がある

GoogleとBingがダイナミックレンダリングを勧めるのはなぜ？

Googleは次のように公言しています。

「GooglebotがJavaScriptをレンダリングできるといっても、それに頼りたくはありません。」 — Martin Splittは、ダイナミックレンダリングを実装する理由についてこう説明しています

「現状では、JavaScriptの処理が難しく、すべての検索エンジンのクローラーが正常に処理できるわけでも、すぐに処理できるわけでもありません。将来的には、この問題が修正されることを期待していますが、それまでの間は、この問題の回避策としてダイナミックレンダリングを推奨します。」— Googleダイナミックレンダリングに関するGoogleのドキュメント

ここで重要なのは、Googleにはレンダリングキューと2つのインデックス作成の波があるということです。

GoogleのHTMLクローラーはJavaScriptを処理できないため、GooglebotがJavaScriptに遭遇すると、そのページは順番待ちに入り、レンダリングリソースが利用可能になると、Googlebotがページを完全にレンダリングできるようになります。

JavaScriptに関しては、Bingも同様の制限があります。この問題に対する同社の立場を明らかにするために、最近、ウェブマスターガイドラインに以下のセクションが追加されました。

JavaScript: Bing is generally able to process JavaScript, however, there are limitations to processing JavaScript at scale while minimizing the number of HTTP requests. Bing recommends Dynamic Rendering to switch between client-side rendered and pre-rendered content for specific user agents such as Bingbot especially for large web sites.

Bingは一般的にJavaScriptを処理することができますが、HTTP要求の数を最小限に抑えながら大規模にJavaScriptを処理するには限界があります。Bingは、Bingbotのような特定のユーザーエージェントに対して、特に大規模なウェブサイトでは、クライアント側でレンダリングされたコンテンツとプリレンダリングされたコンテンツを切り替えるダイナミックレンダリングを推奨しています。

●引用元：Webmaster Guidelines – Bing Webmaster Tools

ダイナミックレンダリングソリューションを導入していれば、GooglebotやBingbotなどの検索エンジンのボットがページにアクセスしたときに、完全にレンダリングされたページが提供されるため、レンダリングの必要がありません。これで、検索エンジンがコンテンツを見逃す心配がなくなるのです。

ダイナミックレンダリングで解決できる問題とは？

JavaScriptは、ページが遅くなるだけでなく、検索エンジンが正常に、あるいは即座に処理することを困難にします。

検索エンジンがJavaScriptを処理する必要をなくすことで、スピードに関するクロールバジェットの問題と、JavaScriptを搭載したコンテンツを検索エンジンが見逃してしまうことの両方を改善することができます。

クロールバジェット問題をダイナミックレンダリングでどのように解決するのか？

ユーザーとボットの両方が、ページスピードの影響を受けます。

ユーザーにとっては、ページの読み込みが遅いとイライラしてしまい、購入に至らないでしょう。ボットにとっては、ページスピードが遅いと、多くのページをクロールすることができません。

ダイナミックレンダリングはボット専用のソリューションであるため（つまり、人間のユーザーにはクライアントサイドでレンダリングした通常のコンテンツが提供されます）、ここではボットがフルレンダリングしたページを送信することによるSEOのメリットに焦点を当てます。

大規模なサイト、特にJavaScriptを多用するサイトでは、クロールバジェットの問題に悩まされることがあります。

GoogleやBingなどの検索エンジンは時間に限りがあるため、1つのウェブサイトで一度にクロールできるページ数に上限を設けています。その上限がクロールバジェットで、サイトごとに異なります。

例えばGoogleでは、クロールレートの上限（ページの読み込み時間などの要因に影響を受ける）とクロールデマンド（ページの人気度や鮮度に影響される）を組み合わせてクロールバジェットを算出しています。

このような制限があるため、検索エンジンのボットが大規模なサイトをクロールすることが困難な場合があります。当社の調査によると、この問題により、企業のウェブサイトの全ページの約51％をGoogleが見逃していました。

検索エンジンのボットの動きを遅くするJavaScriptを加えると、クロールバジェットの問題がさらに悪化します。

ページスピードの改善がボットに与える影響を説明するために、平均遅延が1,053ミリ秒から730ミリ秒に改善され、結果としてクロール頻度が大幅に増加したウェブサイトを見てみましょう。

サイトが検索エンジンのボットに素早くページを提供すると、ボットはサイトのより多くのページをクロールすることができます。

ページ数が多いほど、またページスピードが遅いほど、Googlebotがすべてのページを巡回できる可能性は低くなり、サイトのページのうち、まったくクロールされないページや、頻繁にクロールされないページの割合が増えることになります。

また、一般に、読込み時間が500 ミリ秒未満のページだと、501 ～ 1000 ミリ秒の読込み時間のページよりもクロールが50%増加し、1,000 ミリ秒超のページよりも130%増加します。

では、ダイナミックレンダリングによって、どのようにページスピードを向上させることができるのでしょうか。

JavaScriptはウェブページの読み込みに数秒の時間を要しますが、ダイナミックレンダリングは完全にレンダリングされたページを検索エンジンのボットに送信します。ダイナミックレンダリングは、Googleボット（および他の検索エンジン）がページをより速く取得することになり、サイトのより多くのページをクロールすることができます。

つまり、より多くのページがインデックスに登録され、ランキングに掲載され、トラフィックや収益につながるのです。

ダイナミックレンダリングは、JavaScriptを使用したコンテンツのインデックス作成にどのように役立つのでしょうか？

検索エンジンがJavaScriptで読み込まれたコンテンツをブラウザで確認するためには、レンダリングする必要があります。大規模なウェブページをレンダリングするには、多くの時間と演算リソースが必要なため、検索エンジンボットは、リソースが確保できるまでJavaScriptのレンダリングを延期します。

あなたの所有しているJavaScriptを搭載したコンテンツと、検索エンジンがレンダリングしたJavaScriptを搭載したコンテンツは、必ずしも同じではありません。これは、Botifyがレンダーバジェットと呼ぶものが原因です。

レンダーバジェットは、クロールバジェットと同様に、ウェブサイトのコンテンツが頻繁に変更される場合（在庫が常に変動するEコマースサイトや、毎日何百もの新しい記事が掲載されるメディアサイトなど）には、その間にページの詳細が見落とされる可能性があります。

実例をご紹介します。このサイトでは、JavaScriptフレームワーク（サーバー側のレンダリングではない）に切り替えたところ、すぐにオーガニック検索のトラフィックが大幅に減少しました。

しかし、コンテンツのレンダリングの負担を検索エンジンから取り除くことができれば、それは問題ではなくなります。

ダイナミックレンダリングでは、検索エンジンのボットが完全にレンダリングされたページを取得するため、JavaScriptで読み込まれたコンテンツやリンクを見逃す心配がありません。

リソース不足を解消するダイナミックレンダリング

ボットの改善を行う上での最大の障壁は、ほとんどのエンジニアリングチームや開発チームがユーザーに焦点を当てているため、UXの問題解決やプロジェクトを優先してしまうことです。

例えば、ページスピードの最適化が彼らの目に留まったとしても、それを実行するには非常に多くのリソースと複雑な作業が必要になります。

どれくらいのリソースが必要なのでしょうか？前述の平均遅延を1,053ミリ秒から730ミリ秒に改善したお客様はこのプロジェクトに1年の歳月と膨大なリソースが費やしましたが、それは特別な例ではありません。

ダイナミックレンダリングは、サーバー側のレンダリングのようなオプションよりも高速で、リソースの消費も少ないため、この種の最適化を実際に実行するのがはるかに容易であるという点で、優れたソリューションです。

ダイナミックレンダリングはクローキングか？

Googleによると、ダイナミックレンダリングはクローキングではありません。

Googleはクローキングを「人間のユーザーと検索エンジンに、異なるコンテンツやURLを提示する行為」と説明しています。

ダイナミックレンダリングの定義に似ていると思われるかもしれません。それでこの件で迷いが生じると言うのも、当然理解できます。

その違いを理解するには、こんな方法があります。

クローキングとは、ユーザーと検索エンジンの一方または両方を欺く目的で、異なるコンテンツを送信するプロセスのことです。
ダイナミックレンダリングとは、ボット用にコンテンツを事前にレンダリングする目的で、ユーザーと検索エンジンに異なるコンテンツを送信するプロセスのことです。

Googleが最初にクローキングを取り上げたのは、クローキングが主に検索エンジンを騙し、検索結果でのページの順位を人為的に上げるために使われていた初期の頃でした。

例えば、ユーザーエージェントが検索エンジンの時だけ、ページにキーワードを詰め込むクローキングが使われていました。人間の訪問者がそのページをリクエストすると、人間に読めて、キーワードが入っていないバージョンを受け取ることになります。

言い換えれば、ダイナミックレンダリングを使ってクローキングすることは可能ですが（これは悪いことで、絶対にやってはいけません！）、すべてのダイナミックレンダリングがクローキングではありません。

ダイナミックレンダリングを使用する場合は、検索エンジンに送信するページとユーザーに送信するページの違いを最小限に抑えるようにしてください。

ダイナミックレンダリングは、人間訪問者のエクスペリエンスを向上させる？

ダイナミックレンダリングは、完全にレンダリングされたコンテンツを、ユーザーではなく、検索エンジンやその他のボットに提供します。

サーバー側のレンダリングだけを使って、ユーザーとボットのスピードを向上させればいいのでは？

サーバー側のレンダリングは、経済的にもエンジニアリングチームの時間的にも難しい場合が多い。

サーバーサイドのレンダリングは、意味のあるコンテンツがすべてウェブサイトのサーバー上でレンダリングされるため、多くの人に好まれるオプションです。

ユーザーとボットの両方が、追加リソースを要求することなく、完全にページをロードすることができます。これは、人間の訪問者と検索エンジンのボットの両方からページをレンダリングする負担を取り除き、ウェブサイトのサーバーに配置するものです。

では、なぜ誰もがJavaScriptのページをサーバー側のレンダリングしないのでしょうか？なぜなら膨大な時間とリソースを必要とするからです。
サーバーサイドのレンダリングとは異なり、ダイナミックレンダリングはかなり良いターンキーソリューションになり得ます。これにより、エンジニアリングチームの時間を最小限にし、検索エンジンのボットが求めるものを提供することができます。

また、サーバーサイドのレンダリングに比べて、ダイナミックレンダリングの方が低コストです。それは、人間の訪問者とボットの両方に向けてコンテンツのプリレンダリング費用が掛かるのではなく、ボット用にプリレンダリング費用が掛かるだけだからです。

ニュースサイトのようにJavaScriptを多用し、サイトの規模が大きくなり続ける場合は、いずれクロールやインデックスの問題に直面します。
問題が起きる前にダイナミックレンダリングの導入を検討してみてはいかがでしょうか

この記事は、botifyに掲載された「What Is Dynamic Rendering & How Does It Impact SEO?」を翻訳した内容です。

投稿ダイナミックレンダリングとSEOへの影響は？は SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログに最初に表示されました。