クローラーが理解できるJavaScriptの使い方
検索エンジンがWebサイトを検索結果に表示するために、Webサイトのページを解析しデータベースへ登録します。これをインデックスと呼びます。
インデックスするには、クローラーと呼ばれるロボットがWebページを解析し情報を収集するプロセスが必要です。
このプロセスでは、Webページの解析のためにHTMLだけでなくCSSやJavaScriptを読み込み処理します。
実はこれらの処理では、クローラーが認識できないコンテンツが存在するケースがあります。
今回は、少し技術的な側面からクローラーやSEOについて理解を深めたいと思います。
- クローラーが認識できるJavascriptの実装が分かる
- SEOに対応したサイト制作が分かる
最近のWebサイトは、Vue.jsやReact.jsなどのフレームワークを使って実装されることが増えています。
ノーコードツールも普及してきており、リッチな描写が簡単に低工数で作れるようになってきています。
かっこいいUIやアニメーションなどで、ユーザーの目を惹き付けるようなサイトもあります。
これらのほとんどのケースでJavaScriptが利用されており、実装方法によってクローラーの認識に影響があります。
サイトのコンテンツを本来意図している状態でクローラーが認識できなければ、検索結果に表示される機会を逃してしまう可能性があります。
DOMで要素を追加した場合のクローラーの反応
Document Object Modelと呼ばれるツリー構造でHTMLは描写されており、これをDOMと呼びます。
JavaScriptは、このDOMを操作することができます。
Webサイトは、メニューを表示したり、スクロール時にバナーやボタンを表示したり、ボタンを押したときにコンテンツが現れたり、様々なユーザーのアクションへの反応するように作られています。
これらは、多くの情報を上手くまとめて表示するためであったり、ユーザーが飽きないために利用されます。
このような工夫を実現するために、DOMを利用して「画面を開いた時点では存在していないデータ」をあとから追加するような実装をすることがあります。
実は、このようにユーザーのアクションに対して生成されるデータをクローラーは認識できません。
同じDOMによる要素の追加でも、ブラウザのライフサイクルと呼ばれる描写までの工程中に処理されるものであれば、問題なく認識されるでしょう。
あるいは要素自体は存在していてCSSによって非表示になっている状態であれば、問題ありません。
ですが、存在していないデータを追加している場合に問題が発生します。
例えば、ハンバーガーボタンを押したときのメニューや、アコーディオン、モーダルビューなどのUIがあるサイトは注意が必要です。
これらは、1ページが長くなりすぎる場合や、見た目をすっきりさせるために利用されますが、それぞれのUIで表示されるコンテンツは、基本的に非表示であったか動的にJavaScriptで生成されるかのどちらかになります。
他にも、重要ではなかったり非表示のコンテンツの読み込みを後回しにする遅延読み込みという実装があります。描写速度の改善などに有効なのですが、実装方法を間違えるとクローラーが認識できない可能性があります。
無限スクロールのようなUIでは特に注意が必要です。
リンクも注意が必要
リンクの取り扱いにも注意が必要です。
<a href=”….”></a>というような記述で、指定のURLへリンクするために利用されますが、クローラーでは基本的にhrefという属性が記載されているもののみが、認識の対象となります。
このa要素は、クローラーがページの関連性などに利用する要素なのですが、hrefを利用せずonclickイベントなどで、JavaScriptによってクリック時の動作を制御する実装の場合はクローラーが認識できない可能性があります。
Googleのリンクに関するベストプラクティスでは、それらについて詳しく書かれています。
DOMを利用して、リンクを追加する場合にもhref属性が必要です。
対応するには
自社のサイトが、上記の状態にあるかどうかを見極めるには、どうすれば良いでしょうか。
検索結果に表示されないような場合は、Googleの「Goolge検索セントラル」では、問題を発見するために、Google Search Consoleの利用が推奨されています。
サイトの制作者に確認してもらうのも良い方法でしょう。
そして問題があれば、修正しましょう。
ただし、問題の修正には、工数が必要な場合や同じ機能の実装が難しい場合があります。
これらは、通常の修正と同様にコストとリターンを考え判断する必要があるでしょう。
この問題への最善策は、Webサイト制作時にこれらの問題を回避するように事前に依頼しておくことが考えられます。
制作チームは、それらの依頼を受けCMSの設計、デザインやコーディング、それぞれの段階でケアしてくれるでしょう。
いずれにせよ、データを動的に生成する必要があるかどうかやデータをリアルタイムで取得する必要があるのかなどを見極めることで、十分に対応可能な問題となるでしょう。
JavaScriptとGoogleのクローラーの認識との関係は、下記の記事が参考になります。
使い勝手が良いとSEOにはプラス
これらの実装は、クローラーの認識的な視点からデメリットがあるように見えますが、実際には良い影響もあります。その理由の一つには、操作性や情報の見やすさが高まっていることが挙げられます。
その結果、ユーザーの回遊率や滞在時間、コンバージョン率の向上などが見込まれるはずです。
ですので、可能な部分は動的なデータ生成を避け、クローラーに配慮しつつサイトの実用性を高めるようなバランスの取り方が良いでしょう。
