ReactなどのJavaScriptでコンテンツを表示するサイトで、気をつけることは？
リンクは必ずa要素とhref属性を使う
もう一つの注意点はリンクです。ReactなどのJavaScriptライブラリを使ったウェブサイト制作では、div要素やbutton要素を使ってリンクのように動作させることが多いと思います。これはできるだけ避け、a要素とhref属性を使った通常のリンクを使用するようにしてください。先述したようにGooglebotはクリックなどのJavaScriptイベントを起こさないからです。 もちろん、リンク先のコンテンツにパーマリンクを用意することも必要です。コンテンツごとに固有のパーマリンクがあれば、Google検索はきちんと検索結果にReactで生成したページを表示することができます。
まとめ
Reactをうまく使えば、読み込み速度を圧倒的に高速化することができ、快適なブラウジングやインタラクションを実現します。これはユーザーエクスペリエンスを高め、SEOにも寄与するものと思います。レンダリングは、ごく普通のサーバーサイドレンダリングのサイトと同様に考えてかまいません。 ただし「GooglebotはJavaScriptイベントを起こさない」ことに注意が必要です。スワイプ、スクロール、タップ/クリック、マウスオーバーなどのイベントでコンテンツを読み込む仕様には注意しましょう。インデックスしてほしいコンテンツは、初めから読み込まれるようにしておくとよいでしょう。 P.S. 本コーナーでは、読者の質問にお答えしています。誰にも聞けずに困っていること、現場で感じるふとした疑問など、どしどし質問をお寄せください。
