JavaScript SEOとは？JavaScriptのSEO対策ポイントを解説
JavaScriptは、Webサイトに動的な動きを与える手段として欠かせないプログラミング言語ですが、SEO対策をしっかりと行わなければクロールやインデックスに影響を及ぼすこともあります。
そこで本記事では、JavaScriptがSEOに与える影響やJavaScriptを使用したSEO対策のポイントについて解説していきます。
JavaScript SEOとは
JavaScriptとは、Webサイトを表示するブラウ上で動かすためのプログラミング言語の1つです。JavaScriptは、画像を拡大表示して見やすくしたり入力フォームを設置してメッセージを送付するなどの「動き」に関する指示を出します。
HTMLやCSSと並ぶ世界的に人気な言語ですが、SEOを意識していないとクロールやインデックスに影響を及ぼすこともあります。そこで注目されているのが、JavaScript SEOです。
JavaScript SEOとは、検索エンジンの可視性のためにJavaScriptで構築されたWebサイトの最適化を行うSEO技術を指します。
JavaScriptは、SEOにとって重要なページ上の要素とランキング要素に影響を与える可能性があるため、JavaScript内でもSEO対策を行うべきであるという考え方が注目されています。
JavaScriptがSEOに与える影響
前述したように、JavaScriptは、SEOにとって重要なページ上の要素とランキング要素に影響を与える可能性があります。
JavaScriptを使用することで、コードが冗長化しGoogleのクローラーが途中でクロールを停止してしまう可能性があることや、GooglebotがJavaScriptをうまく読み込めないケースなどがあり、SEOにさまざまな影響を与えることもあります。
クロールを停止してしまうと、Webサイトが検索結果に表示されなくなってしまいます。また、GooglebotがJavaScriptをうまく読み込めないとページの読み込みや画像の表示速度など影響し、SEO上のマイナス要素となってしまいます。
GooglebotがJavaScriptを処理するプロセス
JavaScriptを使用してSEO対策を行う際には、まずはGooglebotがどのようにJavaScriptを処理するのかを理解する必要があります。ここでは、GooglebotがJavaScriptを処理するプロセスについて解説していきます。
クロール
まずは、検索エンジンのクローラーである「Googlebot」がWebページを巡回します。Googlebotが巡回することを「クロール」と言い、クロールすることでWebページの内容を把握します。
Googlebotは最初に、クロールを許可しているかどうかの確認を行います。その際にrobots.txtファイルやrobots metaタグの読み取りを行います。
関連記事: クロールバジェットの重要性から最適化する4つの対策方法を解説！
レンダリング
次にレンダリングを行います。レンダリングとは、数値データ元に一定の処理や演算を行って画像や映像、音声などをブラウザ上に表示させることです。
クローラーがレンダリングされたHTMLリンクを解析し、レンダリングが完了して初めてインデックス登録のプロセスに移ります。
レンダリングのプロセスはページの読み込み時間に影響するため、JavaScriptの読み込みに時間がかかりすぎていてGooglebotが正しくレンダリングを行っていない場合は、レンダリング結果を確認する必要があります。
関連記事: レンダリングとは？ Googleクローラとレンダリングの関係を解説
ダイナミックレンダリングとは
JavaScriptの処理は難しく、すべての検索エンジンのクローラが JavaScript を正常に即時処理できるわけではありません。そのため、レンダリング処理に時間がかかってしまっている場合は、ダイナミックレンダリングがおすすめです。
ダイナミックレンダリングとは、レンダリングを省いてくれる手段で、ユーザーが検知するJavaScript使用のファイルと、Googlebot検知用にJavaScriptを使用していないHTMLファイルを作るというものです。
コンテンツを頻繁に投稿しているようなサイトなどは、ダイナミックレンダリングを実装し検索結果への反映時間を改善することができます。
インデックス登録
最後に、GooglebotはWenページのインデックス登録を行います。インデックス登録とは、ページを検索エンジンのデータベースに登録することです。Googlebotは、URLを分析しコンテンツとの関連性を理解します。そして、インデックス登録を行う際にページの評価を行い、ランキングを行います。
これらのプロセスを経て初めて検索結果に表示されるため、SEO対策を行うにはまず、Googlebotにクロールしてもらいレンダリングされる必要があります。
関連記事: 【上級SEO対策】クロールとインデックス登録の制御
JavaScriptを使用したSEO対策の9つのポイント
JavaScriptを使用する際には、Googlebotに正しくクロールしてもらえるように対策しておく事が重要です。ここでは、JavaScriptを使用したSEO対策のポイントに9つのポイントについて解説していきます。
独自性のあるtitleとmeta descriptionの設定
ページtitleやmeta descriptionは、ユーザーが最初に目にする部分でもあるため、ユーザーが目的とする結果を見つけやすいように独自性のあるものを設定することが重要です。
また、Webサイトのスニペットのコンテンツを提案する、構造化データやmetaタグの活用も欠かせません。構造化データやmetaタグを使用することで、Gooleがコンテンツの内容を認識しやすくなります。
ただし、SEO対策を意識しすぎて対策キーワードを詰め込みすぎたり、情報量が多く複雑なものになるとユーザーからもGoogleからも評価されにくくなるので注意が必要です。
互換性のあるコードを使用
JavaScriptのコードを記述する際に気をつけたいのが、ブラウザとの互換性です。ブラウザからは多くのAPIが提供されているため、それらのAPIに対応できる必要があります。また、GoogleやBingなどの検索エンジンのクローラの制限にも注意が必要です。
そのため、JavaScriptを使ったページの特定のコンテンツがコードによってブロックされている可能性も考慮し、Webページのインデックス登録や表示を妨げる可能性があるJavaScriptの問題を特定し、解決するよう努めることも必要です。
適切なHTTPステータスコードを使用
Googlebot は、ページをクロールする際に問題が発生したかどうかを確認するために、HTTPステータスコードを使用します。JavaScriptを使用したWebサイトも、適切な HTTP ステータスコードを返すことが重要です。
そのため、301や404などの各ステータスコードの意味を理解しておく必要があります。また、HTTPステータスコードは、Webページが新しいURLに移動したことをクローラーに伝達することもできるため、新しいWebページのインデックス登録を行いたい場合などにHTTPステータスコードを使用します。
robots metaタグを再確認
robots metaタグとは、Googlebotによるページのインデックス登録やリンクの参照を回避など、クローラの動作を制御せることのできるmetaタグです。たとえば、ページの上部にrobots metaタグを追加することで、Googlebotによるページのインデックス登録をブロックすることができます。
そのため、まずはrobot.txtファイルとrobots metaタグをチェックし、誤ってクローラーをブロックしていないかを確認することが重要です。
画像の遅延読み込みをテスト
画像の遅延読み込みとは、Webサイトの表示される画像を一度に読み込まず、必要に応じて必要な分だけ読み込むというものす。画像があると、パフォーマンスに不可がかかることがあるため、画像の遅延読み込みが推奨されています。
しかし、遅延読み込みは正しく設定を行わなければ、検索エンジンから隠されてしまう可能性があります。そのため、コンテンツの読み込みをサポートしてくれるJavaScriptライブラリの使用がおすすめです。
また、History APIでURLを更新しシステムによるコンテンツの動的な読み込みをサポートすることも有効です。
フラグメントの代わりにHistory API を使用
Googlebotがページ内のリンクを探すときは、HTMLリンク内のhref属性内のURLだけが対象となります。フラグメントを使用して別のコンテンツを読み込むと、Googlebotはリンクを見つけづらくなります。
そのため、代わりにHistory APIの活用がおすすめです。 History APIは、履歴上で前に閲覧したページに戻ったり、戻った後に再度元のページに戻るといった操作が可能です。 History APIを実装することで、GooglebotがリンクURLに確実にアクセスできるようになります。
長期保存キャッシュを使用
Googlebotは、ネットワークリクエストとリソース使用量を減らすために、積極的にキャッシュに保存しますが、WRS（Web Rendering Servie）が古いJavaScriptやCSSリソースを使用することもあり、キャッシュヘッダーを無視することがあります。
ファイル名の一部をコンテンツのフィンガープリント（ユーザーを特定する情報群）にすることで、キャッシュヘッダーを無視することなくキャッシュを保存することができます。
Webコンポーネントをサーチエンジンフレンドリーにする
コンテンツをLight DOMに入れることで、Webコンポーネントをサーチエンジンフレンドリーにすることができます。Webコンポーネントとは、WebページやWebアプリケーションの中で新たに、HTMLの要素をカプセル化して再利用可能なパーツにするためのブラウザのAPI群です。
HTMLやCSS、JavaScriptは世界的に使われている言語ですが、脆弱性が少なからずあります。コンテンツをLight DOMに入れれば、そのようなWebアプリケーション構築の脆弱性を排除してくれます。
モバイルフレンドリーをテスト
モバイルフレンドリーとは、スマートフォンでの閲覧に適していないページの順位を引き下げるという、Googleが2015年に実装したアルゴリズムです。スマートフォンユーザーの増加から、スマートフォンでのページの見やすさや操作のしやすさが重要となってきています。
Webサイトをモバイルフレンドリーにすることで、より検索エンジンから評価されやすいサイトになります。そのため、Googleが公開している「モバイルフレンドリーテスト」を活用して、リリース前にしっかりテストをしておくことも重要です。
Ajaxの使用でユーザー体験を向上
Webサイト制作に欠かせないJavaScriptですが、現在はAjaxという技術も注目されています。Ajaxとは、JavaScriptを使用してサーバと非同期通信することを指します。
XML、HTML、CSS、JavaScriptを使用して、より速いWebアプリケーションを作成するために使用される一連のWeb開発技術で、既存のページの表示を中断することなく、サーバーからデータを送受信することができます。
そのため、Ajaxを適用することでWebアプリケーションのパフォーマンスとユーザビリティを向上させることができるのです。クロールが正しく行われず、SEOの観点からJavaScriptの使用に問題があるとされていましたが、Ajaxによってページ内から他URLのコンテンツを読み込んでいる場合にも、その結果をGooglebotは正しく検知してくれるようになりました。
まとめ
JavaScriptを使用したコンテンツは、SEOに不利になるとも言われていましたがしっかりとSEO対策をしておけば正しくGoogleに評価されるようになります。そのためには、どのようにGooglebotがJavaScriptを処理し、どのような場合にSEOに影響を与えるのかということを理解しておくことが重要です。今回ご紹介したSEO対策のポイントを抑えて、JavaScriptを使いなしていきましょう。
この記事の監修者
新潟大学大学院を卒業後、事業会社で10年働く間にSEOに出会う。自身でサイトを多数立ち上げ、実験と検証を繰り返しながらSEOを研究。お金に変えることを目的とはせず、ユーザーに何が有益かを問い続け改良を繰り返すうち、「インターネット上の真実ではない情報を正してユーザーのためになる情報を発信する」という天啓を得る。現在は東京SEOメーカーの上級SEOアドバイザーとしてアサイン。
