ReacteコマースWebサイトのSEOベストプラクティス
公開: 2022-04-05Reactは、さまざまなWebサイト、特にeコマースサイトで使用されている主要なJavaScriptフレームワークの1つとして登場しました。
React Webサイトは、その構築方法が原因で、検索エンジン最適化（SEO）に関していくつかの特定の考慮事項があり、Reactシングルページアプリケーション（SPA）のSEOベストプラクティスの明確なセットがあります。
このガイドでは、React eコマースサイトがSEO用に正しく構成されていることを確認する方法と、検索に最適化されたeコマースWebサイトでReactを使用することの長所と短所について説明します。
Reactとは何ですか？
Reactは、一般的なUIコンポーネントに基づいてユーザーインターフェイスを構築するために使用できるJavaScriptライブラリです。 これは、Facebookの親会社であるMetaと、企業や個人を含む開発者のオープンソースコミュニティによって維持されています。
オープンソースであるため、Reactも無料で使用できます。 シングルページアプリケーション（上記のSPA）またはモバイルアプリの基本フレームワークを形成できます。
Reactがeコマースに適しているのはなぜですか？
ReactはUIに重点を置いているため、ユーザーエクスペリエンス（UX）をデザインの中心に据えたスムーズでシームレスなeコマースWebサイトを作成するための便利なツールです。
コンテンツはクライアント側で提供され、ページを更新する必要がないため、顧客がWebサイトをすばやく簡単にナビゲートでき、サーバーの遅延が少なくなり、ページの読み込み速度に影響します。
Reactの汎用性は、デスクトップeコマースサイトとモバイルアプリで同様に使用できることを意味し、プログレッシブWebアプリを作成したい開発者にとって最も簡単なオプションの1つになります。
検索エンジンはReactWebサイトをクロールできますか？
検索に最適化された他のWebサイトと同様に、ロボット（特にGooglebot）がReactサイトのコンテンツをどのように見るかを理解することが重要です。
一般に、Googleは2段階でウェブサイトをクロールし、コンテンツを識別します。
ソースコードをクロールする
まず、Googlebotはウェブサイトをクロールし、HTMLやページヘッダーなどを含むソースコードを取得します。
DOMをレンダリングする
次に、Googlebotは、ページで使用されているJavaScriptを含むドメインオブジェクトモデル（DOM）をレンダリングします。これは、Chromeの組み込みの開発ツールと他のブラウザの同等の機能を使用して識別できます。
Reactはクライアント側のJavaScriptフレームワークです。つまり、Googlebotではページの識別が難しい場合があります。 これは、従来のWebサイトとは異なり、Reactは、あるページから別のページに移動するときにサーバーにリクエストを送信しないため、Googleが別のページを表示するのが困難になるためです。
サーバー側のレンダリングを使用するようにReactを構成できますが、サイトをナビゲートするときにGooglebotはJavaScriptファイルやその他のサーバーベースのリソースをレンダリングしません。 このため、ベストプラクティスに沿ってSEO用にReacteコマースWebサイトを設定することが重要です。
Reactに関する一般的なSEOの問題
ReactのeコマースWebサイトにはいくつかの一般的なSEOの問題があります。
コンテンツが検出されない/インデックス作成が遅い
Googlebotは、クロールする各Webサイトに「レンダリング予算」を割り当て、通常、その予算が消費されると終了します。 これにより、小さなWebサイトがクローラーの注意を引き付け、ナビゲーション中に動的URLを生成するWebサイトなどで無限のクロールループを防ぐことができます。
React WebサイトはSPAとして機能するため、すべてのコンテンツをクロールする前に、サイト全体をレンダリングする必要があります。 これにより、コンテンツの検出が遅れ、クローラー側で余分なリソースが消費される可能性があり、クロールおよびインデックス作成されるページが少なくなる可能性があります。
サーバー側のレンダリングと事前レンダリングは、ロボットのリソース負荷の一部を取り除くことができ、新しいページがインデックスに表示される速度を向上させるのに役立ちます。
検索ロボットが更新されたコンテンツに気付くのが遅い
これは上記の問題の派生物です。ページを変更すると、それらの変更が検索結果に反映されるまでに時間がかかる場合があります。
繰り返しになりますが、これはReactを使用したときにページがどのようにレンダリングされるかによるものであり、更新されたページがGoogleの有限のクローラーリソースによって長期間見過ごされる可能性があります。
「深い」ページはめったに（またはまったく）クロールされませんでした
サイトの階層の奥深くに埋め込まれているページは、Googlebotが到達する可能性が低くなります。特に、階層の上位で既にかなりのレンダリング予算を費やしている場合はそうです。
繰り返しになりますが、事前レンダリングは、検索クローラーが割り当て可能なクロール予算を使い果たす前に、Webサイトのフォルダー構造に深く浸透するのに役立つ貴重なツールになります。
[電子ブック]クロール可能性
電子ブックを読むReactのeコマースサイトを最適化する方法
React eコマースSEOのいくつかのベストプラクティスを使用すると、サイトと個々のページに、検索インデックスに登録する可能性を高めることができます。
一意のページのURL
上記の動的URLの問題に対応するベストプラクティスは、すべてのページにWebサイト上の独自の静的URLを与えることです。 次に、コンテンツは単一の永続的な場所（ページの正規URL）に関連付けられ、検索エンジンは結果ページで自信を持ってクロール、インデックス作成、ランク付けを行うことができます。
React Routerは、ReactWebサイトでこれを実現する方法です。 React Routerは、サイト上のすべてのページに独自の永続的なURLを与えることができ、UIを特定のURLに合わせることができます。
同形反応
Isomorphic Reactは、サーバー側のレンダリングを有効にして、クローラーのレンダリングバジェットへのプレッシャーを軽減する方法です。 これは、クライアント側でJavaScriptが無効になっていることを検出し、サーバー側でレンダリングされたWebサイトのHTML形式を作成することで機能します。 クライアント側のレンダリングが利用可能な場合、Webサイトは通常の方法でReactSPAとしてロードされます。
これを行うことで、Isomorphic Reactは検索クローラーの可視性の問題を克服し、クライアント側のJavaScriptをオンにした人間の訪問者のスムーズでシームレスなReactエクスペリエンスを損なうことなく、ページの発見可能性を向上させます。
プレレンダリング
事前レンダリングは、IsomorphicReactと同様の結果を達成するためのもう1つの方法です。 これは、レンダリングされたHTMLのキャッシュバージョンを生成することで機能し、クローラーはレンダリングされていないソースコードの代わりにアクセスできます。
人間の訪問者はクライアント側のReactWebサイトを受け取り、スムーズで超高速のSPAのすべての利点を提供します。 Google Puppeteer、Prerender.io、SEO4Ajaxなど、選択できる多くの事前レンダリングサービスがあります。
メタデータの最適化
最後に、コンテンツに最適化されたメタデータがあることを確認します。これは、これらすべての年月を経ても、ページ上のSEOの重要な要素です。
一意の最適化されたURLに加えて、各ページには一意のタイトルタグとその他の関連するメタタグが必要です。これにより、ページを目立たせ、検索ロボットに標識を付けて、ページを特定のトピックまたはプライマリキーワードに関連付けることができます。
React Helmetは、React eコマースWebサイトのメタデータSEOを編集するための直接アクセスを提供することにより、これを実現するための優れた方法です。 このようにして、昔ながらのSEOのベストプラクティスと従来のメタデータキーワードを、最新のモバイル対応のReacteコマースWebサイトのすべての利点と組み合わせることができます。