コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

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

一部のウェブサイトでは、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. モバイル フレンドリー テストでモバイル コンテンツをテストし、コンテンツが Google に認識されることを確認します。

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

    再試行: 表示されるコンテンツが想定どおりでない場合は、困ったときにのセクションをご覧ください。

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

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

    再試行: 表示されるコンテンツが想定と異なる場合は、困ったときにのセクションをご覧ください。

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

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

    再試行: 構造化データが想定したとおりに表示されない場合は、困ったときにのセクションをご覧ください。

困ったときに

モバイル フレンドリー テストでコンテンツにエラーが表示される場合や、コンテンツが 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 スクリプトタグが含まれていることを確認します。詳しくは、レンダリング ソリューションのドキュメントをご覧ください。