回避策としてのダイナミック レンダリング

一部のウェブサイトでは、JavaScript がブラウザで実行されたときに、ページ上に新たなコンテンツが生成されます。 これをクライアントサイド レンダリングと呼びます。Google 検索では JavaScript を実行しますが、Google 検索が対応していない JavaScript の機能もあります。そのため、ページによっては、レンダリングされた HTML にコンテンツが表示されないという問題が発生することがあります。他の検索エンジンでは JavaScript を無視し、JavaScript によって生成されたコンテンツが表示されない場合があります。

ダイナミック レンダリングは、検索エンジンが JavaScript 生成コンテンツに対応していない場合のウェブサイトでの回避策です。ダイナミック レンダリング サーバーは、JavaScript 生成コンテンツに関して問題がある可能性のある bot を検知し、検知した bot にはサーバーでレンダリングした JavaScript なしのバージョンのコンテンツを提供する一方で、ユーザーに対してはクライアントサイドでレンダリングされたバージョンのコンテンツを表示します。

ただし、ダイナミック レンダリングは回避策です。仕組みがより複雑になり、多くのリソースが必要になるため、推奨される解決策ではありません。

ダイナミック レンダリングを使用する必要があるサイト

ダイナミック レンダリングは、JavaScript で生成される、変更頻度の高いインデックス登録可能な一般公開コンテンツや、クローラではサポートされていない JavaScript の機能を使用する、サイト運営者にとって重要なコンテンツのための回避策です。すべてのサイトでダイナミック レンダリングを使用する必要はありません。ウェブでのレンダリングに関するこちらの記事で説明されているように、ダイナミック レンダリングよりも優れたソリューションがあります。

ダイナミック レンダリングの仕組みについて

ダイナミック レンダリングでは、ウェブサーバーが、ユーザー エージェントを確認するなどの方法によってクローラを検出する必要があります。クローラのリクエストはレンダラにルーティングされ、ユーザーのリクエストは通常どおり処理されます。ダイナミック レンダラは、必要に応じて、クローラに適したバージョンのコンテンツを配信します。たとえば、静的 HTML バージョンを配信することができます。ダイナミック レンダラは、すべてのページで有効にすることも、ページ単位で有効にすることもできます。

ダイナミック レンダリングの仕組みを示す図。この図では、サーバーが最初の HTML と JavaScript のコンテンツをブラウザに直接配信しています。一方、この図では、サーバーがレンダラに最初の HTML と JavaScript を配信し、レンダラが最初の HTML と JavaScript を静的 HTML に変換しています。コンテンツが変換されると、レンダラはクローラに静的 HTML を配信します。

ダイナミック レンダリングはクローキングではない

Googlebot は通常、ダイナミック レンダリングをクローキングとは見なしません。 ダイナミック レンダリングで同様のコンテンツを生成する限り、Googlebot はダイナミック レンダリングをクローキングとは見なしません。

ダイナミック レンダリングを設定していると、サイトでエラーページが生成される場合があります。Googlebot はこのようなエラーページをクローキングとは見なさず、他のエラーページと同様に扱います。

ただし、ダイナミック レンダリングを使用してユーザーとクローラにまったく異なるコンテンツを提供すると、クローキングと見なされる可能性があります。たとえば、ユーザーには猫に関するページが提供され、クローラには犬に関するページが提供されるウェブサイトは、クローキングと見なされる可能性があります。

ダイナミック レンダリングを実装する

コンテンツのダイナミック レンダリングは、Google の一般的なガイドラインに沿って設定してください。設定の詳細は実装によって大きく異なるため、サイトで使用している固有の設定の詳細を参照する必要があります。

  1. ダイナミック レンダラ（Puppeteer、Rendertron、prerender.io など）をインストールし、クローラが認識しやすい静的 HTML にコンテンツを変換するよう設定します。
  2. 静的 HTML を受信させるユーザー エージェントを選択し、ユーザー エージェントを更新または追加する方法に関するサイト固有の設定の詳細を参照します。以下に、Rendertron ミドルウェアでの一般的なユーザー エージェントの一覧の例を示します。 
    export const botUserAgents = [
  'googlebot',
  'bingbot',
  'linkedinbot',
  'mediapartners-google',
];
  3. プリレンダリングによってサーバーの速度が低下する場合や、プリレンダリングのリクエストが多数発生する場合は、プリレンダリングされるコンテンツ用のキャッシュの実装や、正規のクローラーによるリクエストであるかどうかの確認を行うことを検討します。
  4. ユーザー エージェントにパソコン版とモバイル版のどちらのコンテンツが必要かを判断します。動的な配信を使用して、適切なパソコン版またはモバイル版のコンテンツを配信します。以下に示すのは、ユーザー エージェントにパソコン版とモバイル版のどちらのコンテンツが必要かを判断する設定の例です。: 
    isPrerenderedUA = userAgent.matches(botUserAgents)
