先生と生徒の会話形式で理解しよう

生徒

「先生、Reactって人気があるのに、SEOに弱いって聞いたんですけど本当ですか？」

先生

「その通りで、Reactはシングルページアプリケーション（SPA）を作るときに使われますが、その仕組みがSEOと少し相性が悪いところがあるんです。」

生徒

「シングルページアプリケーション？SEOとどう関係があるんですか？」

先生

「じゃあ今日は、ReactとSEOの関係について、初心者でもわかるように例えを使って解説していきましょう！」

1. ReactとSEOの基本的な関係とは？

まず「SEO」とは「検索エンジン最適化」のことです。GoogleやYahooなどの検索エンジンに自分の作ったWebサイトを見つけてもらいやすくするための工夫を指します。例えば、ブログ記事や企業のホームページが検索結果の上位に表示されると、多くの人がアクセスしてくれるようになります。

一方でReactは、シングルページアプリケーション（SPA）を作るのに便利なJavaScriptライブラリです。SPAとは「1つのページの中で画面の内容を切り替える仕組み」のこと。ページ全体を再読み込みしないで表示を変えるので、操作が速くスムーズになります。

ただし、この仕組みには落とし穴があります。検索エンジンはWebページの内容を「読み取る」必要がありますが、SPAの場合、最初に表示されるページは中身が空っぽに近く、JavaScriptを実行して初めて内容が表示されることが多いのです。すると検索エンジンが正しく情報を読み取れず、SEOに不利になる可能性が出てきます。

2. SPAとSEOがぶつかる理由を例えで理解しよう

ここで分かりやすい例えをしましょう。検索エンジンを「本の目次を読む人」だと考えてください。普通のWebサイトは、本のページに文字がしっかり書かれているので、検索エンジンは内容を理解して「このページにはこういうことが書かれている」と判断できます。

しかしReactで作ったSPAは、最初に渡される本のページが真っ白で、ページをめくってからインクで文字が浮かび上がるような仕組みです。検索エンジンは「この本には何も書いてない」と勘違いしてしまう可能性があります。これが「ReactはSEOに弱い」と言われる理由です。

3. ReactでもSEO対策はできる？

「じゃあReactを使うとSEOに不利だから使わない方がいいの？」と思うかもしれません。でも安心してください。きちんと工夫をすれば、ReactアプリでもSEOを強化できます。

よく使われる方法は次の3つです。

サーバーサイドレンダリング（SSR）：サーバーでページをあらかじめHTMLに変換してからユーザーに届ける方法。Next.jsなどのフレームワークが有名です。
プリレンダリング：事前に静的なHTMLを生成しておき、検索エンジンにはそれを渡す方法。小規模なサイトでも導入しやすいです。
メタタグの設定：ページのタイトルや説明を正しく設定しておくことも大切です。React Helmetというライブラリを使うと便利です。

4. ReactでSEOを意識した開発をするポイント

ReactでSEOを意識するなら、以下の点も忘れないようにしましょう。

URL設計：検索エンジンはURLを見てページ内容を推測します。「/about」や「/products」のように意味のあるURLにしましょう。
サイトマップ：サイト全体の構造を検索エンジンに伝えるために「sitemap.xml」を用意すると有利です。
ページ速度：表示速度が遅いと検索順位に影響します。画像の圧縮やキャッシュを意識すると良いです。

つまり「ReactはSEOに弱い」というのは「そのままでは弱い」という意味で、工夫次第で十分に検索に強いサイトを作ることができます。

5. ReactとSEOのこれから

最近ではGoogleの検索エンジンもJavaScriptの読み取り能力が進化してきており、昔よりはSPAでも内容を理解できるようになっています。しかし、それでも完全に安心できるわけではありません。特に新しいサービスを作る場合や競合が多いジャンルでは、やはりSSRやプリレンダリングを使うのが一般的です。

Reactを使いながらSEOを意識することは、Web開発を学ぶ上でとても大切なポイントです。「見た目がカッコいいアプリ」を作るだけでなく「検索してもらえる仕組み」を考えることが、より多くの人にアプリやサイトを届ける第一歩になるでしょう。