JavaScriptのSEO対策
JavaScriptは現在のWebサイトで広く利用されており、動きのある画面や便利な機能を実現するために欠かせない技術です。一方で、実装方法によっては検索エンジンがコンテンツを正しく認識できず、SEOに影響する場合があります。本記事では、JavaScriptとSEOの関係や、検索エンジンに配慮した実装方法について解説します。
なお、WordPressでJavaScriptの最適化機能を利用すると、一部のプラグインが正常に動作しなくなることがあります。その場合は、最適化の対象から該当するJavaScriptファイルを除外してください。
JavaScriptはSEOに悪いのか？
現在のGoogleはJavaScriptをある程度実行してページ内容を理解できます。そのため、JavaScriptを利用しているだけでSEO上不利になることはありません。
しかし、重要なコンテンツやリンクがJavaScriptによってしか表示されない場合は、クロールやインデックスに時間がかかったり、一部が認識されない可能性があります。
注意したいケース
- 本文がJavaScriptで後から生成される。
- 内部リンクがJavaScriptでしか表示されない。
- 検索エンジンがレンダリングするまで内容が取得できない。
- 大量のJavaScriptにより表示速度が低下している。
GoogleはJavaScriptをどのように処理するのか
Googleは通常、HTMLを取得したあとにJavaScriptを実行してページをレンダリングします。
ただし、JavaScriptのレンダリングには追加の処理が必要となるため、HTMLだけのページと比較すると、インデックスまで時間がかかる場合があります。
また、JavaScriptのエラーや読み込み失敗があると、コンテンツを取得できないこともあります。
SEOで意識したい実装方法
重要な内容はHTMLで表示する
記事本文や見出し、内部リンクなどSEOで重要な情報は、できるだけ初期HTMLに含めることが推奨されます。
JavaScriptは装飾や機能追加に利用し、コンテンツそのものはHTMLで提供する構成が理想です。
内部リンクをJavaScriptだけにしない
検索エンジンが確実に巡回できるよう、主要な内部リンクは通常の<a>タグで設置しましょう。
クリックイベントだけでページ遷移する実装は避けた方が安全です。
表示速度を改善する
JavaScriptが増えるほどページ表示は遅くなる傾向があります。
不要なライブラリは削除し、deferやasyncを活用してレンダリングを妨げないようにしましょう。
| 方法 | 効果 |
|---|---|
| defer | HTML解析後に実行する |
| async | 読み込み完了後すぐ実行する |
| コード圧縮 | 転送量を削減する |
| 不要なJS削除 | 表示速度を改善する |
SPAやJavaScriptフレームワークを利用する場合
React、Vue、Angularなどを利用したSPA（Single Page Application）では、JavaScriptへの依存度が高くなります。
このようなサイトでは、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）を利用すると、検索エンジンが内容を認識しやすくなります。
現在ではNext.jsやNuxtなど、SEOを考慮したフレームワークも広く利用されています。
Google Search Consoleで確認する
JavaScriptの問題がないかはGoogle Search ConsoleのURL検査ツールで確認できます。
Googleが実際に取得したHTMLやレンダリング後の内容を確認し、本文やリンクが正しく認識されているか確認しましょう。
WordPress利用時の注意点
キャッシュプラグインや高速化プラグインには、JavaScriptの結合・圧縮・遅延実行機能があります。
これらを有効にすると表示速度は改善することがありますが、スライダーやお問い合わせフォーム、アクセス解析などが正常に動作しなくなる場合があります。
不具合が発生した場合は、対象となるJavaScriptファイルを最適化対象から除外してください。
まとめ
- JavaScript自体がSEOに悪いわけではない。
- 重要なコンテンツや内部リンクはHTMLで提供することが望ましい。
- JavaScriptは表示速度にも影響するため最適化が重要である。
- SPAではSSRやSSGを利用するとSEOに有利になる。
- Google Search Consoleでレンダリング結果を確認しよう。