私たちは皆Reactが大好きです。それはそのパフォーマンスとシンプルさのために素晴らしいです。ただし、ReactはSEOに対応していないとよく言われます。

これは本当に本当ですか？

今日は、このトピックを深く掘り下げて、問題に取り組み、ReactアプリケーションのSEOパフォーマンスを向上させる方法を見ていきます。

SEOとは何ですか？

SEOは検索エンジン最適化を意味します。それは基本的にグーグルのような検索エンジンのためにあなたのウェブサイトに索引を付けます。

ウェブサイトのランクが高いほど、検索結果ページに表示されます。

なぜあなたは気にする必要がありますか？

Staskshareによると、Googleは検索エンジン市場の約92.4％のシェアを持っています。Backlinkoによると、上位3つの 結果はユーザーからのクリックの75％を獲得しています。

したがって、何かを構築していて、ユーザーにGoogle検索でアプリケーションを見つけてもらいたい場合は、SEOに注意する必要があります。

OK、しかしそれはどのように機能しますか？

ウェブページのインデックスを作成するために、Googleはウェブクローラーを使用します。これらは、定期的にWebページにアクセスして、特定の基準に基づいてページのコンテンツを分析するボットです。

通常、ボットはHTMLファイルとCSSファイルをダウンロードし、分析を実行して、結果を送り返します。

ただし、シングルページアプリケーションの場合、プロセスは少し異なります。何かをレンダリングするには、実際のUIを構築する前に、ブラウザーのJavaScriptを最初に実行する必要があります。

Reactの問題

Reactは、その速度とコンポーネントベースのアーキテクチャで優れていますが、SEOに関していくつかの欠点があります。それらについて話し合いましょう。

問題1：すべてのページに単一のURL

Reactアプリケーションは単一のHTMLファイルで構築されています。条件付きレンダリングの概念を使用して、JavaScriptコード内に何を表示するかを決定できます。技術的には、動的URLは必要ありません。

しかし、Google SEOスターターガイドによると、URLに関連情報があるとSEOに非常に役立ちます。

これがSPAの最大の問題です。これは、Webサイトのページが1つしかない場合は問題になりませんが、複数ページのアプリケーションの場合、URLが変更されていないと、クローラーがすべてのページにインデックスを付けることができなくなります。

問題2：単一のメタタグ

メタタグは、ページのコンテンツをボットに説明するのに役立ちます。Google SEOスターターガイドによると：

「ページの説明メタタグは、Googleや他の検索エンジンにページの内容の概要を提供します。」

残念ながら、Reactは、メタタグを配置する場所を1つだけ提供する単一ページのアプリケーションを生成しindex.htmlます。これは、パブリックフォルダーの下のファイルです。

問題3：すべてがJavaScriptです

前に説明したように、通常のWebサイトのクロールプロセスはSPAの場合とは少し異なります。

クローラーがWebサイトにアクセスすると、コンテンツはそこにありません。したがって、クローラーはJavaScriptがクライアント側にロードされるのを待つ必要があります。

Webサイトが重く、最初のレンダリングに時間がかかる場合、クローラーはそれが空のページであると見なし、インデックスを作成せずに終了します。これはあなたのウェブサイトに恐ろしいSEOランキングを引き起こします。

それで、Reactを使用しないように言っていますか？

まあ、答えはイエスとノーです。Reactは高速パフォーマンスのために構築されました。SEOの問題を解決するために構築されたものではありません。

SEOに本当に関心がある場合は、同形アプリケーションの構築を検討する必要があります。

Next.jsとGatsby は、この目的のために検討すべき2つの優れたオプションです。

しかし、私は他のものを使いたくない

その場合、私はあなたにいくつかの良いニュースがあります。

同形アプリケーションを構築しなくても、ReactアプリケーションのSEOパフォーマンスを向上させることは可能です。

そして今日はその方法をお見せします。

ステップ1：単一URLの問題を解決する

react-routerURLに基​​づいてコンテンツをレンダリングするのに役立つという名前の素晴らしいライブラリがあります。

基本的に、コード内でいくつかのルートを宣言し、条件付きレンダリングではなくルート変更に基づいてコンテンツをレンダリングします。

したがって、これで最初の問題が解決します。

ステップ2：メタタグの問題を解決する

次に、という名前の別の優れたライブラリを使用しますreact-helmet。

ReactヘルメットはHelmet、プレーンなHTMLメタタグを取得してReactページのheadタグ内に追加するコンポーネントを提供します。

ステップ3：JavaScriptの問題を解決する

このために、Prerender.ioという名前のサービスを使用できます。

このサービスはウェブページをキャッシュするため、Googlebotがインデックスに登録されたときに、ページが既にキャッシュされているため、ページがレンダリングされるのを待つ必要はありません。したがって、Googlebotがページのインデックスを作成しやすくなります。

ただし、このサービスは無料ですが、一定の限度額を超えて支払う必要があることを忘れないでください。

結論

そこにあります。私はSEOの専門家でも何でもないので、何か問題があればコメントで知らせてください。

私が書いたのと同じくらいこの記事を読んで楽しんでいただけたと思います。

すてきな一日を！

リソース

• Backlinko： https://backlinko.com/google-ctr-stats
• Google SEOガイド： https://developers.google.com/search/docs/beginner/get-started?hl=en