SEOのための動的レンダリングの利点

公開: 2022-03-16

JavaScriptのWebページは、検索エンジン最適化を非常に複雑にしますが、これは非常に注意が必要です。 SEOはデジタルマーケティングの基本的な部分と見なされています。しかし、想像力をかき立てると、ジャグラーがポールでいくつかのプレートを回転させる有名なサーカスの演技を思い出させることができます。テクニカルSEOはどうですか？綱渡りを歩いて、ジャグリングをしていると想像してみましょう。

SEOの動的レンダリング

では、JavaScript SEOとは何ですか？もしそれがサーカスの行為だったら、それは何でしょうか？おそらく、綱渡りを歩いてジャグリングを…火の玉で。そして、それは正確な定義になります。これらの理解しやすい関連付けのおかげで、それがトリッキーなバランス調整プロセスであることがわかります。あなたのウェブサイトは検索エンジンで扱いやすく、同時に競合他社よりもうまく機能し、より速くロードする必要があります。

そして今、良いニュースは、技術的なSEOがあなたがコントロールできるランキング要素の1つであるということです。結局のところ、これがJavaScript WebサイトをGoogleにとって読みやすく理解しやすくし、訪問者に優れたWebエクスペリエンスを提供するものです。これは大きなメリットです、同意しませんか？さらに、SEOの動的レンダリングの利点、サイトのSEOの健全性に対するその重要性、およびそれを実装する方法について詳しく説明します。しかし、最初に、簡単な言葉での動的レンダリングとは何ですか？

GoogleがあなたのWebページにアクセスします。次は何ですか？

ご存知のように、Googleの最高のヘルパーは、ワールドワイドウェブ上のすべてのウェブページにインデックスを付けてカタログ化する自動プログラムまたはボットです。 Googleは、特定のリクエストに対して可能な限り最高の結果をユーザーに提供しようとします。これを行うために、特定のWebページ上のSEO動的コンテンツを注意深く分析し、同じトピックの他のWebページと比較したその相対的な重要性を評価します。

最新のWeb開発のほとんどは、HTMLとJavaScriptの3つの主要なプログラミング言語を使用しています。 Googleは、HTMLをクロールしてインデックスを作成することで処理します。まず、Googlebotはページ上のHTMLを調べます。次に、テキスト、ページ上の送信リンク、およびキーワードに注意を払います。次のステップは、ページのインデックスを作成することです。 Googleやその他の検索エンジンは、静的HTMLで表示されるコンテンツを優先します。

JavaScriptレンダリングは、次の3つのステップで構成されているため、より複雑です。

クロール
与える
索引

GoogleはJavaScriptコンテンツを複数回処理して、そのコンテンツを完全に理解します。これがサイトレンダリングの本質です。 GoogleがウェブページでJavaScriptに出会うと、それをキューに入れます。次に、そのためのリソースがある場合、Googleはそれをレンダリングします。

JavaScript SEOの難しさは何ですか？

HTMLは、Web開発の標準として機能します。まず、検索エンジンはそれに基づいてコンテンツを効率的に処理できます。たとえば、Javascriptはリソースを大量に消費するため、検索エンジンの処理はより困難です。これは、検索エンジンの予算がJavaScriptWebページに費やされていることを示しています。 Googleは、検索エンジンがJavaScriptを処理できると主張しています。しかし、これはまだ事実ではありません。

JavaScript SEO

クロール、インデックス作成、およびページレンダリングには、かなり多くのリソースが必要です。 BingやDuckDuckGoなどの他の検索エンジンでは、状況はさらに悪化します。これは、JavaScriptをまったく処理できないためです。その結果、検索エンジンはJavaScriptページをレンダリングするためにさらに多くのリソースを必要とします。残念ながら、これはページの多くの要素がまったくインデックスに登録されないことを意味します。

たとえば、Googleや他の検索エンジンは、SEOに不可欠なメタデータと正規タグを見逃す可能性があります。事実、Javascriptは、ユーザーを言葉では言い表せないほどの興奮に導く動的なWebサイトを作成できる優れたユーザーエクスペリエンスを提供します。ただし、問題は残ります。 SEOを損なうことなく、どのようにして最新のWebエクスペリエンスを作成しますか？多くの開発者は、サーバー側のレンダリング方法を選択します。

クライアント側/サーバー側のレンダリングVS。

Angular、Vue、Reactなどの多くのJavaScriptフレームワークは、クライアント側のレンダリングを使用します。 Webページのコンテンツが完全に読み込まれるのを待ってから、ユーザー側のブラウザで読み込みます。簡単に言えば、検索エンジンが表示するサーバーではなく、ユーザーにコンテンツをレンダリングします。その結果、クライアント側のレンダリングは他の方法よりも安価です。価格に加えて、サーバーと開発者の負荷も低下します。

ただし、ユーザーエクスペリエンスが悪化する可能性があるため、すべてがスムーズであるとは限りません。たとえば、ページの読み込み時間が長くなり、バウンス率が高くなります。クライアント側のレンダリングもボットに影響します。 Googlebotは2波のインデックスシステムを使用しています。最初のステップは静的HTMLをクロールしてインデックスを作成することであり、2番目のステップはJavaScriptコンテンツをクロールすることです。繰り返しになりますが、ボットはインデックス作成プロセス中にJavaScriptコンテンツを見逃す可能性があります。

