JavaScript レンダリング バジェットは、Google が JavaScript を多用するページのレンダリングに割り当てる処理量を制限します。JavaScript を最小限に抑え、プログレッシブ エンハンスメントを活用し、重要なコンテンツが JavaScript なしでも読み込まれるようにすることで最適化しましょう。
JavaScriptレンダリング予算が重要な理由
JavaScript のレンダリングバジェットは、JavaScript フレームワークを利用するウェブサイトにとって重要な要素です。Google がサイトをクロールしてレンダリングできる時間とリソースには限りがあります。検索エンジンのクローラーがウェブサイトにアクセスし、すべてのページのレンダリングにかなりの時間とリソースが必要であると判断した場合、すべてのページに到達できない可能性があります。その結果、新しいコンテンツのインデックス登録に長い遅延が生じ、既存ページの重要な更新が再インデックスされない可能性があります。適切に最適化された JavaScript サイトとは、レンダリングバジェットを効率的に使用し、重要なページがすべてレンダリングされ、インデックス登録されているサイトです。
異なるCMSプラットフォーム間で
レンダリング バジェットの管理は、CMS とサイトの構築方法によって異なります。
WordPress
WordPressのデフォルトの構造は、レンダリングバジェットを最適化する方法の完璧な例です。標準HTMLを使用しているため、検索エンジンはコンテンツを即座にクロールしてインデックスできます。WordPressのバックエンド上にJavaScriptフレームワークを使用してカスタムフロントエンドを構築する場合は、 サーバー側のレンダリング （SSR） レンダリング予算を無駄にしないためのアプローチ。
Shopifyサービス
Shopifyの標準テーマはサーバーサイドレンダリングされるため、通常はレンダリングバジェットを気にする必要はありません。ただし、JavaScriptフレームワークを使用したヘッドレスコマースアプローチを使用している場合は、すべての商品ページがクロールされインデックスに登録されるように、サーバーサイドレンダリングまたはプリレンダリングソリューションを実装する必要があります。
ウィックス
Wixはクローズドシステムを採用しているため、JavaScriptのレンダリングコストを気にする必要はほとんどありません。プラットフォームのシステムは、検索エンジンのガイドラインに準拠した方法で動的コンテンツを処理するように設計されています。
ウェブフロー
Webflowは、SEOに非常に配慮された、クリーンでセマンティックなHTMLを生成します。独自のJavaScriptを追加することもできますが、コアコンテンツは常にサーバー上でレンダリングされるため、JavaScriptのレンダリングコストが大きな問題となることはありません。
カスタムCMS
カスタムCMSなら、サーバーサイドレンダリング（SSR）アプローチを採用することで、検索エンジンのレンダリング予算に合わせて最適化されたシステムを構築し、最大限の制御が可能になります。これは、すべてのページが確実にレンダリングされ、インデックスに登録される最も効果的な方法です。
さまざまな業界にわたって
JavaScript レンダリング予算は、動的コンテンツを使用するすべての業界にとって懸念事項です。
E-コマース
電子商取引サイトでは、 JavaScript フレームワーク 高速でモダンなユーザーエクスペリエンスを実現するために、すべての商品ページとカテゴリーページがレンダリングされ、インデックスに登録されていることを確認することが重要です。そうしないと、オーガニックトラフィックと売上の大幅な減少につながる可能性があります。
地元企業
ページ数が少ないローカルビジネスでは、レンダリング予算についてそれほど心配する必要はないかもしれません。しかし、主要ページがすべてインデックスに登録されるようにするには、サーバーサイドレンダリング（SSR）アプローチを採用するのがベストプラクティスです。
SaaS企業
SaaS企業は、マーケティングページやダッシュボードにJavaScriptフレームワークを使用することが多いです。マーケティングページがレンダリングされ、インデックス化されていることを確認することが重要ですが、ユーザーダッシュボードはクライアント側でレンダリングされるアプリケーションのままにしておく必要があります。
ブログ
JavaScriptフレームワークで構築されたブログは、レンダリング予算が限られているという問題を抱える場合があります。すべての記事がレンダリングされ、インデックスに登録されることは、オーガニックトラフィック獲得の大きな要因となるため、非常に重要です。
レンダリング予算のすべきこと、すべきでないこと
ドーズ
- サーバー側レンダリング (SSR) または事前レンダリング ソリューションを使用してください。 これは JavaScript SEO のゴールド スタンダードです。
- Google Search Console の URL 検査ツールを使用してください。 このツールを使用すると、Google がページをどのように認識しているか、またレンダリングにどのくらいの時間がかかるかを確認できます。
- 使用してください 非同期 (NAIST) と 延期する 属性を指定します。 これらの属性は、JavaScript ファイルを非同期的に読み込むことでページ速度を向上させるのに役立ちます。
しないでください
- 純粋なクライアント側レンダリング (CSR) アプローチを使用しないでください。 これは最もよくある間違いであり、検索結果でページがほとんどまたはまったく表示されない状態につながる可能性があります。
- 検索エンジンによる JavaScript ファイルのクロールをブロックしないでください。 検索エンジンは、ページを適切にレンダリングするために JavaScript にアクセスする必要があります。
- JavaScript のみのページ区切りを使用しないでください。 これにより、コンテンツの大部分が検索エンジンに表示されなくなる可能性があります。
避けるべき一般的な間違い
- サーバー側レンダリング (SSR) または事前レンダリングの欠如: これは最も一般的かつ壊滅的な間違いです。
- レンダリング速度が遅い: レンダリング速度が遅いと、レンダリング バジェットが制限される可能性があります。
- JavaScript エラーのチェックに失敗しました: 1 つの JavaScript エラーにより、検索エンジンがページをレンダリングできなくなる可能性があります。
よくあるご質問
JavaScript レンダリング バジェットは、Web サイトのクロール バジェットにどのように影響しますか?
JavaScriptのレンダリングバジェットはクロールバジェットに影響します。検索エンジンがサイトをクロールできる時間とリソースには限りがあるためです。検索エンジンのクローラーがページのレンダリングに時間がかかりすぎると、すべてのページをクロールできず、インデックス率が低下する可能性があります。
JavaScript レンダリング バジェットとページ速度の違いは何ですか?
ページスピードとは、ユーザーがページを読み込むのにかかる時間です。JavaScriptレンダリングバジェットとは、検索エンジンがページをレンダリングするのにかかる時間です。これらは関連していますが、同じではありません。
JavaScript レンダリング バジェットとクロール バジェットの主な違いは何ですか?
JavaScriptレンダリングバジェットとは、検索エンジンがページをレンダリングするのにかかる時間です。クロールバジェットとは、検索エンジンが一定期間内にクロールするページ数です。JavaScriptレンダリングバジェットは、クロールバジェットの低下につながる可能性があります。
JavaScript レンダリング バジェットの問題をテストするにはどうすればよいですか?
あなたが使用することができます URL検査ツール Google Search Consoleで、検索エンジンがページをレンダリングするのにかかる時間を確認できます。また、次のようなツールも利用できます。 GoogleのリソースPageSpeed ページの読み込みにかかる時間を確認します。
JavaScript レンダリング バジェットの問題を防ぐ最善の方法は何ですか?
最良の方法は、 サーバーサイドレンダリング（SSR） または 事前レンダリング ソリューション。これにより、検索エンジンのクローラーは常に完全な形式の HTML ページを受け取るようになります。
