レンダリングとは？SEOとの関係や影響を解説

Webにおけるレンダリングとは、WebサイトのHTMLファイルを、人間が閲覧する見た目に整形する仕組みのことです。JavaScriptを使って処理が行われ、方法によってページの表示速度やクロールに影響を与えます。

SEOとの関連性もありますが、仕組みがわからない方も多いのではないでしょうか。

この記事では、レンダリングの種類や仕組みについて解説していきます。

Webサイトの改善を考えている方は、ぜひ参考にしてください。

＜SEO対策について詳しく知りたい方はこちら＞SEO対策とは？SEO対策のメリット・デメリットと対策方法を詳しく解説

SEOにおいてのレンダリングとは？

レンダリングとは、画面の内容を指示するデータの集まりをプログラムで処理して、人間用に変換することです。Webにおいては、サーバーから取得したHTMファイルのソースを分析し、JavaScriptやCSSで処理した後、ブラウザに表示させます。

つまり、コンピューター用に作られたWebサイトのファイルを、人間がわかる見た目で表示するための仕組みです。

Googleは現在、レンダリングの内容をもとにインデックスや検索順位の決定を行います。そのため、処理状態を適切にしておくことが重要です。

Webサイトのレンダリングには以下3つの種類があり、それぞれ性質が異なります。

• サーバーサイドレンダリング
• クライアントサイドレンダリング
• ダイナミックレンダリング

レンダリングごとの詳細を解説するので見ていきましょう。

サーバーサイドレンダリング

サーバーサイドレンダリングは、サーバー側でJavaScriptをレンダリングする手法で、実行の流れが以下のとおりです。

1. ブラウザからサーバーに欲しいファイルを要求する
2. リクエストの内容に応じてサーバーがHTMLファイルを生成する
3. サーバー側でJavaScriptをレンダリングする
4. レンダリングされたHTMLをブラウザに渡す

サーバー側でHTMLの生成やレンダリングを行なってくれるため、Webページの表示が速い利点があります。

しかし、処理速度はサーバーのスペックに依存します。低性能なサーバーを利用している場合、却って遅くなることもあるため注意が必要です。

クライアントサイドレンダリング

クライアントサイドレンダリングは、ブラウザ側でJavaScriptをレンダリングする手法で、実行の流れが以下のとおりです。

1. ブラウザからサーバーに欲しいファイルを要求する
2. リクエストの内容に応じてサーバーが必要なHTMLファイルをブラウザに渡す
3. ブラウザがJavascriptをダウンロード
4. ブラウザ側でJavaScriptをレンダリングする

ブラウザ側でレンダリングを行うため、サーバーの負荷を軽減できます。

しかし、サーバーサイドレンダリングに比べてページの表示速度が遅くなる傾向があります。ユーザーのストレスにつながるリスクがあるため注意が必要です。

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

ダイナミックレンダリングは、検索エンジン用のレンダリング手法です。JavaScriptの生成に問題がありそうなページが見つかった場合の回避策として用いられます。

検索エンジンにはレンダリングが完了したコンテンツを送信し、人間に表示するものはクライアントサイドレンダリングを行います。GoogleがJavaScriptを実行できない場合、クロールおよびインデックス登録ができません。

しかし、ダイナミックレンダリングであれば、検索エンジン用にレンダリングされたファイルを代わりに送信できます。JavaScriptのエラーによる、インデックス漏れを防げる便利な手法です。

ただし、仕組みが複雑で多大なリソースが必要となるため、通常時の使用は推奨されていないため注意しましょう。

関連記事：Googleにインデックスされない原因と対処法を解説

SEOとレンダリングの関係

Googleは、レンダリングの内容をもとにインデックス登録や検索順位の決定を行なっています。そのためSEO対策では、Googlebotが適切にレンダリングできる状態にしておくことが重要です。

しかし、適切な方法はサイトの規模や状態によって異なります。

そこでポイントとなる項目が以下3つです

• SEOに適しているのはサーバーサイドレンダリング
• ダイナミックレンダリングが適している場合もある
• 大規模なサイトにはクライアントサイドレンダリングは不向き

それぞれ詳しく解説していきます。

SEOに適しているのはサーバーサイドレンダリング

