ReactなどのJavaScriptでコンテンツを表示するサイトで、気をつけることは？

ひとりで頑張るSEO担当者さんの悩みに答える本連載。今回の質問は「React（リアクト）などのJavaScriptでコンテンツを表示するサイトで、気をつけることは？」です。この回答は「ページロード後のコンテンツ挿入とリンクに気をつけましょう」です。

JavaScriptでコンテンツを表示するサイトの特徴

今回の相談内容は「ReactなどのJavaScriptでコンテンツを表示するサイトで、気をつけることは？」というものです。ペンネーム「dictav」さんが寄せてくださいました。ありがとうございます。Reactは、インタラクティブなユーザーインターフェイスを開発するためのJavaScriptライブラリです。

JavaScriptのなかに、ユーザーインターフェイスを構成する部品をHTMLで書いたものを、Reactではコンポーネントと呼び、このコンポーネントを使い回すことでサイトを構築していきます。Reactで作られたサイトは、サーバーからブラウザやGooglebotに渡されるデータのほとんどがJavaScriptであることが特徴です。

GooglebotはJavaScriptイベントを起こさない

さて、ReactなどのJavaScriptライブラリを使う場合にSEOで注意したいことは、「GooglebotはJavaScriptイベントを起こさない」ことです。クリックやマウスオーバーといったJavaScriptイベントをきっかけに、ページ内の要素を外部から読み込ませるような場合、その外部から読み込まれる要素は検索の対象にはなりません。

GooglebotはJavaScriptで渡されたデータをレンダリングできますし、リンクもたどれますし、他にインターフェイスがない場合などではフォームの送信をすることもあります。でもJavaScriptイベントは起こしません。スクロールやクリックやマウスオーバーはしないわけです。

このためサイトの制作では、ページロード後のJavaScriptイベントで外部からデータを読み込むような実装は、まったくしないか、またはちょっとしたコンテキストヘルプの表示のように重要でないものに限ってするようにしましょう。

リンクは必ずa要素とhref属性を使う

もう一つの注意点はリンクです。ReactなどのJavaScriptライブラリを使ったウェブサイト制作では、div要素やbutton要素を使ってリンクのように動作させることが多いと思います。これはできるだけ避け、a要素とhref属性を使った通常のリンクを使用するようにしてください。先述したようにGooglebotはクリックなどのJavaScriptイベントを起こさないからです。

もちろん、リンク先のコンテンツにパーマリンクを用意することも必要です。コンテンツごとに固有のパーマリンクがあれば、Google検索はきちんと検索結果にReactで生成したページを表示することができます。

まとめ

Reactをうまく使えば、読み込み速度を圧倒的に高速化することができ、快適なブラウジングやインタラクションを実現します。これはユーザーエクスペリエンスを高め、SEOにも寄与するものと思います。レンダリングは、ごく普通のサーバーサイドレンダリングのサイトと同様に考えてかまいません。

ただし「GooglebotはJavaScriptイベントを起こさない」ことに注意が必要です。スワイプ、スクロール、タップ/クリック、マウスオーバーなどのイベントでコンテンツを読み込む仕様には注意しましょう。インデックスしてほしいコンテンツは、初めから読み込まれるようにしておくとよいでしょう。

P.S.
本コーナーでは、読者の質問にお答えしています。誰にも聞けずに困っていること、現場で感じるふとした疑問など、どしどし質問をお寄せください。