最近は、多くのWebサイトがJavaScriptで構築されています。
JavaScript自体に問題があるわけではありませんが、その実装方法によっては、ユーザーエクスペリエンスと検索エンジンでのランキングの両方にかなり大きな影響を与える可能性があります。
開発者は、JavaScriptがSEOにどのように影響するかを考慮しなければなりませんし、SEO担当者やその他のデジタルマーケティング担当者は、コンテンツやWebサイトでの体験がどのような技術によって支えられているかについて、より深く学ぶ必要があると言えるでしょう。
もしあなたが開発者かデジタルマーケティング担当者のどちらかに当てはまるのであれば、このページをご覧ください。
クライアントサイドレンダリングとは、ウェブサイトのJavaScriptが、ウェブサイトのサーバーではなく、ブラウザでレンダリングされることを意味します。
GoogleのMartin Splitt氏によると、「JavaScriptフレームワークを使用している場合、デフォルトではクライアントサイドレンダリングが使用されます。つまり、素のHTMLを送り、次にJavaScriptの一部を送り、JavaScriptがブラウザでコンテンツを取得し、組み立てるということです。」
クライアントサイドレンダリングは、IKEAに家具を注文するようなものだと考えてください。IKEAは、すでに組み立てられた家具をあなたの家に送るわけではありません。その代わり、パーツが送られてくるので、それが家に届いたら組み立てなければなりません。
コンテンツのレンダリングの負担はすべてクライアント（ページを見ようとする人やボットなど）にかかるため、クライアントサイドレンダリングは、ウェブサイト所有者にとって、自身のサーバーの負荷を軽減するため、より安価な選択肢となります。
また、JavaScript ウェブサイトのデフォルトの状態でもあるため、ウェブサイト所有者にとっては、サーバーサイドレンダリングよりもクライアントサイドレンダリングの方が簡単です。
クライアントサイドレンダリングには、主に2つの欠点があります。
ひとつは、クライアントサイドレンダリングによって、ユーザーエクスペリエンスが低下する可能性が高まることです。JavaScriptは、ページの読み込み時間を数秒単位で増加させる場合があり、その負担がクライアント（ウェブサイトの訪問者）に完全にかかると、ユーザーは不満を感じてサイトを離れてしまうかもしれません。
Related Resource: Page Speed & SEO: How Load Time Affects Bots and Humans Differently
クライアントサイドレンダリングの2つ目の大きな欠点は、検索エンジンのボットへの影響です。たとえば、Googlebot には、インデックスの第二波と呼ばれるものがあります。このプロセスでは、まずページの HTML をクロールしてインデックスを作成し、リソースが利用可能になったときに再度戻って来て JavaScript をレンダリングするのです。この 2 段階のアプローチにより、JavaScript のコンテンツが見落とされ、Google のインデックスに含まれないことがあります（詳しくは「レンダーバジェットとは」をご覧ください）。
そして、他の検索エンジンは、GoogleよりもJavaScriptのレンダリングが苦手です。
また、JavaScriptは検索エンジンのボットがウェブサイトをクロールする速度を低下させ、大規模なサイトではクロールバジェットの問題を引き起こす可能性があります。
サーバーサイドレンダリングとは、WebサイトのJavaScriptをWebサイトのサーバーでレンダリングすることです。家具の例でいえば、注文した家具が完全に組み立てられて家に届くようなものです。
JavaScriptはウェブサイトのサーバーでレンダリングされるため、検索エンジンのボットと人間の両方が、より高速なページエクスペリエンスを得ることができます。これはUXの向上（これはGoogleのランキングアルゴリズムの一部でもある）を意味するだけでなく、スピードに関連したクロールバジェットの問題も解消されます。
また、完全にレンダリングされたページを検索エンジンのボットに送信することは、クライアントサイドのレンダリングコンテンツで起こりうる「部分的なインデックス」のリスクを回避することにもなります。Googleや他の検索エンジンのボットがあなたのページにアクセスしようとしたとき、レンダリングリソースが利用可能になるのを待たずに、あなたのページ全体を見ることができるのです。
レンダリングリソースが利用可能になるのを待ってから完全なページを表示するのではなく、最初から完全なレンダリングページを取得することができるのです。
サーバーサイドレンダリングは、高価でかかるリソースが多大になる可能性があります。ボットや人間のウェブサイト訪問者のためにコンテンツをレンダリングする全負荷がサーバーにかかるため、サーバーコストがかかる可能性があります。さらに、JavaScript ウェブサイトのデフォルトではなく、エンジニアリングチームの作業が必要になるため、実装にリソースと時間が必要になる場合があります。
また、サーバーサイドレンダリングは、サードパーティ製のJavaScriptでは機能しない傾向があります。したがって、外部サービスを使用して Web サイトにレビューなどを取り込む場合、サーバーサイドレンダリングではレンダリングされません。
2つのオプションのうち、サーバーサイドレンダリングは、クライアントサイドレンダリングよりもSEOに適しています。これは、サーバーサイドレンダリングによってページの読み込み時間が短縮されるため、ユーザーエクスペリエンスが向上するだけでなく、Googleの検索結果で上位に表示されやすくなるためです。
また、サーバーサイドレンダリングは、検索エンジンのボットによるJavaScriptのレンダリングの負担を軽減し、スピードに関するクロールバジェットの問題や部分的なインデックス作成を解決するため、SEO対策としても有効です。
しかし、サーバーサイドレンダリングを導入する余裕がない場合はどうすればよいのでしょうか。あるいは、それを実行するための技術的なリソースがない場合は？
ｚダイナミックレンダリングは、クライアントサイドレンダリングとサーバーサイドレンダリングのハイブリッドです。
その仕組みは次のとおりです。
検索エンジンのボットがページにアクセスしようとすると、ウェブサイトは完全にレンダリングされたページを送信します。しかし、人間がページにアクセスしようとすると、ブラウザがページをレンダリングしなければならないのです。
このGoogle公認のレンダリングオプションは、以下の理由で多くの人に好まれています。
ダイナミックレンダリングについて詳しくは、こちらをご覧ください。
クライアントサイドレンダリング、サーバーサイドレンダリング、またはダイナミックレンダリングの議論は、JavaScriptを利用するWebサイトにのみ関係するものです。Web サイトが純粋な HTML である場合、人間のユーザーや検索エンジンのボットがレンダリングする必要のあるものは何もありません。
またReactやAngularなどのライブラリで構築された完全なJavaScriptのWebサイトは、そのコーディング方法によっては、レンダリングされるまでまったく何もない状態になることがあります。
ウェブサイトは、一部がJavaScriptで、一部がHTMLであることもあります。たとえば、レビューや「関連商品」ウィジェットを取り込むために、ウェブサイトがJavaScriptだけに依存しているとします。これは、レンダリング前にはページの一部しか表示されないことを意味します。
Webサイトの一部または全部をJavaScriptに依存している場合、特にサイトが大規模（数千または数百万ページ）で頻繁に変更される場合（出版社や商品の回転率が高いEコマースサイトなど）、レンダリングのオプションを慎重に検討する必要があることは明らかです。
詳しくは、Google の開発者向けコンテンツ「JavaScript SEO の基本を理解する」 や、Google の Martin Splitt 氏によるビデオをご覧いただくと良いでしょう。
解決策を選ぶ前に、JavaScriptのWebサイトにどのようなSEOの問題があるのか、もしあれば診断しておくとよいでしょう。
これを行うには、いくつかの方法があります。
ご興味のある方は、深刻なレンダリング問題を特定して修正し、SEOパフォーマンスを向上させたCarvana社の事例を読んだり、弊社が構築した JavaScript SEO 問題解決ツールについて直接問い合わせください。
