最近は、多くのWebサイトがJavaScriptで構築されています。
JavaScript自体に問題があるわけではありませんが、その実装方法によっては、ユーザーエクスペリエンスと検索エンジンでのランキングの両方にかなり大きな影響を与える可能性があります。
開発者は、JavaScriptがSEOにどのように影響するかを考慮しなければなりませんし、SEO担当者やその他のデジタルマーケティング担当者は、コンテンツやWebサイトでの体験がどのような技術によって支えられているかについて、より深く学ぶ必要があると言えるでしょう。
もしあなたが開発者かデジタルマーケティング担当者のどちらかに当てはまるのであれば、このページをご覧ください。
- クライアントサイドレンダリングとは？
- クライアントサイドレンダリングの利点
- クライアントサイドレンダリングの注意点
- サーバーサイドレンダリングとは？
- サーバーサイドレンダリングの利点
- サーバーサイドレンダリングの注意点
- クライアントサイドレンダリングとサーバーサイドレンダリング、SEOに適しているのはどっち？
- ハイブリッドレンダリングオプション：ダイナミックレンダリング
- レンダリングについて心配すべきウェブサイトとは？
- 自社JavaScriptウェブサイトでSEOの問題がないかチェックする方法
クライアントサイドレンダリングとは？
クライアントサイドレンダリングとは、ウェブサイトの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 サイトにレビューなどを取り込む場合、サーバーサイドレンダリングではレンダリングされません。
クライアントサイドレンダリングとサーバーサイドレンダリング、SEOに適しているのはどっち？
2つのオプションのうち、サーバーサイドレンダリングは、クライアントサイドレンダリングよりもSEOに適しています。これは、サーバーサイドレンダリングによってページの読み込み時間が短縮されるため、ユーザーエクスペリエンスが向上するだけでなく、Googleの検索結果で上位に表示されやすくなるためです。
また、サーバーサイドレンダリングは、検索エンジンのボットによるJavaScriptのレンダリングの負担を軽減し、スピードに関するクロールバジェットの問題や部分的なインデックス作成を解決するため、SEO対策としても有効です。
しかし、サーバーサイドレンダリングを導入する余裕がない場合はどうすればよいのでしょうか。あるいは、それを実行するための技術的なリソースがない場合は？
ハイブリッドレンダリングオプション：ダイナミックレンダリング
ｚダイナミックレンダリングは、クライアントサイドレンダリングとサーバーサイドレンダリングのハイブリッドです。
その仕組みは次のとおりです。
検索エンジンのボットがページにアクセスしようとすると、ウェブサイトは完全にレンダリングされたページを送信します。しかし、人間がページにアクセスしようとすると、ブラウザがページをレンダリングしなければならないのです。
このGoogle公認のレンダリングオプションは、以下の理由で多くの人に好まれています。
- サーバーサイドレンダリングよりも安価で簡単に実装できる。 クロール速度に関連する問題を解決できる。
- 部分的なインデックスに関する問題を解決できる
- JavaScript が提供するインタラクティブな機能を人間の訪問者に提供できる
ダイナミックレンダリングについて詳しくは、こちらをご覧ください。
レンダリングについて心配すべきウェブサイトとは？
クライアントサイドレンダリング、サーバーサイドレンダリング、またはダイナミックレンダリングの議論は、JavaScriptを利用するWebサイトにのみ関係するものです。Web サイトが純粋な HTML である場合、人間のユーザーや検索エンジンのボットがレンダリングする必要のあるものは何もありません。
またReactやAngularなどのライブラリで構築された完全なJavaScriptのWebサイトは、そのコーディング方法によっては、レンダリングされるまでまったく何もない状態になることがあります。
ウェブサイトは、一部がJavaScriptで、一部がHTMLであることもあります。たとえば、レビューや「関連商品」ウィジェットを取り込むために、ウェブサイトがJavaScriptだけに依存しているとします。これは、レンダリング前にはページの一部しか表示されないことを意味します。
Webサイトの一部または全部をJavaScriptに依存している場合、特にサイトが大規模（数千または数百万ページ）で頻繁に変更される場合（出版社や商品の回転率が高いEコマースサイトなど）、レンダリングのオプションを慎重に検討する必要があることは明らかです。
詳しくは、Google の開発者向けコンテンツ「JavaScript SEO の基本を理解する」 や、Google の Martin Splitt 氏によるビデオをご覧いただくと良いでしょう。
自社JavaScriptウェブサイトでSEOの問題がないかチェックする方法
解決策を選ぶ前に、JavaScriptのWebサイトにどのようなSEOの問題があるのか、もしあれば診断しておくとよいでしょう。
これを行うには、いくつかの方法があります。
- 「JavaScriptを無効にする」拡張機能を使う – さまざまなブラウザの拡張機能を使って、閲覧中のウェブページのJavaScriptをオフにすることができます。これは、JavaScriptの要素がページのどこにあるのかを簡単に確認する方法です。JavaScriptをオフにしたときにコンテンツやリンクが消えてしまう場合は、JavaScriptのSEOに問題がある可能性があります。
- JSを含むコンテンツをGoogle検索する – JavaScriptを含むコンテンツを特定したら、そのテキストの一部をコピーしてGoogle検索に貼り付けてみてください。あなたのウェブサイトがヒットしない場合、JavaScriptのSEOに問題がある可能性があります。
- Google Search ConsoleのURL検査ツールを使う– あなたのページをURL検査ツールに入力し、「クロールされたページを見る」をクリックして、Googleが何をレンダリングしたかを確認します。ページのコンテンツの一部が欠落している場合、JavaScriptのSEOに問題がある可能性があります。Googleのリッチリザルトテストやモバイルフレンドリーテストでも同じことができます。
- HTMLのみのクロールとJS対応のクロールの比較 – SiteCrawlerのようなJavaScript対応のクローラーがあれば、JavaScriptを有効にしない状態でサイトをクロールし、その後JavaScriptを有効にした状態で再度クロールすることができます。他のツールでは一度に1ページずつテストできますが、これはサイト全体のJavaScriptの問題の全体像を把握するのに最適な方法です。
ご興味のある方は、深刻なレンダリング問題を特定して修正し、SEOパフォーマンスを向上させたCarvana社の事例を読んだり、弊社が構築した JavaScript SEO 問題解決ツールについて直接問い合わせください。
