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

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

JavaScriptはSEO上不利なのか？

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

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

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

※参考 : SEO用語集「検索ロボット」

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

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

ただし、注意すべき点は依然としてあります。
たとえばJavaScriptの読み込みに時間がかかりすぎる場合には、Googlebotが正しいレンダリングを行ってくれないことがあります。不安な場合にはFetch as Googleでレンダリング結果を確認してみましょう。

AngularJSの現状

新しいフロントエンド開発のJSフレームワークとして、AngularJSが注目されています。
AngularJSはGoogleが開発するオープンソースのフレームワークです。クライアントサイドでのMVCモデルが採用されており、リアルタイムのデータのやり取りに適していることから、Webアプリケーションでの活用が広がりつつあります。

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

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

現状では、AngularJSでレンダリングされるコンテンツは、そのままでは検索エンジンにインデックスされない事が多いようです。どうしてもAngularJSとSEOを両立したい場合には、ブラウザでhtmlを出力するのではなく、サーバーレンダリング = サーバー側でのJavaScriptの実行が必要です。サーバーレンダリングの為にはPhantomJSなどが用いられているようですが、その実装コストは決して小さいものではありません。

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