ダイナミック レンダリングの使用方法

現在のところ、JavaScript の処理は難しく、すべての検索エンジンのクローラが JavaScript を正常に即時処理できるわけではありません。Google では将来的にこの問題を解決できることを願っていますが、それまでの間、この問題の回避策としてダイナミック レンダリングをおすすめします。ダイナミック レンダリングとは、特定のユーザー エージェントを対象に、クライアント側でレンダリングされるコンテンツとプリレンダリングしたコンテンツを切り替えることを指します。

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

ダイナミック レンダリングは、JavaScript で生成される変更頻度の高いインデックス登録可能な一般公開コンテンツや、サイト運営者が重視するクローラではサポートされていない JavaScript の機能を使用するコンテンツに適しています。すべてのサイトでダイナミック レンダリングを使用する必要はありません。ダイナミック レンダリングはクローラ向けの回避策であることに注意してください。

ダイナミック レンダリングの仕組みを理解する

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

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

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

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

  1. クローラが認識しやすい静的 HTML にコンテンツを変換するためのダイナミック レンダラを、インストールして設定します。一般的なダイナミック レンダラとしては、PuppeteerRendertronprerender.io などがあります。
  2. 静的 HTML を配信すべきと思われるユーザー エージェントを選択し、サイトで使用している固有の設定の詳細を参照して、ユーザー エージェントを更新または追加する方法を確認します。Rendertron ミドルウェアでの一般的なユーザー エージェントの一覧の例を以下に示します。
    export const botUserAgents = [
      'googlebot',
      'google-structured-data-testing-tool',
      '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. Fetch as Google でパソコン版のコンテンツをテストし、レンダリングされたページにパソコン版のコンテンツが表示されていることも確認します(レンダリングされたページは Googlebot から見えるページの状態です)。

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

    エラー もう一度試す: 表示されるコンテンツが想定と異なる場合は、トラブルシューティングのセクションを参照します。

  3. 構造化データを使用している場合は、構造化データ テストツールを使用して、構造化データが正しくレンダリングされることを確認します。

    完了 成功: 構造化データが想定どおりにレンダリングされています。

    エラー もう一度試す: 構造化データが想定どおりにレンダリングされない場合は、トラブルシューティングのセクションを参照します。

トラブルシューティング

モバイル フレンドリー テストでコンテンツにエラーが表示される場合や、コンテンツが Google の検索結果に表示されない場合は、下記の一般的な問題の解決策をお試しください。それでも問題が解決しない場合は、ウェブマスター フォーラムに新しいトピックを投稿してください。

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

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

完了 問題を修正する: お使いのレンダリング ソリューションのドキュメントを参照して、ダイナミック レンダリングの設定を修正します。

応答時間が長い

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

完了 問題を修正する

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

構造化データがない

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

完了 問題を修正する

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

フィードバックを送信...