JavaScriptとSEOの基本 | レッスン33/34 | SEMrush Academy

JavaScriptとSEOの基本 | レッスン33/34 | SEMrush Academy

テーブル目次

1. イントロダクション
   • JavaScriptの重要性
2. GoogleのクローラーとJavaScript
   • クローラーの仕組み
   • クローラーがJavaScriptを実行できる理由
   • クローラーのアップデート
3. GoogleのJavaScriptレンダリングプロセス
   • 旧クロールと新レンダリングの違い
   • 遅延インデックスへの影響
4. JavaScriptのSEOへの影響
   • 主要コンテンツとクリティカルリンクの重要性
   • rel属性の使用
5. Googleのレンダリングバージョンと注意点
   • Googleのレンダリングに使用される古いChromeバージョン
   • リッチリザルトテストツールの活用
   • JavaScriptフレームワークの注意点
6. JavaScriptとSEOのベストプラクティス
   • リソースの適切な表示
   • ページ速度の最適化
   • レンダリングエラーの修正とデバッグ
7. JavaScriptとSEOの常に変化する関係
   • 定期的なアップデートの必要性
   • ドキュメントの参考資料

JavaScriptとSEOの基本

近年、97%以上のウェブサイトでJavaScriptが使用されています。しかし、Googleの通常のクローラーはJavaScriptを解析することができません。なぜなら、JavaScriptはクライアントサイドで実行されるため、サーバーサイドではなくブラウザ内での変更が発生するためです。そのため、Googleはクライアントサイドのアクションを実行およびレンダリングするクローラーの開発を行いました。

GoogleのクローラーとJavaScript

Googleは従来のテキストベースのクロールに加えて、新しいJavaScriptレンダリングも行っています。クローラーはまずテキストのクロールを行い、その後レンダリングプロセスで取得した追加情報を元のデータに追加します。しかし、JavaScriptを使用する場合、Googleにとって追加の作業が必要となり、それによってインデックス作業が遅延する可能性もあります。

JavaScriptのSEOへの影響

SEOの観点からJavaScriptを使用する場合、主要なコンテンツと重要なリンクはHTMLソースコードに直接配置することが重要です。また、rel属性を使用してcanonicalタグおよびamp htmlタグをマークアップに追加することも推奨されます。JavaScriptはページの機能を向上させるために使用されるべきですが、完全に置き換えるべきではありません。

Googleのレンダリングバージョンと注意点

Googleは非常に古いChromeバージョン（バージョン41）を使用してサイトをレンダリングしています。そのため、現在のブラウザでデバッグしても、Googleが古いバージョンを使用しているため、違いが生じる可能性があります。また、リッチリザルトテストツールを使用してドキュメントオブジェクトモデルを確認し、マークアップとの差を比較することも効果的です。

JavaScriptとSEOの常に変化する関係

JavaScriptとSEOの関係は常に変化しています。頻繁なアップデートが行われているため、日々変化していることを念頭に置く必要があります。Elephantという会社が公開しているガイドも参考にすると良いでしょう。

JavaScriptとSEOのベストプラクティス

JavaScriptを使用する際には、リソースの適切な表示やページ速度の最適化など、いくつかのベストプラクティスがあります。また、レンダリングエラーの修正とデバッグも重要です。

【ハイライト】

• GoogleのクローラーはJavaScriptを解析できないため、注意が必要です。
• JavaScriptの使用により、Googleのクローリングおよびインデックス作業が遅延する可能性があります。

【FAQ】 Q: GoogleのクローラーはJavaScriptを解析できますか？ A: いいえ、GoogleのクローラーはJavaScriptを解析することができません。JavaScript使用時には注意が必要です。

Q: JavaScriptのSEOへの影響は何ですか？ A: JavaScriptのSEOへの影響は主要なコンテンツの表示や遅延インデックス化などが挙げられます。

【参考リソース】

• ElephantのJavaScriptフレームワークガイド：https://example.com
• Googleリッチリザルトテストツール：https://example.com
• diffchecker.com：https://example.com