Rendertronで動的レンダリングを実装する

多くのフロントエンドフレームワークは、コンテンツを表示するためにJavaScriptに依存しています。これは、Googleがコンテンツのインデックスを作成したり、インデックスに登録されたコンテンツを更新したりするのに時間がかかる場合があることを意味します。回避策の1つは、動的レンダリング実装することです。動的レンダリングとは、特定のユーザーエージェントのクライアント側でレンダリングされたコンテンツと事前にレンダリングされたコンテンツを切り替えることを意味します。このコードラボでは、ヘッドレスChromiumをベースにしたオープンソースソリューションであるRendertronを使用して動的レンダリングを実装する方法について説明します。

動的レンダリングがどのように機能するかを示す図。この図は、初期のHTMLおよびJavaScriptコンテンツをブラウザーに直接提供するサーバーを示しています。対照的に、この図は、最初のHTMLとJavaScriptをレンダラーに提供するサーバーを示しています。レンダラーは最初のHTMLとJavaScriptを静的HTMLに変換します。コンテンツが変換されると、レンダラーは静的HTMLをクローラーに提供します。

あなたが学ぶこと

  • Webアプリを提供するために小さなexpress.jsサーバーをセットアップする方法
  • RendertronをGoogleCloudPlatformにデプロイする方法
  • 動的レンダリング用のミドルウェアとしてRendertronをインストールして構成します

必要なもの

グリッチサンプルのクローンを作成します

このコードラボにはサンプルのWebアプリを使用します。このコードラボ用に独自の編集可能なコピーを作成するには、Glitchでサンプルアプリのクローンを作成します。

サンプルアプリのクローンを作成する

GoogleCloudプロジェクトを設定する

新しいGoogleCloudPlatformプロジェクトを作成します。後のステップでプロジェクトIDが必要になります。

モバイルフレンドリーテストで私たちのウェブアプリを試してみましょう。これにより、Google検索でウェブアプリがどのように表示されるかがわかります。ウェブアプリのインデックスを正しく作成するには、すべてのコンテンツがGoogle検索に表示されることが重要です。このテストで猫が表示されない場合、ユーザーはGoogle検索で猫を見つけることができません。結果は次のとおりです。

887fd885d6fba7fe.png

スクリーンショットは、猫の画像があるはずの空白スペースを示しています。

ページが正しくレンダリングされない理由を確認するには、 [詳細の表示]をクリックします

d060e6bd3f005e99.png

APIのrobots.txtで許可されていないため、Googlebotが猫の画像を取得するためのAPIリクエストを作成できないことがわかります。

このコードラボでは、JavaScriptを実行しない検索エンジンとクローラーでコンテンツを利用できるようにする方法として動的レンダリングを使用し、このWebアプリが使用する外部Cat ImagesAPIでrobots.txtの問題を回避します。 Rendertronを使用して、クローラーとボットのレンダリングを実行します。

Rendertronは、URLを受け取り、ヘッドレスChromiumを使用してURLの静的HTMLを返すサーバーを実行します。このガイドは、Rendertronプロジェクトの推奨事項に従います

  1. GitHubからRendertronリポジトリのクローンを作成するには、次のコマンドを実行します。
git clone https://github.com/GoogleChrome/rendertron.git
  1. ディレクトリの変更:
cd rendertron 
  1. 依存関係をインストールしてコンピューターにRendertronをビルドするには、次のコマンドを実行します。
npm install && npm run build
  1. Rendertronのメモリ内キャッシュを有効にするには、 rendertronディレクトリにconfig.jsonという新しいファイルを次の内容で作成します(Rendertonで使用可能な構成オプションの詳細については、ここを参照してください)。
{ "cache": "memory" }
  1. rendertronディレクトリから、次のコマンドを実行します。 YOUR_PROJECT_IDを、Google CloudPlatformで設定したプロジェクトIDに置き換えます。
