JavaScript SEOをマスターしよう！気をつけるべき8つのポイント

SEO対策には欠かせない、Googleのインデックス登録。

しかしJavaScriptを使っているWebサイトで、正しいSEO対策が施されていることは意外なほど少ないです。

そこで今回は、WebサイトにJavaScriptを使うときに気をつけたいSEOのポイント8つをお伝えします。

JavaScriptコンテンツのSEO対策に興味がある方は、ぜひ参考にしてみてください！

JavaScriptとは

JavaScriptは、HTMLやCSSと並ぶ世界的に人気な言語です。おもにWebサイトに動きをつけたいときや、複雑なアプリケーションを構築したいときに使われています。jQuery、Ember.js、AngularJSなど、さまざまなライブラリ／フレームワークが存在するのが特徴です。

エンジニアがWebページでJavaScriptを使うには、<script>タグをHTML内に埋め込むか、外部ファイルとして読み込む必要があります。

Webアプリケーションとサーバのシームレスな通信を可能にしてくれるのが、Asynchronous（非同期）のJavaScriptとXMLの組み合わせです。Ajaxと呼ばれるこの技術は、Googleマップにも使われています。ある機能の実行中に、他の機能も実行できることが特徴です。

JavaScriptについて、詳しくは以下の記事をご覧ください。

JavaScriptとSEOの関係性

JavaScriptはパワフルでダイナミックなアプリケーションの制作を可能にしてくれます。しかしいくらJavaScriptで魅力的なWebページを制作しても、SEOが意識できていないと思わぬ落とし穴にかかることがあります。

SEOへの対策が施されずに、JavaScriptが検索エンジンのクローラーを誤って妨げてしまうと、Webサイトが検索結果に表示されなくなってしまう恐れもあります。

検索エンジンのクローラーは

1. クロール
2. レンダリング
3. インデックス登録

という3つのフェーズでJavaScriptのWebアプリを処理します。これらすべてのフェーズについて対策を施し、JavaScriptを使ったWebサイトをクローラーに認知してもらいましょう。

検索エンジンへのインデックス登録のプロセス

代表的な検索エンジンのクローラーとして、Googleの「Googlebot」が挙げられます。クローラーがWebページを巡回することで、検索エンジンにコンテンツがインデックスされます。

GooglebotがWebサイトにアクセスしたときに、まず確認することは以下の2つ。

• robots.txtファイルやrobots metaタグの読み取り
• クロールを許可しているかどうかの確認

そして以下のような流れで、インデックス登録が行われます。

• クローラーがレンダリングされたHTMLのリンクを解析する
• 検出されたURLをキューに入れる
• HTMLがWebページのインデックス登録に使用される

このファイルに「ページのクロールをスキップする」指示が含まれている場合、Googlebotはタスクを中止してしまいます。

HTTPリクエストの作成によってURLを取得するクローラーのアプローチは、サーバ側でレンダリングされたWebページに対して効率的に機能します。

しかしJavaScriptを使ったページの多くはApp Shellモデルを使用しているため、HTMLに実際のコンテンツが含まれていない場合も。この場合、Googlebotはスクリプトによって生成されたコンテンツを見つける前に、JavaScriptを実行する必要があります。

JavaScript SEOのための8ポイント

ここからは検索エンジン用にWebページを最適化する方法について、以下8つのポイントをもとに探っていきましょう。

1. robot.txtとrobots metaを再確認する
2. HTTPステータスコードを使用する
3. コードの互換性を確認する
4. 独自のタイトルやスニペットを使う
5. 画像の遅延読み込みを試してみる
6. ユーザーの許可が必要なコンテンツをインデックス登録する
7. Webコンポーネントをサーチエンジンフレンドリーにする
8. モバイル対応のテストをする

1. robot.txtとrobots metaの再確認

まずはrobot.txtファイルとrobots metaタグをチェックし、誤ってクローラーをブロックしていないかを確認しましょう。

robots.txtは、収集されたくないコンテンツを制御するファイルです。検索エンジンのクローラーに重要なコンテンツのみを伝えるために使用されます。

一方robots metaタグは、検索エンジンのシステムにむけて書くHTML（HTML5）コード全般を指します。その中でもnoindexやnofollowは、Webページのインデックスを制御するタグです。低品質なページや、ユーザーに見せたくないページ、内容が重複しているページなどに使われます。

robot.txtファイルやrobots metaタグによって、意図せずコンテンツを制御している場合があるので、一度確認してみてください。

またGoogle、Yahoo!、Bing、Baidu、Yandexなどの主要な検索エンジンはすべて、index／noindex、follow／nofollowなどのrobots metaタグをサポートしています。必要に応じて、検索エンジンごとに異なる指示を出すことも可能です。

しかし理解できない指示はクローラーに無視されてしまいます。指示はくれぐれも正確に出しましょう。

2. HTTPステータスコードを使用する

クローラーはHTTPステータスコードを使用し、クロール中の問題を判断しています。クロールまたはインデックス登録する必要がないページについては、401などのステータスコードを使用してクローラーに情報を伝達しましょう。

