ひとりSEO担当者の疑問に答えます

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

SEO担当者の質問に、SEOのエキスパートである住 太陽さんが実践的で有効な解決法を答えます。今回の質問は「ReactなどのJavaScriptでコンテンツを表示するサイトで、気をつけることは?」です。

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

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

◇◇◇

ひとりSEO担当者の疑問や悩みを募集しています。応募したい方は以下からお願いします。

用語集
Googlebot / HTML / JavaScript / SEO / インデックス / クロール / パーマリンク / リンク
この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

オムニチャネル
主に小売業で使われる言葉。実店舗とインターネット通販、PC とモバイルなど、オフ ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]