gcloud app deploy app.yaml --project YOUR_PROJECT_ID
  1. 選択したリージョンを選択し、展開を確認します。コマンドが終了するのを待ちます。
  2. ブラウザにYOUR_PROJECT_ID.appspot.comと入力します。 YOUR_PROJECT_IDを、Google CloudPlatformで設定した実際のプロジェクトIDに置き換えます。入力フィールドといくつかのボタンを備えたRendertronのインターフェースが表示されます。 bf6e4d57fd1200ff.png

Rendertron Webインターフェースが表示されたら、独自のRendertronインスタンスが正常にデプロイされています。後で必要になるので、プロジェクトのURL(YOUR_PROJECT_ID.appspot.com)をメモしておきます。

サーバーにRendertronを追加するには、Rendertronをインストールし、ボットリストにGooglebotを追加して、ボットリクエストを送信するようにRendertronミドルウェアを構成します。

Rendertronをインストールします

Webサーバーはexpress.jsを使用し、Rendertronにはexpress.jsミドルウェアがあります。サンプルアプリのコピーにrendertron-middlewareを追加するには、リミックスされたGlitchでpackage.jsonファイルを開き、次のように依存関係にrendertron-middlewareを追加します。

  "dependencies": {
    "express": "^4.16.4",
    "rendertron-middleware": "^0.1.5"
  },

リミックスされたGlitchのserver.jsファイルにrendertron-middlewareを追加します。

const rendertron = require('rendertron-middleware');

ボットリストを構成する

Rendertronは、ユーザーエージェントのHTTPヘッダーを使用して、リクエストがボットからのものか、ユーザーのブラウザからのものかを判断します。 RendertronにGooglebotリクエストもレンダリングさせるには、ユーザーエージェントのリストにGooglebotを追加します。次のスニペットをリミックスされたGlitchのserver.jsファイルに貼り付けます。

const BOTS = rendertron.botUserAgents.concat('googlebot');
const BOT_UA_PATTERN = new RegExp(BOTS.join('|'), 'i');

この正規表現は、次のステップでRendertronミドルウェアを構成するときに使用します。

Rendertronミドルウェアを構成する

ボットリクエストをRendertronインスタンスに送信するには、ミドルウェアをserver.jsファイルに追加します。ミドルウェアは、要求しているユーザーエージェントをチェックし、既知のボットからの要求をRendertronインスタンスに転送します。 app.getで始まる最初の行の前に、リミックスされたGlitchプロジェクトのserver.jsファイルに次のコードを追加します。

app.use(rendertron.makeMiddleware({
  proxyUrl: 'https://YOUR_PROJECT_ID.appspot.com/render',
  userAgentPattern: BOT_UA_PATTERN
}));

サンプルWebサイトを要求するボットは、Rendertronから静的HTMLを受信するため、コンテンツを表示するためにJavaScriptを実行する必要はありません。

Rendertronのセットアップが成功したかどうかをテストするには、glitch.comプロジェクトのURLを使用してモバイルフレンドリーテストを実行します。 「ページはモバイルフレンドリー」と表示され、スクリーンショットにはページのコンテンツ全体が表示されます(たとえば、画像の欠落はありません)。

ba51a6928c0363e3.png

猫の写真が表示されます。 [HTML]タブでは、JavaScriptコードが生成したHTMLと、Rendertronがコンテンツを表示するためのJavaScriptの必要性を排除したことを確認できます。

Webアプリのフロントエンドコードに変更を加えることなく、動的レンダリング設定を作成しました。これらの変更により、静的HTMLバージョンのWebアプリをクローラーに提供できます。

私たちがカバーしたこと

  • Webアプリを提供するために小さなexpress.jsサーバーをセットアップする方法
  • Rendertronをデプロイする方法
  • 動的レンダリング用のミドルウェアとしてRendertronをインストールおよび構成する方法

もっと詳しく知る

JavaScriptとSEOについて学び続けてください: