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イベントで外部からデータを読み込むような実装は、まったくしないか、またはちょっとしたコンテキストヘルプの表示のように重要でないものに限ってするようにしましょう。