それで、それについて何をしますか？ほとんどの開発チームにとって、これはサーバー側のレンダリングです。コンテンツがクライアント側のブラウザーではなくサイトのサーバーでレンダリングされるようにJavaScriptを構成します。 JavaScriptコンテンツは事前にレンダリングされるため、ボットが読み取ることができます。 SSRにはパフォーマンス上の利点もあります。ボットとユーザーは、不完全なインデックス作成やコンテンツの欠落のリスクなしに、より高速なエクスペリエンスを得ることができます。

サーバーサイドレンダリング：生きるべきか、死ぬべきか？

この質問に答えるために、最初に考えてください：サーバー側のレンダリングはSEOにとって簡単ですか？答えはいいえだ。そうでなければ、JavaScript SEOは問題にならず、すべてのWebサイトがそれを実行します。残念ながら、SSRを実装するには有能なWeb開発チームが必要であり、実装プロセス自体は費用がかかり、時間がかかり、複雑になります。さらに、サードパーティのJavaScriptでは機能しません。

サーバーサイドレンダリングを使用するWebサイトでは、多くの場合、セットアップが難しい外部JavaScriptライブラリまたはプラグインが必要です。たとえば、Angularでは、サーバー側のレンダリングを有効にするためにAngularユニバーサルライブラリが必要です。したがって、AngularでSSRを有効にするには、多くの可動部分が必要です。そして、それは重大なリスクです。なぜなら、1つのピースがずれると、検索結果が失敗する可能性があるからです。

一方、ReactはNext.JSライブラリを使用してサーバー側のレンダリングを提供します。その結果、開発者は追加のコストを負担するために追加のサーバーを必要とします。では、React SEOのようなフレームワークをどのようにして顧客や検索エンジンを満足させるのに適したものにするのでしょうか？繰り返しになりますが、動的レンダリングが役に立ちます。

一言で言えば動的レンダリング

動的レンダリングは、コンテンツを要求するユーザーエージェントに基づいてコンテンツを配信します。言い換えれば、それは両方の世界の長所を提供する普遍的なソリューションです。ボットの静的HTMLおよびユーザーの動的JavaScriptとして機能します。

その結果、ボットは、機械可読で、簡素化された、テキストとリンクのみのバージョンのWebページを取得します。これにより、ページのクロールと分析が容易になります。次に、ユーザーは、Webサイトとの対話の長さを増やす、使用可能で完全に最適化されたWebページを取得します。

動的レンダリングを実装する方法

動的レンダリングの実装は、3つのステップで構成されています。

動的コンテンツを静的HTMLに変換するための動的レンダラーのインストール。
静的コンテンツを受信する必要があるユーザーエージェントの選択（Googlebot、Bingbot、LinkedInbotなど）。ちなみに、キャッシュを実装するか、コンテンツを保存するHTTPリクエストの数を増やすと、サーバーの低速な作業が解決されます。顧客がデスクトップデバイスとモバイルデバイスのどちらのコンテンツを必要とするかを検討することも価値があります。動的サービングを使用すると、適切なソリューションを提供するのに役立ちます。
静的HTMLを配信するようにサーバーを構成します。

構成の確認

動的レンダリングが正しく機能していることを確認するには、次の手順を実行する必要があります。

モバイルフレンドリーテスト：これは、Google検索コンソールの一連のツールの機能です。 2020年9月、Googleはすべてのサイトでモバイルファーストのインデックス作成に移行しました。つまり、Googleは、デスクトップバージョンよりもモバイルバージョンのサイトを考慮します。したがって、モバイルデバイス用にサイトを最適化する必要があります。
URL検査ツール：サイトが適切にインデックスに登録されていることを確認する必要があります。 URLチェッカーツールはこれを支援します。
Fetch as Google：動的レンダリングの効果を判断するために必要です。これにより、個々のURLがインデックス作成のために正しく送信されるようになります。
構造化データテストツール：サイトでスキーママークアップを使用すると便利です。これにより、動的レンダリングがスキーママークアップを壊さないことが保証されます。

ユースケース

動的レンダリングは、すべてのJavaScriptSEO問題を完全に解決します。これは大きな利点です。動的レンダリングは、費用対効果が高く、クロール予算の問題をすばやく解決します。ボーナスは、高度な技術的知識を必要としないという事実です。では、この便利なツールをいつ使用する必要がありますか？

頻繁に変更されるコンテンツが多い大規模なWebサイトは、動的レンダリングに最適です。これは、大規模なサイトが頻繁かつ迅速にインデックスに登録されるためです。したがって、すべてのページにインデックスが付けられ、SERPに適切に反映されることが不可欠です。動的レンダリングはこれをうまく処理します。
動的レンダリングは、ソーシャルメディアの壁やウィジェットが埋め込まれているサイトの命の恩人にもなります。

動的レンダリングはクローキングですか？

