SEM・SEO・リスティング広告の違いを徹底解説!効果的な活用法も紹介
2023年6月2日
東証スタンダード上場企業のジオコードが運営!
SEOがまるっと解るWebマガジン
更新日:2023年 08月 25日
【監修】株式会社ジオコード SEO事業 責任者
栗原 勇一
レンダリングとは、HTMLやCSS、JavaScriptなどのコードをWebページとして閲覧できる形に変換することです。実はこのレンダリングはSEOにも影響します。Web担当者としては、ページが正しく表示されるのをチェックするだけでは不十分といえるでしょう。
この記事ではレンダリングの意味や役割、Google検索における仕組み、種類、レンダリングにおける課題などを解説しています。レンダリングへの理解を深めてWebサイト運営の成果を高めていきましょう。
目次
そもそもレンダリングとは何か、どのような役割があるのかなどの基礎知識を解説します。
Webマーケティングにおける「レンダリング」とは、HTMLやCSS、JavaScriptなどで書かれたコードをWebページとして閲覧できる形に変換することです。レンダリングせずにそのまま表示すればプログラム言語の羅列になってしまい、サイトを訪れたユーザーが内容を理解できません。
また、レンダリングを行わなければGooglebotもWebページのコンテンツを理解できません。Googlebotとは、Google検索のクローラー(定期的にウェブを巡回し、Googleのデータベースに登録しているソフトウェア)の総称です。
従って、Web担当者はGoogleサーチコンソールなどを使って、Googlebotから見たWebページと検索ユーザーから見たWebページが合致しているか確認する必要があります。Google検索でのレンダリングの仕組みについては後ほど詳しく解説します。
レンダリングは「レンダリングエンジン」によって行われます。レンダリングエンジンとは、レンダリングの役割を担うプログラム、ソフトウェアであり、各種のブラウザやGoogle検索のGooglebotに搭載されているものです。
レンダリングエンジンは一つではなく、ブラウザの数だけ種類があります。代表的なものは以下のとおりです。
レンダリングはGoogle検索の情報収集や掲載順位に関わっており、主に下記の流れに沿って行われています。
それぞれについて詳しく解説します。
検索エンジンロボットとは、世界中のWebサイトの情報を自動的に巡回し、データベースに登録するソフトウェアです。Webサイトを巡回することを「クロール」といい、データベースに登録することを「インデックス」といいます。
Google検索の検索エンジンロボットはGooglebotです。GooglebotはGoogle検索に掲載するためのWebサイトの情報を収集、整理しています。
Googleはユーザーに有益な高品質のサイトほど上位掲載する傾向があります。従って、Googlebotの仕組みを理解し、自社Webサイトの内容を適切に理解してもらうことがSEO上でも重要です。このクロールの段階では、まだレンダリングエンジンは動作していません。
自社サイトが発見されてクロールされると、次に検索エンジンロボット(Googlebot)は、Webページの内容を解釈しようとします。この際にレンダリングエンジンが動作し、ブラウザと同じようにページのコンテンツを表示する仕組みです。
Webページ内にJavaScriptがあれば、JavaScriptエンジンに引き渡してスクリプトを実行します。これによって、アニメーションを動かしたり、アラートを出したりするような動的なコンテンツも検索エンジンロボットが認識できます。
レンダリングして解釈可能になったWebページの内容は、検索エンジンのデータベースに登録(インデックス)されます。このインデックスがあって初めて、検索エンジンの掲載候補になります。インデックスされなければ、検索結果に表示されることはありません。
また、インデックスされる際にWebサイトの品質や関連性の高い検索語句などが評価されランキングされます。ランキングではコンテンツの質も大切ですが、それ以前に正しくレンダリングされて内容を適切に解釈してもらう必要があります。
Webページを閲覧する際は通常、ユーザー側のブラウザでレンダリングが実行されます。
しかし、目的によっては違う方式も採用されます。ここでは主な種類として、Dynamic Rendering(ダイナミックレンダリング)とSSR(サーバーサイドレンダリング)について解説します。
ダイナミックレンダリングとは、処理に負荷がかかるJavaScriptや検索エンジンロボットがサポートしていないJavaScriptがある際に、あらかじめ静的なHTMLファイルを生成しておいてレスポンスする方式です。検索エンジンロボットは静的なHTMLを解釈してページ内容を把握できます。一方、クライアント(閲覧ユーザー)は通常どおり、元のHTMLファイルとJavaScriptを実行します。
ダイナミックレンダリングの主な利用方法は、検索エンジンがJavaScript生成コンテンツに対応していない場合の回避策です。また、変更頻度が高く重要な一般公開のコンテンツに対して、クローラビリティを高めるために用います。反対に、これ以外の目的でダイナミックレンダリングを用いると仕組みが複雑になりリソースも消費するため、Google検索は推奨していません。
サーバーサイドレンダリングとは、サーバー側でレンダリングを行う方式です。クライアント(閲覧ユーザー)からリクエストがあった際にサーバー側でHTMLの生成とJavaScriptの実行などを行います。そして結果をクライアントに送信し、クライアント側が表示を行います。
サーバーサイドレンダリングは、クライアント側の処理負荷がかからないため、表示を高速化するのに効果的です。ユーザーの利便性および、検索エンジンによるページエクスペリエンス(Webページの利便性を測る指標)のスコアを高めたい場合におすすめです。
ただしサーバー側の負荷が増すため、高性能のサーバーを導入・運用するコストがかかります。また、サーバーサイドレンダリングの実装には、エンジニアによるシステム構築が必要です。
レンダリングにまつわる課題は、JavaScriptの実行とクロールによるサーバー負荷増加です。それぞれについて解説します。
レンダリングの際に、JavaScriptの実行でパフォーマンスが低下する場合があります。例えば先に紹介したサーバーサイドレンダリングでは、アクセスが集中するとサーバー側のCPUパワーが足りず、表示速度が遅くなってしまいます。しかし、クライアント側のブラウザでレンダリングさせたとしてもJavaScriptの中身によっては同様の問題が起こりかねません。
表示速度が遅くなると、SEOに悪影響を及ぼすリスクがあります。Google検索にはコアウェブバイタルという評価基準があり、その中にコンテンツが表示されるまでの待機時間(LCP)があるからです。JavaScriptはページの読み込み時間を秒単位で遅らせる要因になり得るため、注意が必要です。
次に起こり得る問題は、robots.txtが適切に設定されておらずサーバーに負荷がかかることです。robots.txtとは、検索エンジンロボットに対し、どのWebページにクロールしてよいかを伝えるファイルです。
例えば以下のようなページをクロール不可にしていない場合、レンダリングによってサーバーが過負荷になる可能性があります。
したがってWeb担当者は、Webサイトを更新した際にrobots.txtを適切に設定し直す必要があります。この際に間違って設定してしまうとインデックスしてほしいページがクロールされないため注意してください。
Webページを閲覧できる形に変換するレンダリングを意識することがないケースもあるしょう。しかし、レンダリングはユーザーに閲覧してもらうだけでなく、Google検索にページ内容を正しく理解してもらうためにも重要です。ページの評価やSEOに影響を与えるため、レンダリングの仕組みや手法を理解してWebサイトを構築していきましょう。
レンダリングやSEOについてお困りのことがありましたら株式会社ジオコードにぜひご相談ください。SEOやUI・UXのコンサルティング、コンテンツマーケティングの代行など多彩なサービスによって、課題や目的に応じて最適な解決法をご提案いたします。