またHTTPステータスコードを使えば、Webページが新しいURLに移動したことをクローラーに伝達することもできます。新しいWebページのインデックスを登録したい場合はHTTPステータスコードを使用してみてください。

HTTPステータスコードの意味は、以下のとおりです。

• 401・403：権限に関する問題のためページが利用できない
• 301・302：ページが移動した
• 404・410：ページが利用できない
• 5xx：サーバに問題がある

3. コードの互換性の確認

JavaScriptのコードを記述するときに気をつけたいのが、ブラウザとの互換性です。ブラウザでも利用できるように、多くのAPIに対応できるように心がけましょう。

またクローラーの制限にも注意が必要です。すくなくとも、GoogleやBingなどの主要な検索エンジンの制限は念頭においてコードを作成しましょう。

さらに、Webページのインデックス登録や表示を妨げる可能性があるJavaScriptの問題を特定し、解決するよう努めることも必要です。JavaScriptを使ったページの特定のコンテンツがコードによってブロックされている可能性も考慮しましょう。

Googlebotがどのようにページを表示しているかを調べたいなら、Search ConsoleのURL検査ツールを使うのがおすすめです。

4. 独自のタイトルやスニペットを使う

以下のポイントをおさえて、識別しやすいタイトルをつけましょう。

• Webサイトのすべてのページに特定のタイトルをつける
• ページのタイトルはわかりやすく、簡潔にする
• 定型文的なタイトルは避ける
• キーワードを詰め込みすぎない
• タイトルでWebサイトに関する付加情報を提供する

またWebサイトのスニペットを工夫することも大切です。スニペットのコンテンツを提案するための手法をして、構造化データやmetaタグが挙げられます。

構造化データを用いれば、検索エンジンがWebサイトのコンテンツを認識しやすくなります。

またスニペットとして表示させたい文章がある場合は、metaタグを使用してGoogleに伝えるようにしましょう。

もしWordpressのサイトに構造化データを追加したい場合は、以下の記事をご覧ください。

5. 画像の遅延読み込みを試してみる

画像にSEO対策を施したい場合は、遅延読み込みを試してみましょう。サーチフレンドリーな方法で、必要に応じて画像を読み込めるようになります。

ただし遅延読み込みは正しく行わないと、コンテンツが検索エンジンから隠されてしまう可能性があります。コンテンツの読み込みをサポートしてくれるJavaScriptライブラリを使用しましょう。

また無限スクロールを使用したいなら、ページ分割ロードをサポートしているメカニズムの実装がおすすめです。ユーザーによるコンテンツのシェアを可能にしてくれます。

History APIでURLを更新し、システムによるコンテンツの動的な読み込みをサポートすることも有効です。

6. ユーザーの許可が必要なコンテンツのインデックス登録

ユーザーの同意が必要なコンテンツは、Googlebotに無視されてしまいます。

Googlebotとそのレンダリングサービス（WRS）は、ローカルストレージやHTTP Cookie、セッションストレージデータを削除するため、データの永続性に依存してコンテンツを提供できません。

またGooglebotは2020年現在、WebGLをサポートしていません。したがってWebGLを使ってブラウザで写真の効果をレンダリングする場合は、サーバー側で事前に行いましょう。

7. Webコンポーネントをサーチエンジンフレンドリーにしよう

コンテンツをLight DOM（ドキュメントオブジェクトモデル）に入れることで、Webコンポーネントをサーチエンジンフレンドリーにしましょう。

Light DOMは、コンポーネントのShadow DOMの外側にあります。Shadow DOMは、コンポーネントの内部構造やScoped CSSを定義し、実装の詳細をカプセル化してくれる存在です。Light DOMは、コンポーネントのユーザーによってマークアップが書き込まれていきます。

HTMLやCSS、JavaScriptは世界的に使われている言語なため、脆弱性が少なからずあります。コンテンツをLight DOMに入れれば、そのようなWebアプリケーション構築の脆弱性を排除してくれるのです。

たとえば新しいHTML idやclassを配置したとき、Webサイト上にある既存の要素と競合してしまう場合がありますよね。また、予期しないバグの発生やスタイルセレクタの破損、CSSの特異性などの問題が起きることも。これらの問題に直面した場合も、Light DOMとShadow DOMによって対処できます。

8. モバイル対応のテストをする

モバイル端末への対応は、Webサイトを成功させるための重要な要素です。リリース前にしっかりテストをしておきましょう。

そこで活用したいのが、Googleが公開しているテストツールです。Googleのモバイルフレンドリーテストは、URLを貼り付けてクリックするだけで、Webサイトのモバイルフレンドリーさを確認できるという優れもの。数秒で結果が出るのでぜひ試してみてください。

また、サービスプロバイダーが提供するテストツールもおすすめです。

おわりに

検索エンジンのクローラーは、Webコンテンツを最適な方法でクロールすることでインデックス登録を行なっています。

したがって今回ご紹介した8つのポイントを抑えて、JavaScriptのSEO対策が施されたWebページを作るよう心がけましょう。

（執筆：Eric Karkovack　翻訳：Asuka Nakajima　編集：Kitamura Yuu、Kimura Yumi）