SEO対策から考えるJavaScriptの注意点

Webサイト制作やWebサービス開発で欠かせないJavaScript。JavaScriptを使うことでデザインに動きが加わり、より使いやすいUIにしたり、ユーザーの印象に残る工夫を施したりすることができます。
JavaScriptはサイトにとってメリットばかりではありません。ウェブサイトのマーケティングでSEO対策が重視されている場合、SEO的観点からJavaScriptの使い方を少し頭に入れておくべき事があります。

JavaScriptはSEO上不利なのか？

JavaScriptとSEO。すごく簡単に言うと、「普通に使っている分には、大して関係無い」という事になります。

Googleは大概のJavaScriptコンテンツをインデックスする

そもそもSEOの観点から考えた時、JavaScriptの問題というのは、「GoogleのクローラーがJavaScriptを実行して読み込んでくれるか？」ということです。近年の検索エンジンはJavaScriptで生成されたコンテンツをほぼ正確にレンダリングし、インデックスしてくれるということが分かってきています。Ajaxによって、ページ内から他URLのコンテンツを読み込んでいる場合にも、その結果をGoogleの検索ロボットは検知してくれるようです。

なのでJavaScriptでコンテンツを出力している場合でも、基本的にはウェブブラウザで見えているページの状態そのままが、検索エンジンのインデックスに加えられていると考えて良いでしょう。また、コンテンツがJavaScriptで出力されているということによってページの評価が下がるということもありません。

正しくレンダリングされているかは要確認

ただし、注意すべき点は依然としてあります。
たとえばJavaScriptの読み込みに時間がかかりすぎる場合には、Googlebotが正しいレンダリングを行ってくれないことがあります。不安な場合にはGoogleサーチコンソールの「URL検査」で「クロール済みのページを表示」をクリックしレンダリング結果を確認してみましょう。

GoogleのSEO対策に支障のでないJavaScriptフレームワーク

2019年時点でGoogleは、ポピュラーなJavaScriptフレームワーク「Angular」「React」についてSEOに支障がでるように作られていないと発言しています。しかし、SEO的にはそれぞれフレームワーク毎に注意が必要のようです。

AngularJSの現状

Googleの開発者が開発したJavaScriptフレームワーク「AngularJS（アンギュラージェイエス）」。
AngularJSはGoogleが開発するオープンソースのフレームワークです。クライアントサイドでのMVCモデルが採用されており、リアルタイムのデータのやり取りに適していることから、Webアプリケーションでの活用が広がりつつありましたが、2021年12月をもってサポートが終了されています。
なお、AngularJSはAngular.jsに名称を変え、アップデートをし「Angular」として別プロダクトに分かれ、今でもメンテナンスやバージョンアップが続いています。

SEOをするためにはサーバーサイドレンダリングが必要

スムーズでモダンなUIを実現できるAngularなのですが、SEOの観点から考えると注意が必要です。

現状では、Angularでレンダリングされるコンテンツは、そのままでは検索エンジンにインデックスされない事が多いようです。Angularは、サーバーからダウンロードされたJavaScriptをブラウザで実行する仕組みです。このブラウザ側で動作する仕組みをSPAといいますが、GoogleのクローラーはJavaScriptについては問題なく取得できるのですが、一部のJavaScriptを実行できないクローラーも存在する為、注意が必要です。

これからWebサービスやWebサイトを立ち上げる、または改修する予定があり、SEOも考慮入ってくるのであれば、フロントエンドで用いる開発言語は慎重に選ぶことをおすすめします。