ダイナミックレンダリングを正しく

Googleのウェブマスター向け公式ブログにダイナミックレンダリングについて記事紹介されていましたので、このブログでもダイナミックレンダリングについてご紹介したいと思います。しかし既に技術的な部分含めGoogle Developersに詳細が記載されていますので、ここでは簡易的に概念レベルで書いておきます。

ヘルメット

ふわふわ

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

今さらの話かもしれませんが、簡単に言いますと「Googleクローラーを始め、色々な検索エンジンやクローラーはJavaScriptをまだ上手く読み込めません。時間がかかったりします。なので、複雑にJavaScriptを使ったファイルが存在する場合、そのファイルとは別に(クローラー専用の)HTMLファイルを作成して、プリレンダリング(予め別の形で読み込ませる)させるという技術」です。少なくともGoogleにはそうすることを推奨しています。つまり、ブラウザ(≒ユーザー)が検知するJavaScript使用のファイル(コンテンツ)と、Googlebot検知用にJavaScriptを使用していないHTMLファイル(コンテンツ)を作るわけです。生成したそれぞれのファイル(コンテンツ)をブラウザかクローラーかに合わせて配信する機能ツールのことをダイナミックレンダラーと呼びます。

あなたのサイトにアクセスする検索エンジンやソーシャルメディア ボットが、すべてJavaScriptを実行できるわけではありません。GooglebotがJavaScriptを実行するのには時間がかかり、こちらに示すようにいくつかの制限が存在します。

ダイナミック レンダリングは、変更頻度が高く、表示にJavaScriptを必要とするコンテンツに対して有用です。

引用)Googleウェブマスター向け公式ブログ

ダイナミックレンダリングの仕組み

ふわふわ

設定が複雑がゆえに…

で、今回のGoogleウェブマスター向け公式ブログでは、そのダイナミックレンダリングの設定が難しいがゆえに、あらためてやり方を紹介してくれているという内容です。実際にGoogleが推奨しているダイナミックレンダラーのひとつである「Rendertron」を使って、設定例を指南してくれています。

JavaScriptを実行して静的HTMLを生成するにはレンダラが必要になります。Rendertronはオープンソース プロジェクトであり、headless Chromiumを使用してレンダリングを行います。シングルページ アプリでは、頻繁にバックグラウンドでデータを読み込んだり、コンテンツをレンダリングするための作業で遅延が発生したりすることがあります。Rendertronには、ウェブサイトでレンダリングが完了したタイミングを判定するメカニズムがあります。

引用)Googleウェブマスター向け公式ブログ

今まで、ダイナミックレンダリングの技術ドキュメントはすでに公開されておりましたが、「じゃあ実際に何をどうすれば設定できるの?」といった具体的な部分にはあまり触れてきませんでしたので、今回Googleがそういう部分を解説してくれているというわけです。

更新頻度が高いJavaScriptを実装していたり、そのほとんどがJavaScriptで生成されているサイトやアプリを運用しているウェブマスターにはSEO上、必見の情報ではないでしょうか。


関連記事

過去のインフォメーションページ運用

もう何年も前からご相談の多い「過去のインフォメーションページはそのままで良いのか?捨て方が分からない」という内容。これに関して私の意見をご紹介しておきたいと思います。実はインフォメーションページはSEOだけでなく、ユーザー訪問状況、運用管理工数等によって方法がだいぶ変わるんです。 過去のインフォメー ...(続きを読む)

「高品質」へのGoogleの取り組み

このタイミングであらためてGoogleが「高品質なコンテンツページに向けてなにをしているのか」を説明しています。目新しい情報はございませんが、一応ここでも和訳して共有しておこうかと思います。 Googleの説明内容 検索品質を担保するために、Googleでは(BERTをはじめとした)アルゴリズムの強 ...(続きを読む)

ウェブ検索からのCTRを上げる

Googleウェブ検索でクリック率を上げるためのテクニック要素を備忘録的に記載しておきます。今回はDiscoverや画像検索、ニュース検索等は含めず、またリッチリザルト化やAMP、検索順位上昇の概念も含めない、純然たるウェブ検索結果のブルーリンクとして表示される部分のみに注視して考えます。 クリック ...(続きを読む)

WebフォントとSEO

最近、5Gや表示速度、Core Web Vitals等に対する世間での意識が高まっているせいか、「Webフォントってどう思います?」というご質問をよくいただきますので、私なりの意見をご紹介しておこうかと思います。 Webフォントとは 今さらご説明も不要かと思いますが、Webサイトに表示するテキストフ ...(続きを読む)

コメントを書く

コメントは承認から反映までしばらく時間がかかる場合がございます。メールアドレスが公開されることはございません。