JavaScriptで作られたページはGoogleにインデックスされるの？

google seo

Google検索エンジンはどこを見ているの？

ソースとDOMの違い

Webページには”ソース”と”DOM”という2つの重要な概念があります。この2つは、Googleがページをどのように理解し、インデックスするかに大きく関係しています。

まず、”ソース”はページのHTMLそのもので、サーバーから送られる基本的なコードです。一方、”DOM”（Document Object Model）は、ブラウザがHTML、JavaScript、CSSなどを使って作り上げた最終的なページの構造です。

Googleのクローラー（Googlebot）は、HTMLソースだけでなく、JavaScriptの実行結果としてのDOMもクロールします。つまり、サーバーから送られるHTMLコードだけでなく、ユーザーがブラウザで実際に見るページの状態も対象となります。この違いを理解することは、JavaScriptで作られたコンテンツがGoogleに正しくインデックスされるためにとても重要です。

Googleクローラーのクロール方法

Googleクローラーはページをインデックスするとき、まずHTMLソースを読み取り、その後、必要があればJavaScriptを実行します。そのため、JavaScriptによって動的に生成されたコンテンツもインデックスされることがあります。ただし、全てのJavaScriptが必ず実行されるわけではなく、クローラーにはリソースや実行時間に限りがあります。ですから、JavaScriptが正しく動かないとクローラーがコンテンツを読み取れないこともあります。

JavaScriptで重要なコンテンツを作る場合は、Googleクローラーがそのコンテンツをちゃんと認識できるかどうかを確認することが大事です。特に、リンクやテキストがJavaScriptで生成されている場合、それがインデックスに影響する可能性があるため、注意が必要です。

DOMとは？

ブラウザのレンダリング結果としてのDOM

DOM（Document Object Model）は、HTMLやJavaScriptを使って作られた、ブラウザ内のページの構造です。これはユーザーが実際に目にするもので、ブラウザが元のHTMLを解析し、JavaScriptを実行して構築します。

例えば、JavaScriptで動的に生成されたテキストやリンクは、元のHTMLにはなくても、ブラウザがレンダリングしてユーザーに表示します。このように動的に生成されたDOMのコンテンツも、Googleクローラーがインデックスすることがあります。しかし、全てのJavaScriptがクロールされるわけではなく、クローラーのリソースや特定の実装によっては、インデックスされないこともあります。

DOMを理解することは、JavaScriptを使ったウェブサイトのSEO対策にとって非常に重要です。Googleクローラーがどの程度JavaScriptを実行し、レンダリング後のDOMをクロールするかを知ることで、インデックスに関する問題を避けることができます。

JavaScriptの出力がインデックスされるための条件

GoogleクローラーはJavaScriptを実行するの？

GoogleクローラーはJavaScriptをある程度実行する能力がありますが、全ての場合でうまくいくわけではありません。JavaScriptを実行するにはリソースが必要で時間もかかるため、クローラーが全てのページのJavaScriptを完全に実行するとは限りません。だからこそ、JavaScriptでコンテンツを生成する場合は、次の条件を満たすようにすることが大切です。

1. ページの読み込み速度：Googleはページの読み込み速度を重視しています。JavaScriptの実行に時間がかかると、クローラーがそのコンテンツをインデックスしないことがあります。
2. リンクの見やすさ：JavaScriptで生成されたリンクは、クローラーにとっても見える形でDOMに組み込まれている必要があります。
3. 重要なコンテンツはプレレンダリング：特に重要なコンテンツは、JavaScriptで作るのではなく、サーバーサイドでレンダリングしてHTMLに含めることが推奨されます。これにより、クローラーがその内容を確実に読み取ることができます。

クロール可能なリンクの例

インデックスされるリンクとされないリンクの違い

JavaScriptを使ってリンクを作るとき、クロールされるものとされないものがあります。ここでは、Googleクローラーが認識しやすいリンクと、認識しにくいリンクの例を紹介します。

OKの例：正しいリンク形式

以下のようなリンクは、Googleクローラーによって問題なく認識されます。

• <a href="https://example.com">リンクテキスト</a>
• <a href="/products/category/shoes">カテゴリへのリンク</a>

これらのリンクは、href属性が正しく指定されているので、Googleクローラーがリンク先を理解しやすくなっています。また、相対パスや絶対パスどちらでも、クローラーはリンク先を正しく解釈します。

NGの例：クローラーが理解できないリンク形式

以下のリンクはクローラーが認識しにくく、インデックスされない可能性があります。

• <a routerLink="products/category">リンクテキスト</a>
• <span href="https://example.com">リンクテキスト</span>

routerLink属性や、<span>タグにhref属性を使った形式は、クローラーがリンクとして認識しません。その結果、クローラーがページの構造やナビゲーションを正しく理解できず、リンク先がインデックスに含まれない可能性があります。

クロール可能なリンクを作るためのポイント

Googleクローラーがリンクを正しく認識するためには、次のポイントを押さえましょう。

1. 正しいタグを使う：リンクを作るときは、必ず<a>タグを使い、href属性にリンク先を指定します。
2. JavaScriptでのリンク生成に注意：JavaScriptでリンクを動的に作るときは、href属性が正しく設定されるようにします。
3. リンクは分かりやすくする：リンクテキストは意味があり、ユーザーにもクローラーにもリンク先がわかりやすいようにしましょう。

JavaScript出力をクロール可能にするためのポイント

クローラーに解析されるようにするには？

JavaScriptで作られたコンテンツをGoogleクローラーにインデックスさせるためには、いくつかのポイントがあります。これらのポイントを守ることで、JavaScriptを使っていてもSEO効果を高めることができます。

1. プレレンダリングの利用
   • JavaScriptで作られるコンテンツが多い場合、プレレンダリングを使うことでGoogleクローラーに静的なHTMLを提供し、インデックスを確実に行うことができます。プレレンダリングは、サーバー側でページをあらかじめレンダリングして、クローラーに提供する方法です。
2. サーバーサイドレンダリング（SSR）
   • サーバーサイドレンダリング（SSR）を使うことで、JavaScriptで作られるコンテンツをサーバー側でレンダリングし、クローラーに完全なHTMLを提供できます。これにより、クローラーがJavaScriptを実行しなくてもインデックスされやすくなります。
3. クローラビリティのテスト
   • Google Search Consoleなどのツールを使って、ページがちゃんとクロールされているかどうか確認することが大事です。特に、JavaScriptで作られたリンクやコンテンツが正しく認識されているかをテストしましょう。

まとめ

JavaScriptで作られたコンテンツがGoogleにインデックスされるかどうかは、いくつかの条件に依存します。GoogleクローラーはJavaScriptを実行してページを読み取る能力を持っていますが、全てのJavaScriptがインデックスされるわけではありません。だからこそ、特に重要なコンテンツやリンクは、クローラーが確実に認識できる形で提供することが必要です。

• ソースとDOMの違いを理解し、Googleクローラーが何を見ているのか把握することが大事です。
• JavaScriptによるリンク生成は、クローラーが認識しやすい形にすること。
• プレレンダリングやSSRを使ってインデックスされる方法を取り入れることで、SEOの効果を高めることができます。

JavaScriptを使ったウェブサイトでも、これらのポイントを押さえれば、Google検索エンジンに正しくインデックスされ、検索結果での見つけやすさを向上させることができます。詳細は、Google公式リンクを参考にしてください。