Google I/O 2019 の最新情報とインサイトをご確認ください。
Google 検索の素晴らしい事例を、Google I/O 2019 でご紹介しました。
この投稿では、JavaScript ウェブアプリを Google 検索で見つかりやすくするためのおすすめの方法を紹介します。主な内容は次のとおりです。
- 常に最新の状態を維持する新しい Googlebot
- クロール、レンダリング、インデックス登録を行う Googlebot のパイプライン
- 機能検出とエラー処理
- レンダリング戦略
- Google 検索でのウェブサイトのテストツール
- 一般的な課題と考えられる解決策
- JavaScript ウェブアプリでの SEO のベスト プラクティス
常に最新の状態を維持する Googlebot のご紹介
今年、待望の最新の Googlebot を発表しました。
Googlebot は現在、Google 検索用にウェブサイトをレンダリングするために最新の Chromium エンジンを使用しています。さらに、Googlebot を最新の状態に保つため、最新バージョンの Chromium のテストも行います。通常は、安定した Chrome のリリースから数週間以内に行われます。この発表は、ウェブ デベロッパーと SEO にとって大きなニュースです。ES6+、IntersectionObserver、Web Components v1 など、1,000 以上の新機能が Googlebot に導入されます。
Googlebot の仕組み
Googlebot は複数のコンポーネントで構成されるパイプラインです。Googlebot が Google 検索のためにページをインデックスに登録する仕組みを見ていきましょう。
この処理は次のように行われます。
- Googlebot は、クロールのために URL をキューに入れます。
- クロール バジェットに基づいて HTTP リクエストで URL を取得します。
- Googlebot は HTML をスキャンしてリンクを探し、検出されたリンクをクロールのキューに入れます。
- その後、Googlebot はレンダリングするページをキューに入れます。
- 可能な限り早く、ヘッドレスの Chromium インスタンスによってページがレンダリングされます。これには JavaScript の実行も含まれます。
- Googlebot はレンダリングされた HTML を使用してページをインデックスに登録します。
技術的な設定は、クロール、レンダリング、インデックス登録のプロセスに影響する可能性があります。たとえば、応答時間が遅い場合やサーバーエラーによって、クロールの割り当てに影響することがあります。別の例として、リンクのレンダリングに JavaScript が必要になると、リンクの検出速度が低下することがあります。
特徴検出を使用してエラーを処理する
最新の Googlebot には多くの新機能が搭載されていますが、一部の機能はまだサポートされていません。サポートされていない機能に依存している場合や、エラーを適切に処理できない場合、Googlebot がコンテンツのレンダリングやインデックス登録を行えない可能性があります。
例を見てみましょう。
<body>
<script>
navigator.geolocation.getCurrentPosition(function onSuccess(position) {
loadLocalContent(position);
});
</script>
</body>
ユーザーが権限を拒否した場合や、getCurrentPosition 呼び出しがエラーを返した場合には、コードで処理されないため、このページにはコンテンツが表示されないことがあります。Googlebot は、このような権限リクエストはデフォルトで拒否します。
この場合は、次の方法をおすすめします。
<body>
<script>
if (navigator.geolocation) {
// this browser supports the Geolocation API, request location!
navigator.geolocation.getCurrentPosition(
function onSuccess(position) {
// we successfully got the location, show local content
loadLocalContent(position);
}, function onError() {
// we failed to get the location, show fallback content
loadGlobalContent();
});
} else {
// this browser does not support the Geolocation API, show fallback content
loadGlobalContent();
}
</script>
</body>
JavaScript サイトをインデックスに登録する際に問題が発生した場合は、トラブルシューティング ガイドで解決策を見つけてください。
ウェブアプリに適したレンダリング戦略を選択する
現在、シングルページ アプリのデフォルトのレンダリング方法は、クライアントサイド レンダリングです。HTML が JavaScript を読み込むと、実行時にブラウザにコンテンツが生成されます。
たとえば、猫の画像のコレクションを表示し、JavaScript を使用して完全にブラウザでレンダリングするウェブアプリを見てみましょう。
レンダリング方法を自由に選択する場合は、サーバーサイド レンダリングまたはプリレンダリングを検討してください。サーバーで JavaScript を実行して最初の HTML コンテンツを生成するため、ユーザーとクローラーの両方のパフォーマンスが向上します。この方法では、ネットワーク経由で到着した HTML のレンダリングをブラウザで開始できるため、ページの読み込みが速くなります。I/O でのレンダリング セッションや、ウェブでのレンダリングに関するブログ投稿では、サーバーサイド レンダリングとハイドレーションによってウェブアプリのパフォーマンスとユーザー エクスペリエンスがどのように向上するかが紹介されており、その他にもさまざまなコードサンプルが提供されています。
JavaScript を実行しないクローラーに対する回避策を探している場合、またはフロントエンドのコードベースを変更できない場合は、ダイナミック レンダリングの使用を検討してください。ダイナミック レンダリングは、こちらの Codelab でお試しいただけます。ただし、ダイナミック レンダリングではクローラーには静的 HTML しか配信されないため、サーバーサイド レンダリングやプリレンダリングほどユーザー エクスペリエンスやパフォーマンス上のメリットは得られません。そのため、長期的な戦略というよりも、臨機応変な対応となります。
ページをテスト
通常、ほとんどのページは Googlebot で問題なく動作しますが、定期的にページをテストして、コンテンツを Googlebot がアクセスでき、問題がないかどうか確認することをおすすめします。そのための便利なツールがいくつかあります。
モバイル フレンドリー テストを使用すると、ページを簡単にチェックできます。モバイル フレンドリーの問題が示されるだけでなく、スクロールせずに見える範囲のコンテンツと、Googlebot が認識するレンダリングされた HTML のスクリーンショットも提供されます。
また、リソースの読み込みに関する問題や JavaScript のエラーがあるかどうかを確認することもできます。
Google Search Console でドメインの所有権を証明することをおすすめします。それにより、URL 検査ツールを使用して、URL のクロールとインデックス登録の状態の詳細を調べたり、Search Console が問題を検出したときにメッセージを受信したり、Google 検索におけるサイトのパフォーマンスの詳細を確認したりできるようになります。
SEO に関する一般的なヒントやガイダンスについては、Lighthouse の SEO 監査をご利用いただけます。SEO 監査をテストスイートに統合するには、Lighthouse CLI または Lighthouse CI bot を使用します。
これらのツールは、Google 検索のページに関する問題の特定、デバッグ、修正に役立ち、開発ルーチンに組み込む必要があります。
最新情報を入手して連絡を取り合う
Google 検索に関する最新情報やお知らせについては、ウェブマスター ブログ、Google ウェブマスターの YouTube チャンネル、Twitter アカウントを定期的にご確認ください。 また、SEO と JavaScript の詳細については、Google 検索のデベロッパー ガイドと JavaScript SEO の動画シリーズをご覧ください。