SEO対策の東京SEOメーカー

レンダリングとは? Googleクローラとレンダリングの関係を解説

レンダリングとは? Googleクローラとレンダリングの関係を解説

Web担当者にとって、「レンダリング」の理解は重要なSEO対策になります。しかし、レンダリングと聞いても様々な業界で使われており、Webマーケティングでの使われ方をイメージできない方も多いでしょう。

 

SEOコンサルタント今回は、Webマーケティングで重要なレンダリングの意味を解説しつつ、レンダリングの仕組みも合わせて説明します。

 

コンテンツ悩み解消

レンダリング

レンダリングとは?

 レンダリングは、「Webマーケティング業界」「DTM業界」「3D CG業界」で使われている言葉です。それぞれの業界で意味がやや異なるため、ここではWebマーケティング業界のレンダリングの意味を解説していきます。

 

レンダリングの意味

Webマーケティング業界のレンダリングは、HTMLやCSSで書かれたプログラムをWebサイトとして閲覧できる形に整える仕組みを意味しています。

 

インターネット上にある様々なWebサイトは、HTMLやCSSなどの言語で作られており、あらゆるブラウザを通して閲覧されています。もし、レンダリングをせずにHTMLやCSSをそのまま表示させてしまうと、私たちが普段よく見るWebサイトにはならず、プログラミング言語の羅列となってしまいます。

 

そこで、レンダリングによってプログラミング言語を普段から目にするWebサイトの形に変換してます。

 

レンダリングエンジンによって行われる

 

レンダリングは、レンダリングエンジンによって行われています。レンダリングエンジンとは、レンダリングを実施するために必要となるソフトウェアを指します。

Webマーケティングのレンダリングでは、Webサイトを閲覧するときにブラウザの裏側で「HTMLレンダリングエンジン」と呼ばれるものが動いています。HTMLレンダリングエンジンがHTMLやCSSで記述したプログラムを文字や画像に変換しており、ユーザーはWebサイトを閲覧できるようになります。

 

HTMLレンダリングエンジンは、ブラウザごとに作られているため、ブラウザの数だけレンダリングエンジンがあります。そこで、次からは代表的なレンダリングエンジンを見ていきましょう。

 

代表的なレンダリングエンジン

Webでは、HTMLレンダリングエンジンが使われており、ブラウザごとに様々なレンダリングエンジンが存在します。ここでは、次の4つの代表的なレンダリングエンジンをご紹介していきます。

 

  1. Trident
  2. Edge HTML
  3. Blink
  4. Webkit

 

Trident

 

1つ目は、Internet Explorerで動いているHTMLレンダリングエンジン「Trident」です。Internet Explorerは、今までWindowsの標準OSとして広く利用されているブラウザで、現在でも多く利用されています。

 

しかし、Internet Explorerは2022年6月にサポート終了と発表されたため、Tridentも利用されなくなるため注意が必要となります。

 

Edge HTML

 

2つ目は、Windowsの標準OSであるMicrosoft Edgeに利用されているHTMLレンタリングエンジン「Edge HTML」です。Windowsは、今までInternet Explorerが標準OSとして利用されていましたが、新しく代わりとして登場したのがMicrosoft Edgeです。

 

Edge HTMLは、Tridentを参考に作られたHTMLレンタリングエンジンであり、プログラミング言語のC++で開発されています。

 

Blink

 

3つ目は、Google Chromeで動いているHTMLレンダリングエンジン「Blink」です。Google Chromeは、Google社が提供しているブラウザで、OSに限らず幅広く利用されています。Blinkも、Edge HTMLと同様にC++で開発されています。

Webkit

 

4つ目は、Safariで利用されているHTMLレンダリングエンジン「Webkit」です。Safariは、iPhoneで最初からインストールされているため、iOSユーザーの方にとって馴染みの高いブラウザだと思います。

 

また、iOSでWebサイトを閲覧する場合には、いずれのブラウザでもWebkitがHTMLレンダリングエンジンとして動いています

 

Webサイトのレンダリングの仕組み

 

代表的なHTMLレンダリングエンジンがわかったところで、Webサイトのレンダリングがどのような仕組みで動いているのかが気になります。

Webサイトのレンダリングは、次の仕組みで動いています。

 

  1. 検索エンジンロボットがコンテンツ情報をクロール
  2. ブラウザがJavaScriptを実行
  3. インデックス登録

それぞれ解説していきましょう。

 

検索エンジンロボットがコンテンツ情報をクロール

 

検索エンジンロボットとは、Web上の文字や画像などのコンテンツを周期的に取得し、データとして蓄積する検索エンジンの「Webクローラ」を指します。Webクローラは検索エンジンごとに存在し、代表的なGoogleであれば「Googlebot」呼ばれます。

ユーザーが検索をするとまず始めにGooglebotが動き、検索されたキーワードを解決する適切な検索結果を表示させます。検索結果は、SEOで評価されているWebサイトほど上位に表示されやすいため、WebマーケティングをするならGooglebotの仕組みの理解も必要です。

 

ブラウザがJavaScriptを実行

 

続いて、JavaScriptで書かれたコードをJavaScriptエンジンに引き渡し、ブラウザ上でスクリプトが実行されます。JavaScriptは、アラートを出したり、アニメーションを追加するなどの指示ができるため、JavaScriptが実行により動的なWebサイトが成り立っています。

 

インデックス登録

 

レンダリングされて表示されたWebサイトのコンテンツを検索エンジン運営元が管理するデータベースに書き込む処理が実行されます。この処理は「インデックス」と呼ばれます。

 

インデックス登録により、再度同じWebサイトを閲覧したときに、事前にコンテンツ取得が行われていれば、ページ読み込みをスムーズに行えます。

 