サーバーサイドレンダリングは、Googlebotのレンダリングの負担を軽減できます。クロールバジェットの問題や、部分的なインデックス作成を解決できるため、SEO対策に適しています。

またページの読み込み速度が短縮されるため、ユーザーエクスペリエンスの向上につながり、間接的な評価向上も見込めます。

ただし、サーバーのスペックが低いと却って表示速度を落とすこともあるため、十分な運用環境を用意することが大切です。

ダイナミックレンダリングが適している場合もある

以下のようなページには、ダイナミックレンダリングが適しています。

• JavaScriptで生成される、変更頻度の高い一般公開コンテンツ
• GoogleがサポートしていないJavaScriptの機能を使ったコンテンツ

上記の場合、クローラーがページの内容を読み取れず、インデックスされない可能性があります。

しかし、ダイナミックレンダリングを使用すれば、JavaScript無しで生成されたコンテンツを検索エンジンに送信できます。コンテンツが認識されない事態を避けるための回避策として、Googleも推奨しています。

参照：回避策としてのダイナミック レンダリング

大規模なサイトにはクライアントサイドレンダリングは不向き

クライアントサイドレンダリングは、サイトの規模が大きくなるほど不利になります。提供するコンテンツの情報量が増えれば、必要なJavaScriptの量が増加するためです。レンダリングが複雑になるため、ブラウザに負荷がかかり、ページの表示速度が低下する恐れがあります。

とくに、スマホでサイトを閲覧する場合、デバイスやブラウザのメモリが小さいため、処理に時間がかかります。スマホページの表示速度が落ちると、検索順位の低下を招く恐れもあるため注意しましょう。

SEOにおけるレンダリングの課題

SEO対策を行うにあたって、レンダリングには以下3つの課題があります。

• サーバーへの負担
• robots.txtのアクセス制限
• JavaScriptの制限

それぞれ詳しく解説していきます。

サーバーへの負担

コンテンツの量や内容が増えると、レンダリング処理が複雑になり、クロールの際にサーバーに大きな負担がかかります。

そのため、情報の取得数を最低限に抑える、ブラウザキャッシュを使ってサーバーの仕事を減らすなどの工夫が必要です。

【関連記事】
クローラー（Crawler）とは？上位化のための対策を紹介
Googleのクロール頻度とは？確認方法や仕組みを解説

robots.txtのアクセス制限

robots.txtとは、Googlebotにクローリングの指示を与えるためのテキストファイルです。設定内容によっては、クローリングやレンダリングが行われず、ページがインデックス登録されない問題が起こります。

クローラーがページを見落とさないように、適切な設定を行いましょう。

関連記事：robots.txtとは？機能や目的・活用方法を解説

JavaScriptの制限

レンダリングにはJavaScriptが使用されますが、内容によっては実行の際にサーバーやブラウザに大きく負荷がかかります。

また、Googleがサポートしていない機能を使う場合、クロールができないため、インデックスされない可能性もあります。

そのため、レンダリングの仕組みを理解した上で、コンテンツの内容に合わせた処理方法の見直しが重要です。必要に応じてダイナミックレンダリングを行うなど、エラーに対応できる環境を構築しましょう。

まとめ：SEOを意識して適切なレンダリングを選ぼう

Webにおけるレンダリングは、JavaScriptを実行させる場所によって、3つの種類があります。

• サーバーサイドレンダリング
• クライアントサイドレンダリング
• ダイナミックレンダリング

SEO対策には、ページの表示速度が速いサーバーサイドレンダリングが適しています。クライアントサイドレンダリングは、大規模なサイトには向いていないため注意が必要です。

また、JavaScriptの制限などによりクロールできない可能性があるページにはダイナミックレンダリングが推奨されています。適切なレンダリング処理を施し、SEOに強いサイトを構築しましょう。

【関連記事】
【失敗しない】SEO対策を外注へ依頼する前にぜひ知ってほしい内容を徹底解説
SEO対策を代行業者へ依頼する場合の料金の相場は？

弊社SEOサービスランクエストではどんなお客様に対しても、予算状況に応じてSEOサービスを提供ができるように、「オーダーメイド型プラン」もご用意しております。お客様の課題や状況に合わせた最適なプランをご提案いたしますので、今後SEO代行業者をお探しになられる方は、ぜひ弊社サービスの内容をご覧ください。