クローキングとは、検索エンジンのボットと人間に著しく異なるコンテンツを提供することです。それはブラックハットのSEO戦術です。クローキングの短期的なメリットは魅力的ですが、潜在的なリスクはまだ価値がありません。動的レンダリングは、検索エンジンとユーザーに同じ最終コンテンツを提供する場合、マスキングされません。ただし、それぞれに完全に異なるコンテンツを提供する場合、それはクローキングです。

検索エンジン用にJavaScriptサイトを最適化する方法

プロセスの多くは、SEOの専門家が慣れているものと似ていますが、いくつかの違いがあります。

ページ上のSEO

コンテンツの通常のページ上のSEOルール：タイトルとメタの説明タグ、alt属性、メタロボットタグ、その他のアプリケーション。開発者がJavaScriptWebサイトで作業しているときに遭遇するいくつかの問題は、タイトルと説明タグが再利用できること、および画像がalt属性に設定されることはめったにないことです。

クロールを許可する

リソースへのアクセスをブロックしないでください。 Googleは、ページを正しくレンダリングするためにリソースにアクセスして読み込む必要があります。

URL

コンテンツを更新するときにURLを変更します。 JavaScriptフレームワークは、純粋なURLへのマッピングを可能にするルーターを使用することを知っておく必要があります。ルーティングにオクトトープ（＃記号）を使用しないでください。これは主にVueと一部の初期バージョンのAngularで問題になります。 abc.com/#somethingのようなURLでは、サーバーは通常、＃記号に続く部分を完全に無視します。

重複コンテンツ

JavaScriptの場合、複数のURLが同じコンテンツにつながる可能性があり、重複するコンテンツで問題が発生する可能性があります。これは、異なるレジスタ、識別子、識別子のパラメータが原因である可能性があります。以下のすべてのバリアントが存在する可能性があります。

domain.com/Abc
domain.com/abc
domain.com/123
domain.com/?id=123

解決策は簡単です。インデックスを作成するバージョンを1つ選択し、正規タグを設定します。

SEOプラグイン

JavaScriptフレームワークでは、これらは通常プラグインと呼ばれます。 React、Vue、Angularなどの最も人気のあるフレームワーク用のバージョンがあります。「フレームワーク+モジュール名」（「React Helmet」など）を検索すると、それらを見つけることができます。メタタグ、ヘルメットとヘッドは、SEOに必要な多くの人気のあるタグをインストールできるようにする同様の機能を備えた人気のあるモジュールの例です。

エラーページ

JavaScriptフレームワークはサーバー側で実行されないため、404などのサーバー側エラーを引き起こすことはありません。エラーページの場合、いくつかの異なるオプションがあります。

404ステータスコードで応答するページへのJavaScriptリダイレクトを使用する
応答しないページに、インデックスなしのタグと「404ページが見つかりません」などのエラーメッセージを追加します。

サイトマップ

JavaScriptフレームワークには通常、純粋なURLにマッピングするためのルーターがあります。これらのルーターのほとんどには、サイトマップを作成することもできる追加のモジュールがあります。「Vueルーターサイトマップ」（サイトマップ付きVueルーター）などの「システム+ルーターサイトマップ」を検索すると、それらを見つけることができます。さらに、多くのレンダリングソリューションにはサイトマップオプションもあります。繰り返しになりますが、「Gatsbyサイトマップ」などの「システム+サイトマップ」をグーグルで検索すると、すでに存在するソリューションが確実に見つかります。

リダイレクト

SEOの専門家は、サーバー側での301/302リダイレクトに慣れています。一方、JavaScriptは通常クライアント側で実行されます。 Googleはリダイレクトによって受信されたページを処理するため、これは問題ではありません。ただし、リダイレクトは引き続きPageRankなどのすべての信号を渡します。これらのリダイレクトは通常、コード内の「window.location.href」で見つけることができます。

国際化

hreflangなど、国際化に必要な機能の一部をサポートするために、さまざまなフレームワークにいくつかのオプションがあります。これらは通常、他のシステムに移植され、ローカリゼーションと国際化、または目的のタグを追加するために使用できるヘルメットなどのヘッダータグに使用されるすべての同じモジュールが含まれます。

遅延ロード

遅延ロードを処理するためのモジュールがあります。まだ気付いていない場合は、JavaScriptフレームワークを操作するときに必要なほとんどすべてのモジュールがあります。レイジーとサスペンスは、遅延ロード用の最も一般的なモジュールです。画像の読み込みを遅らせるのが賢明ですが、コンテンツの読み込みを遅らせないでください。これはJavaScriptを使用して実行できますが、コンテンツがその方法で検索エンジンによって正しく構築されない場合があります。

結論

JavaScript SEOは、非常に複雑なデジタルマーケティングメカニズムです。それ以外の場合、JavaScriptは賢明に使用されるツールであり、SEOが回避する必要のあるものではありません。しかし、努力すれば、常に解決策を見つけることができます。そしてここでは、動的レンダリングであり、Web開発チームの負担を軽減し、予算を節約します。だから、Googleがあなたに反対するのではなく、最終的にあなたと協力するようにします。

Googleのトップランキングに入る