Webサイトのレンダリングの種類

 

Webサイトのレンダリングは、種類によってページを読み込んだときの挙動が異なります。Webサイトのレンダリングは、大きく次の3種類が存在します。

 

  • SSR(サーバーサイドレンダリング)
  • Prerendering(プリレンダリング)
  • Dynamic Rendering(ダイナミックレンダリング)

各レンダリングの種類を解説していきましょう。

 

SSR(サーバーサイドレンダリング)

 

サーバーサイドレンダリングは、レンダリング処理をサーバー側で行う手法を指します。一般的には、Webページを表示されるまでに次の処理がなされています。

  1. クライアント(ユーザー)側からサーバーに対してHTTPリクエストを送信
  2. サーバー側で、HTMLファイルを生成
  3. サーバー側からクライアント側に対して、HTML・CSS・JavaScriptをレスポンスとして返す
  4. クライアント側でHTMLファイル内に記述されたJavaScriptを実行

 

サーバーサイドレンダリングでは、サーバー側でHTMLの生成とJavaScriptの実行をしてくれるため、クライアント側で実行する場合と比べてWebページの表示速度が早くなります。一方で、サーバー側でJavaScript実行を行うため、サーバーへの負担が大きくなってしまいます

 

Prerendering(プリレンダリング)

 

プリレンダリングは、ビルド時に前もってサーバー側で生成されたHTMLを配置しておき、クライアント側からリクエストがあれば、生成されたHTMLをレスポンスする仕組みを指します。

 

プリレンダリングは事前にHTMLを生成するため、サーバーへの負担が軽くなるのに加えて、静的なためWebページの表示を高速で実現できます。サーバーサイドレンダリングとの大きな違いは、HTMLの生成をサーバーで行うのか、ビルド時に生成するかの点です。

 

プリレンダリングは静的なWebページとなってしまうため、Ajaxを活用した動的なWebサイトには向いていません。

 

Dynamic Rendering(ダイナミックレンダリング)

 

ダイナミックレンダリングは、処理に時間のかかるJavaScriptを使ったファイルが存在した場合に、あらかじめ静的なHTMLファイルを生成してレスポンスする仕組みを指します。

 

つまり、クライアント側にはそのままHTMLファイルをレスポンスしてJavaScriptを実行してもらうのに対して、Googleクローラには静的に分解して見せます。Googleクローラは、複雑なJavaScriptの読み込みに時間がかかる特徴があるため、SEO対策の一環としてダイナミックレンダリングは効果的と言えます。

 

Webサイトのレンダリングの課題

 

Webサイトを表示させるのに欠かせないレンダリングですが、いくつかの課題があります。ここでは、次の2つの課題を解説していきましょう。

 

  • クロールの課題
  • JavaScriptの課題

クロールの課題

 

1つ目の課題は、文字や画像などのコンテンツを取得するクロールの課題です。検索エンジンロボットがWebサイトをクロールする際には、次の2つの課題に直面します。

 

  • robots.txtのアクセス制限
  • サーバーに負担がかかる

robots.txtのアクセス制限

 

robots.txtは、Webサイト管理者がクローラーに対してクローリングの指示を与えるためのテキストファイルを指します。

 

robots.txtの設定内容によっては、クローラーがWebサイトのクローリングを行わず、レンダリングが行われないケースが起こり得ます。したがって、Webサイト管理者側で、クローリング対象のページを定義し、クローラーに適切な指示を送るための設定が求められます。

参考: robots.txtの概要

サーバーに負担がかかる

 

クロール時はWebサイトのページ数やコンテンツの量によって、サーバー側に大きな負担がかかります。したがって、クロール時の手間を省くためにも、コンテンツを取得する回数を最小限に抑えたり、キャッシュからコンテンツを取得させるなどの対応が必要です。

 

JavaScriptの課題

 

2つ目の課題は、レンダリング実行時のJavaScriptについてです。レンダリングの仕組みによっては、クライアント側ではなく、サーバー側でJavaScriptを実行するものがあります。その際には、サーバー側は限られたCPUやメモリのリソースしかつかえないため、コンテンツによってパフォーマンスの低下を招くかもしれません。

 

また、限られたリソースを最大限まで使用してしまうと、インデックスに悪影響を与える場合もあります。今後は、インデックスを壊さないようにレンダリングの仕組みを構築し、エラー処理などにも対応させていく必要があります。

 

まとめ

SEOコンサルタント今回は、Webマーケティングのレンダリングの意味を解説しつつ、SEOにおけるレンダリングの仕組みも合わせて解説しました。Webのレンダリングは、Webサイトを閲覧するときにユーザーが理解できる状態にHTMLを生成してレスポンスする仕組みです。WebのレンダリングはHTMLレンダリングと呼ばれており、JavaScriptをどこで実行させるかによって種類が異なります。レンダリングはGoogleクローラとも影響し合っており、Googleに評価されるコンテンツ作りをするためにも、今回の記事を参考にレンダリングとは何かを理解しておきましょう。

 

 

この記事の監修者

SEOコンサルタント

アドマノ株式会社 代表取締役 天野 剛志

日本大学法学部卒業、広告代理店で12年間働いている間、SEOと出会い、SEO草創期からSEO研究を始める。SEOを独学で研究し100以上のサイトで実験と検証を繰り返しました。そのノウハウを元に起業し現在、10期目。営業、SEOコンサル、WEB解析(Googleアナリティクス個人認定資格GAIQ保持)コーディング、サイト制作となんでもこなす。会社としては今まで1000以上のサイトのSEO対策を手掛けてきました。

 

新着記事

人気記事

WEBマーケティング

SEO対策