Rendertronを使ったダイナミック レンダリングの実装手順をGoogleが解説

[レベル: 上級]

Rendertron(レンダトロン)を利用した Dynamic Rendering(ダイナミック レンダリング)の実装手順を “ドイツ語版” Google ウェブマスター向け公式ブログが解説しました。
ほぼ同時に、日本語版ブログで翻訳記事も公開されています(1日遅れて、英語版ブログでも公開)。

ダイナミック レンダリング と Rendertron

ダイナミック レンダリングは JavaScript を多用したウェブページを検索エンジンにより確実にインデックスさせるための技術です。
ユーザーのブラウザには JavaScript を実行させる一方で、Googlebot には JavaScript をサーバー側で実行し終えた静的な HTML を返します。

2018 年の Google I/O で発表されました。
同年 10 月に技術仕様を Google は正式に提供しました。

ただ、具体的な設定方法をこのドキュメントは必ずしも説明できていませんでした。

そこでということではないでしょうが、今回 Google は、Rendertron を利用したダイナミック レンダリングを構成する手順を詳細にブログで説明しました。

Rendertron を簡単に説明しておきます。

Rendertron は、ヘッドレスブラウザである Headless Chrome を操作しウェブページをレンダリングすることができます。

ヘッドレスブラウザとは、僕たちが普段使うブラウザのように視覚的なインターフェイス(いわゆる GUI)を持たず、コマンドラインで操作するブラウザです

ダイナミック レンダリングでは、Rendertron が Headless Chrome にレンダリングさせた HTML をクライアント(ここでは Googlebot)に配信します。
JavaScript も実行し終わった静的な HTML を配信するので、Googlebot(正確には Web Rendering Service)がサポートしない技術を用いていても問題ありません。
ヘッドレス ブラウザといっても、実態は僕たちが使う Chrome です。
Chrome がレンダリングしたのと同等の HTML を Googlebot に返すことが可能なのです。

ダイナミック レンダリングを実装するために Rendertron を使わなければいけないということではありません。
ほかには、たとえば Puppteer(パペティア)を使うこともできます。
サーバーの環境や開発者のスキルに合わせて選んでください。

Redndertron でダイナミックレンダリングを構成する手順

Redndertron 利用したダイナミックレンダリングの構成手順を次のステップで公式記事は解説しています。

  1. ダイナミック レンダリングを検討すべきサイト
  2. サンプルのウェブアプリ
  3. サーバーの設定
  4. Rendertron インスタンスのデプロイ
  5. サーバーへの Rendertron の追加
  6. bot リストの構成
  7. ミドルウェアの追加
  8. 設定のテスト

僕は開発者ではないので、詳しいことは解説できません。
Rendertron を用いてダイナミック レンダリングを実装する際は公式記事を参照してください。

ダイナミック レンダリングは必ずしも必要ということではありません。
現状で、JavaScript で生成するコンテンツが正常に Google に認識されているなら何も問題ありません。
どうしても Google が実行できない JavaScript があったり、JavaScript が関わってくるコンテンツのインデックスが許容範囲を超えるくらいに遅かったりする場合に対処法として検討する技術です。
検討した結果、必要だと判断したのであれば実装するといいでしょう。