ユーザーからの見やすさや使いやすさを考えてJavaScriptを使用するのは、とてもユーザーファーストで良い試みです。
しかし、JavaScriptに対してGoogleのSEO対策を同時にする必要があります。
それはなぜかと言いますと、JavaScriptはSEOにとって重要な要素であるからです。
重要な要素である意味は、検索結果に表示されるためのプロセスを理解するとよくわかるでしょう。
そこで今回は、JavaScriptのSEOに関する基礎的な知識とSEO対策のポイント、現在のコンテンツのSEO対策を確認する方法までを解説します。
JavaScript SEOとは
JavaScript SEOとは検索エンジン向けにJavaScriptを利用したWebサイトの最適化をすることです。
そしてJavaScriptとは、プログラミング言語の1つです。
Webサイト内に動きをつけたいときに使われます。
例えば、画像や広告のポップアップ表示やメッセージボックスの表示、地図などのコンテンツに動く指示を出すのです。
Webサイトは動く要素がないHTMLやCSSのプログラミング言語で作成できますが、JavaScriptで動きをつけることで、ユーザーに飽きさせず興味を引き付けるWebサイトができます。
JavaScriptがSEOに与える影響
JavaScriptはSEOにとって重要な要素であり、検索のランキングなどに影響を与えます。
GoogleはJavaScriptのSEOについて、Google検索セントラルで以下のように公言しているのです。
JavaScript には、ウェブを強力なアプリケーション プラットフォームに変える多くの機能が用意されており、ウェブ プラットフォームを支える重要な要素となっています。
JavaScriptは重要な要素ではある一方で、使用するとコードが冗長化し検索エンジンのクローラーの動きを妨げてしまい、Webサイトが検索結果に表示されなくなる可能性があります。
また、GooglebotがJavaScriptの読み込みに困難がある場合、ページの読み込みや画像表示の速度が遅くなりSEOの評価が下がるマイナス要素になるのです。
そのため、JavaScriptの最適化、SEO対策が必要なのです。
GoogleがJavaScriptを処理するプロセス
JavaScriptのSEO対策をする前に、まずはGoogleがJavaScriptを処理するプロセスを理解する必要があります。
検索結果にどう反映されるか知っておくことで、JavaScriptのSEO対策がどれだけ重要かがわかるでしょう。
Googleは以下の3つの工程で処理をし、Webサイトを検索結果に反映させています。
- クロール
- レンダリング
- インデックス登録
では、3つの工程について詳しく解説します。
クロール
クロールとは、検索エンジンのクローラー（Googlebot）がWebページを巡回し、Webページの内容を把握することを言います。
検索エンジンにWebページがインデックスされるために、クロールは必ず必要なプロセスです。
ただし、Webサイトで公開された全てのページにクローラーが巡回し、クロールするわけではありません。
まず、GooglebotがWebサイトにアクセスし2つの確認をしています。
- robots.txtファイルやrobots metaタグの読み取り
- クロールを許可しているか
2つが確認できれば次のプロセス「レンダリング」をします。
レンダリング
レンダリングとは、コンピュータープログラムが数値データから計算処理をおこない、画像や映像を表示させることです。
また、WebサイトのHTMLファイルから、ユーザーが閲覧できるページを表示することもレンダリングになります。
Googleにレンダリングを正しくしてもらうためには、ページの読み込み時間が重要です。
JavaScriptの読み込みに時間がかかり、Googletがレンダリングをしない場合があるからです。
ページの読み込み時間に不安がある場合、GoogleサーチコンソールのURL検査で「クロール済みのページを表示」からレンダリング結果を確認しましょう。
インデックス登録
インデックス登録とは、Webページを検索エンジンのデータベースに登録することです。
Googleでは、レンダリングされたHTMLを使用してページをインデックス登録をします。
そしてインデックス登録をするとき、Googleはページの評価をし、検索表示順位を決めるのです。
つまり、検索結果にWebページを表示させるためには、Googleにインデックス登録を必ずしてもらう必要があります。
インデックス登録をしてもらうためにも、必ずGooglebotのクロールとレンダリングのプロセスを通過しないといけないのです。
JavaScript SEO対策の4つのポイント
JavaScriptを処理するプロセスから、Googlebotに正しくクロールしてもらうことがまず大切なことがわかったと思います。
クロールしてもらうために、JavaScriptのSEO対策をしておきましょう。
以下の4つのポイントを押さえて作成してください。
- タイトルとメタディスクリプションの設定
- 適切なHTTPステータスコードを使用
- フラグメントの代わりにHistoryAPIを使用
- 長期保存キャッシュを使用
では、それぞれ詳しく解説していきます。
タイトルとメタディスクリプションの設定
ページのタイトルやメタディスクリプションは、独自性があり一目見て内容が伝わるものを設定しましょう。
検索結果でユーザーが1番始めに見る情報だからです。
ユーザーが求めている内容、答えを見つけやすいようにするポイントがそれぞれあります。
まず、タイトル設定のポイントはこちらです。
- 対策キーワードは左詰めにする
- 文字数は30文字程度
- コンテンツ内容と一致させる
- 具体的な数字や【最新】などクリックしたくなる要素を入れる
そしてメタディスクリプション設定のポイントはこちらです。
- 簡潔にまとめる
- 誰に向けてのコンテンツなのかを意識する
- ページの内容に合った文章にする
- 対策キーワードを自然に入れ込む
情報量が多すぎたり、対策キーワードを不自然に多用したりするとユーザーが内容を判断しにくくなります。
GoogleのSEOはユーザーファーストなので、当然SEO評価を得られにくくなるので注意しましょう。
適切なHTTPステータスコードを使用
Googlebotがクロールするとき、ページに問題が発生したかどうかを確認するためにHTTPステータスコードを使います。
そのため、クロールやインデックス登録する必要がないページには、適切なステータスコードを使用してクローラーに情報を伝える必要があるのです。
HTTPステータスコードとは、サーバの情報処理の結果を3桁の数字で表したものです。
使用するためには、それぞれのステータスコードの意味を理解しておく必要があります。
以下が代表的なHTTPステータスコードと意味です。
- 401・403：権限の問題があり利用できない
- 301・302：ページが移動している
- 404・410：ページが利用できない
- 500・503：サーバの問題がある
また、HTTPステータスコードはWebページが新しいURLに移動したことを伝えることができます。
新しいWebページのインデックス登録をする場合もHTTPステータスコードを使用してみてください。
フラグメントの代わりにHistoryAPIを使用
まず、フラグメントとは「断片」という言葉の意味があり、データを小さく分割して記録するものです。
フラグメントで、データの内容を断片的にバラバラに記録してまとめているのです。
そのため、フラグメントを使って別のページをリンクさせるとクローラーがリンク先を見つけられないことがあります。
そして、ページを見つけることができないことは、SEO対策では悪影響となってしまいます。
そのため、GoogleではJavaScriptのSEOでフラグメントを使用することをおすすめしていません。
Googlebot が URL を確実に抽出して解析できるように、フラグメントを使用して別のページ コンテンツを読み込むことは避けてください。
代わりにHistoryAPIを使用することでGooglebotが確実にページをクロールできるようになります。
HistoryAPIとは、閲覧したサイトのブラウザ履歴を操作できるものです。
HistoryAPIは、JavaScriptによる画面の移り変わりを実現し、Googlebotにページを見てもらうために重要です。
長期保存キャッシュを使用
キャッシュの保存期間を長期間に設定しておきます。
Googlebotは、積極的にキャッシュ保存を行います。
しかし、WRSがキャッシュヘッダーを無視する場合があり、古いJavaScriptを使用してしまう可能性があるのです。
WRSは、第三者により悪意ある改ざんなどをされたWebページへのアクセスをブロックする機能です。
そのため、ファイル名の一部をコンテンツのフィンガープリントにし、無視されないようにする必要があります。
フィンガープリントとは、デジタルの世界の指紋のようなもので、デバイスを特定するための情報群のことです。
フィンガープリントによって、更新すると別のファイルが作られ保存されます。
ですので、キャッシュヘッダーを無視することなくキャッシュを保存が可能になりSEO対策のポイントになるのです。
JavaScript SEO対策の4つの確認すべきこと
JavaScriptSEO対策のポイントをご紹介しましたが、現在のWebページの状況を確認してみましょう。
以下の4つを確認してみてください。
- コードの互換性を確認
- robots metaタグを再確認
- 画像の遅延読み込みをテスト
- モバイルフレンドリーをテスト
これらはインデックス登録に必要なもの、検索順位を上げるためのもので、どれもSEO対策には欠かせません。
では、それぞれをなぜ必要なのか、どう確認するのかを解説します。
コードの互換性を確認
Googleと相互性があるコードかを確認しましょう。
JavaScriptは目覚ましい発展をしている言語のため、GoogleのAPIがJavaScriptの機能に一定の制約を設けているからです。
ブラウザ機能には古いブラウザで、最新機能を使えるためのコードを使用できますが、一部のブラウザ機能は対応できません。
コードの確認方法は「JavaScriptの問題を解決するためのガイドライン」に以下のように記載されています。
Search Console のモバイル フレンドリー テストまたは URL 検査ツールを使用して、Google による URL のクロールとレンダリングをテストします。
Googleサーチコンソールで確認するとクロール時に除外があった場合に、その理由も確認できるので改善に役立てることができるのです。
robots metaタグを再確認
robots metaタグを確認しましょう。
なぜなら、robots metaタグを使用するとクローラーをブロックしてしまい、クロールできないからです。
robots metaタグとは、Googleによるページのインデックス登録やリンクの参照をさせないようにするために使用するタグです。
例えば、ページの上部にrobots metaタグを追加すれば、Googleからのページのインデックス登録をブロックすることができます。
そのため、誤ってrobots metaタグを使用していた場合がないか確認することが大切になります。
robots metaタグはページ単位で設定するタグです。
ですので、<head>内にrobots metaタグが入っていないか確認しましょう。
画像の遅延読み込みをテスト
画像の遅延読み込みは、Puppeteerスクリプトを使用しテストしましょう。
画像の遅延読み込みとは、表示する画像データを一度に読み込まず、必要に応じて必要な分だけ読み込むというものです。
Googleでは、遅延読み込みをおすすめしています。
重要でないコンテンツや非表示のコンテンツの読み込みを後回しにすることは、一般に「遅延読み込み」とも呼ばれ、パフォーマンスおよびユーザー エクスペリエンスに関する一般的なおすすめの方法としてよく行われます。
ただし、正しく実装されていないと認識してもらえません。
そのため、画像の遅延読み込みのテストをしてチェックをしましょう。
スクリプトを実行するには Node.js という実行環境が必要です。
Node.jsとは、JavaScriptをサーバー側で動作させる開発環境で、処理環境の改善や作業効率の向上を期待できます。
スクリプトを実行後は、作成されたスクリーンショット画像を使用しインデックス登録したいコンテンツが含まれているか確認しましょう。
モバイルフレンドリーをテスト
スマートフォンからWebサイトを閲覧しやすいこともSEOに影響するため、モバイルフレンドリーをテストしましょう。
モバイルフレンドリーとは、スマートフォンでの閲覧に適していないページの順位を引き下げる仕組みのことです。
スマートフォンで検索するユーザーが増えたため、これからはスマートフォンからの閲覧のしやすさも検索エンジンから評価の対象になりました。
「モバイルフレンドリーテスト」は、Googleが活用するようおすすめしています。
以下のツールを使うことで、ご自身のページが Googlebot からどのように認識されているかを変更の前に確認することができます。
数ページをテストする場合は、モバイル フレンドリー テスト を実施します。
サイトをお持ちの場合は、ウェブマスター ツール アカウントで モバイル ユーザビリティ レポート を使用すると、サイト全体のモバイル ユーザビリティ問題を一覧で確認できます。
【注意点】JavaScriptはクロールに時間がかかる
JavaScriptはHTMLのコンテンツよりもクロールに時間がかかります。
なぜなら、動きがあるJavaScriptはHTMLのクロールとは別のプロセスで処理されるからです。
GoogleはJavaScriptを使用するページに対して、インデックスを2回実行します。
始めのインデックスではページのHTMLのみ対応します。
そして、2度目にJavaScriptをレンダリングするためのインデックスを作成するのです。
HTMLは非常に素早くクロールしてインデックスされ、JavaScriptの場合は数日から数週間後にインデックスされるため時間がかかることを理解しておきましょう。
ダイナミックレンダリングでクロール時間を短縮できる
JavaScriptはクロールに時間がかかるものですが、クロール時間を短縮できるダイナミックレンダリングがあります。
ダイナミックレンダリングとは、ユーザーが見つけるためのJavaScript使用のファイルと、Googlebotが見つけやすいようにHTMLファイル2つに分けるものです。
ファイルを2つに分けることで検索結果に反映される時間を短縮できます。
ただし、ダイナミックレンダリングは根本的な解決策でなく、回避策です。
ダイナミックレンダリングは仕組みが複雑になるため、Googleでは推奨してはいません。
そのため、更新頻度が多いコンテンツページ、クローラがサポートできないJavaScriptを使用した場合などで利用しましょう。
JavaScriptのSEO対策をしてGoogleに評価してもらおう！
JavaScriptのSEO対策をするには、検索結果にどう反映されるかという仕組みを理解することが必要です。
JavaScriptを使用したページのクロール、レンダリング、インデックス登録をスムーズにするためにもJavaScriptのSEO対策をしましょう。
そして、SEO対策のポイントとして以下の4つを実行してみてください。
- タイトルとメタディスクリプションの設定
- 適切なHTTPステータスコードを使用
- フラグメントの代わりにHistoryAPIを使用
- 長期保存キャッシュを使用
インデックス登録までに時間がかかりますが、できる対策からコツコツやっていきましょう。