isMobileUA = userAgent.matches(['mobile', 'android'])

    
if (!isPrerenderedUA) {
} else {
  servePreRendered(isMobileUA)
}
  5. 選択したクローラに静的 HTML を配信するようサーバーを設定します。この設定を行うには、お使いのテクノロジーに応じていくつかの方法があります。以下に例を示します。
    • クローラーからのリクエストをダイナミック レンダラにプロキシします。
    • デプロイ プロセスの一環としてプリレンダリングを行い、サーバーからクローラに静的 HTML を配信します。
    • カスタムのサーバーコードにダイナミック レンダリングを組み込みます。
    • プリレンダリング サービスからクローラーに静的コンテンツを配信します。
    • お使いのサーバー用のミドルウェア（Rendertron ミドルウェアなど）を使用します。

設定を確認する

ダイナミック レンダリングの実装が完了したら、以下のテストで URL をチェックして、すべてが想定どおりに動作することを確認します。

  1. URL 検査ツールを使用して、レンダリングされたページにパソコン版とモバイル版のコンテンツが表示されていることを確認します（レンダリングされたページは Google から確認できる状態のページです）。

    成功: パソコン版とモバイル版のコンテンツが、ユーザー向けに想定した表示と一致しています。

    再試行: 表示されるコンテンツが想定と異なる場合は、トラブルシューティングのセクションをご覧ください。

  2. 構造化データを使用している場合は、リッチリザルト テストを使用して、構造化データが正しくレンダリングされるかどうかをテストします。

    成功: 構造化データが想定したとおりに表示されます。

    再試行: 構造化データが想定したとおりに表示されない場合は、トラブルシューティングのセクションをご覧ください。

トラブルシューティング

URL 検査ツールでコンテンツにエラーが表示される場合や、コンテンツが Google 検索の検索結果に表示されない場合は、一般的な問題の解決策をお試しください。それでも問題が解決しない場合は、Google 検索セントラルのヘルプ コミュニティに新しいトピックを投稿してください。

コンテンツが不完全、または表示が異なる

問題の原因: レンダラが正しく設定されていないか、ウェブ アプリケーションがレンダリング ソリューションに対応していない可能性があります。タイムアウトによってコンテンツが正しくレンダリングされない場合もあります。

問題の修正方法: 使用しているレンダリング ソリューションのドキュメントに従って、ダイナミック レンダリングの設定を修正します。

応答時間が長い

問題の原因: ヘッドレス ブラウザを使用してオンデマンドでページをレンダリングすると、しばしば応答時間が長くなり、そのためにクローラーがリクエストをキャンセルしてコンテンツをインデックスに登録しないことがあります。また、応答時間が長いと、クローラーがコンテンツをクロールしてインデックスに登録する際のクロール頻度を減らす原因となる場合もあります。

問題の修正方法

  1. プリレンダリングされる HTML 用のキャッシュを設定するか、ビルドプロセスの一環としてコンテンツの静的 HTML バージョンを作成します。
  2. 設定でキャッシュが有効になっている（例: クローラーがキャッシュにアクセスするよう指定している）ことを確認します。
  3. リッチリザルト テストや webpagetest などのテストツールを使って（Google クローラーのユーザー エージェントの一覧に記載されているカスタム ユーザー エージェント文字列を指定します）、クローラーがコンテンツをすばやく取得できることを確認します。リクエストがタイムアウトにならないようにする必要があります。

ウェブ コンポーネントが期待どおりにレンダリングされない

問題の原因: Shadow DOM がページの他の部分から分離されています。Rendertron などのレンダリング ソリューションでは、分離された Shadow DOM 内のコンテンツは表示されません。 詳しくは、ウェブ コンポーネントに関するおすすめの方法をご覧ください。

問題の修正方法

  1. カスタム要素と Shadow DOM の webcomponents.js ポリフィルを読み込みます。
  2. リッチリザルト テストまたは URL 検査ツールを使用して、レンダリング ソリューションのレンダリングされた HTML にコンテンツが表示されるかどうかを確認します。

構造化データが存在しない

問題の原因: 構造化データのユーザー エージェントが欠落している場合や、JSON-LD スクリプトタグが出力に含まれていない場合、構造化データのエラーが発生することがあります。

問題の修正方法

  1. リッチリザルト テストを使用して、構造化データがページに存在することを確認します。次に、ユーザー エージェントを設定して、パソコンまたはモバイル用 Googlebot でプリレンダリングされたコンテンツをテストします。
  2. 動的にレンダリングされるコンテンツの HTML に JSON-LD スクリプトタグが含まれていることを確認します。詳しくは、レンダリング ソリューションのドキュメントをご覧ください。