SEO のための JavaScript レンダリングを理解する (+ 6 つの簡単なテスト方法!)

公開: 2023-06-16

JavaScript は、ユーザー エクスペリエンスを向上させ、Web サイトに対話性を追加できる強力なプログラミング言語です。

しかし問題は、検索エンジンが常に JavaScript とうまくやっていくわけではないということです。

JavaScript レンダリングが SEO にどのような影響を与えるかを理解することが重要です。 その後、Web サイトがそれに値する可視性を確保するために必要な手順を実行できます。

このガイドでは、以下について説明します。

  • JavaScript レンダリングの知っておくべき側面
  • 検索エンジンがウェブサイトをどのように閲覧するかをテストする 6 つの簡単な方法
  • JavaScript サイト向けの実践的な SEO テクニック
コンテンツショー
JavaScript とは何ですか? レンダリングとは何を意味しますか?
SEO における JavaScript の問題点は何ですか?
SEO プロジェクトに JavaScript を使用する理由
SEO のための JavaScript レンダリングをテストする 6 つの簡単な方法
1. JavaScript がブロックされているときに Chrome がページを読み込めるかどうかをテストする
2. SEO 分析ツールがページをどのように表示するかを確認する
3. Google モバイル フレンドリー テスト
4. Googleリッチリザルトツール
5. Google Search ConsoleのURL検査
6. 専門のレンダリング ツールを使用する
JavaScript サイトを SEO フレンドリーにする方法
リンク
画像
サーバーサイドレンダリングまたは動的レンダリング
JavaScript SEOをマスターする

JavaScript とは何ですか? レンダリングとは何を意味しますか?

JavaScript は、動的でインタラクティブな Web ページを作成するための人気のあるプログラミング言語です。

Google が Web サイトをクロールするときは、ページのインデックスを作成するためにサイトのコンテンツと構造を理解する必要があります。

これを実現するために「JavaScript レンダリング」と呼ばれるプロセスが使用されます。 Google は JavaScript コードを実行し、結果の HTML コンテンツを分析します。

画像ソース

これにより、検索エンジンは動的に生成されたコンテンツにインデックスを付けることができます。

ただし、このプロセスは完璧ではありません。 Google がページ上の JavaScript コンテンツをクロールするには、プレーンな HTML ページよりも 9 倍の時間がかかります。

場合によっては、検索エンジンがJavaScript を完全にまたは正しく実行しないため、貴重なページ要素がクローラーによって検出されず、ランキングが阻害される可能性があります。

SEO における JavaScript の問題点は何ですか?

主な問題の 1 つは、検索エンジンが JavaScript によって生成されたコンテンツをクロールして表示するのに苦労する可能性があることです。

Google がページの要素をクロールできない場合、コンテンツのそのセクションはGoogle のインデックスに追加されません。

場合によっては、これがページのコンテンツ全体になる可能性があり、ランキングされる可能性はありません。

クロールできないページは、ランク付けを妨げるだけでなく、サイトの SEO 全般を阻害する可能性があります。

JavaScript レンダリングの失敗により複数のページが同一であると Google が認識した場合、それらのページが誤って重複コンテンツとして扱われる可能性があります。 これにより、望ましくない正規化が発生したり、重要なページがクローラーによって完全に無視されたりする可能性があり、SEO 全体に悪影響を与える可能性があります。

クローラーがレンダリングに失敗したページ上のリンクもクロールされないため、そのページからのリンク資産が内部ソースまたは外部ソースに渡されることはありません。

重要な内部リンクがクローラーによって見逃されると、検索エンジンによるサイトのナビゲーションの理解が歪む可能性があり、また、重要なページが孤立ページとして扱われる可能性もあります。

JavaScript レンダリングの失敗によって発生する可能性のあるその他の SEO 問題には、次のようなものがあります。

  • 画像がインデックスから削除され、画像トラフィックが削減されます。
  • 動的に生成されたページ タイトルは見落とされる可能性があり、検索ランキングやクリックスルー率に影響を与えます。

SEO プロジェクトに JavaScript を使用する理由

したがって、JavaScript が原因で SEO に関する多くの問題が発生する可能性があります。

こうした潜在的な問題があるにもかかわらず、なぜ SEO プロジェクトに JavaScript を使用する必要があるのか​​と疑問に思われるかもしれません。

実際、Web 開発プロジェクトにこれを使用したい理由はたくさんあります。

JavaScript は、Web サイトでのユーザー エクスペリエンスとエンゲージメントを大幅に向上させることができます。 これを使用して、スライドデッキ、アニメーション、その他のインタラクティブな機能を作成できます。

ウェブサイトのパフォーマンスと速度も向上します。 遅延読み込み、コード分割、キャッシュ、サービス ワーカーを使用してサイトを最適化できます。

ユーザーの行動、好み、場所に基づいて、動的でパーソナライズされたコンテンツを作成することもできます。

98% 以上の Web サイトで JavaScript が使用されているのには理由があります。

必要なのは、JavaScript を適切に使用し、潜在的な問題がないかテストすることだけです。

SEO のための JavaScript レンダリングをテストする 6 つの簡単な方法

JavaScript レンダリングをテストすると、Google によるコンテンツのクロールとインデックス作成を停止する可能性のある潜在的な問題を特定するのに役立ちます。

これを行うための 6 つの簡単な方法を次に示します。

1. JavaScript がブロックされているときに Chrome がページを読み込めるかどうかをテストする

最初に行うべきことは、ブラウザの JavaScript を無効にすることです。

ブラウザでコンテンツを完全に表示できない場合は、JavaScript を HTML ドキュメントにレンダリングする際に問題があるはずです。

ページが Google Chrome に読み込まれたら、アドレス バーの南京錠をクリックし、[サイト設定] を選択します。

次に、JavaScript まで下にスクロールし、[ブロック] を選択します。

タブに戻ると、Chrome はページの再読み込みを提案します。 「再ロード」をクリックします。

まだ内容は見れますか？

上の例のように、ページが完全に消えた場合は、ページの JavaScript レンダリングに明らかに問題があります。

Google はコンテンツをクロールできない可能性があります。

場合によっては、広告バナーなどの特定の機能のみがページに表示されなくなります。

クロールしたいコンテンツがすべて表示されていることを確認したいと考えています。 たとえば、Google が段落全体をクロールできない場合、重要な情報が見逃され、ページのランキングの可能性が危険にさらされます。

危険にさらされているのはページの本文コンテンツだけではありません。

2. SEO 分析ツールがページをどのように表示するかを確認する

素早く簡単な SEO 分析ツールを使用すると、JavaScript SEO の問題を特定するのがさらに簡単になります。

クロール プロセスを模倣することで、検索エンジンがページをどのように理解するかを示すことができます。

アドレス バーのアイコンをクリックし、Chrome で JavaScript を再度許可する状態に戻します。

次に、SEOMinion などのブラウザー アドオンを使用して、Web ページのオンページ SEO を分析します。

サイドバーが起動します。 ここで、「オンページ SEO を分析」を選択します。

生成されたレポートを使用して、ページに実際に表示されるものと比較します。

  • ページの文字数はどれくらいですか?
  • 見出しタグはすべて存在しますか?
  • 画像の枚数は合っていますか？
  • その他の要素は分析ツールによって表示が異なりますか?

この例では、ページの単語数が 1 単語だけであることがわかり、非常に薄い記事になります。

ページには見出しタグ (H1) が 1 つだけありますが、これはうまく機能しているようです。 ただし、H2 タグまたは H3 タグがあった場合は、ワード数がコンテンツの本文が正しく表示されていないことを示しているため、おそらく処理されないでしょう。

このページには 3 つの画像がありますが、このツールでは 1 つだけが表示されていることが示されます。

画像ファイルをダウンロードすると、これがサイトのロゴ (ヘッダーから取得したもの) であることがわかりました。

表示されている内容がレポートで「表示されている」内容と一致しない場合、これはページ本文内のコンテンツが適切にクロールされていないことを示しています。

3. Google モバイル フレンドリー テスト

Google のモバイル フレンドリー テスト ツールを使用して、Web ページのレンダリングされた HTML をチェックすることもできます。

確認したい URL を入力すると、結果ページの右側にページのスクリーンショットが表示されます。

これは、Googlebot がページをどのように認識しているかを視覚的に表現したものです。 スクリーンショットとページを比較し、欠落している要素がないか確認できます。

何か異常に気づいた場合は、レンダリングされた HTML をチェックし、スクリーンショットに欠けているものが HTML コードにも欠けていないかどうかを確認してください。

注: Google はこのツールを 2023 年末に削除する予定です。ただし、SEO の Kristina Azarenko が現在およびそのときの優れた回避策を用意しているので、心配する必要はありません。

これは完全に次のことにつながります…

4. Googleリッチリザルトツール

Google のリッチリザルト テストでは、Googlebot が JavaScript ファイルをレンダリングする方法について同様の洞察が得られます。

URL を入力してテストを実行すると、Googlebot がページをどのように認識しているかを示すスクリーンショットが表示されます。

5. Google Search ConsoleのURL検査

Google Search Console の URL 検査ツールを使用すると、Web サイト上の特定の URL の JavaScript レンダリングをチェックできます。

このツールは、ページのインデックス作成ステータスと JavaScript レンダリングに関する詳細情報を提供します。

JavaScript が正常に実行されたか、問題があるかどうかが示されます。

JavaScript の実行に関連するエラーに注意してください。 これらは、検索エンジンがコンテンツを理解してインデックスを作成する方法に影響を与える可能性があります。

6. 専門のレンダリング ツールを使用する

SEO のための JavaScript レンダリングをテストするもう 1 つの効果的な方法は、専門のレンダリング ツールを使用することです。

これらのツールは、検索エンジン クローラーが JavaScript と対話して Web ページをレンダリングする方法をシミュレートします。

無料ツール:

  • フェッチ＆レンダリング – このツールはレンダリング プロセスを模倣しますが (Google 検査ツールと同様)、さまざまなユーザー エージェントを使用してテストできます。
  • プリレンダリング テスト ツールを使用すると、さまざまなクローラからのプリレンダリング情報を比較できます。 URL を入力してユーザー エージェントを選択するだけで、レンダリング プロセスに先立って、さまざまなクローラーにどのコンテンツが提供されているかを比較できます。

有料ツール:

現在、非常に強力なテクニカル SEO ソフトウェアが数多く入手可能であり、大規模またはエンタープライズ レベルのプロジェクトに特に役立ちます。

以下のすべてには、JavaScript レンダリングをテストするためのツールが含まれています。

  • ボット化
  • ジェットオクトパス
  • ルマール
  • スクリーミングフロッグ
  • オンクロール
  • セムラッシュ

どのツールを使用する場合でも、次の要素が正しくレンダリングされて、クロール可能性とインデックス付け可能性が確保され、コンテンツが技術的な観点から最高のランクにランクされていることを確認してください。

  • ページ上にコピーする
  • 画像
  • 正規タグ
  • タイトルとメタディスクリプション
  • メタロボットタグ
  • 構造化データ
  • フレフラン
  • 見出しタグ
  • ビデオ
  • インタラクティブ要素内のコンテンツ (つまり、アコーディオン機能)

JavaScript サイトを SEO フレンドリーにする方法

いくつかの JavaScript SEO ベスト プラクティスを実装すると、検索エンジンが Web ページを効果的にクロールしてインデックス付けできるようになります。

リンク

内部リンクと外部リンクには、href 属性を持つ HTML アンカー タグを使用します。

検索エンジンは、<a> タグをリンクとして認識し、理解します。 Googlebot はこれらのリンクを取得し、クロール キューに追加します。

説明的なアンカー テキストを使用して、Google がリンク先のページのコンテンツを理解しやすくします。 一般的なフレーズを避け、リンク先ページを正確に表す自然でキーワードが豊富なアンカー テキストを選択します。

画像

画像に説明的な alt タグを含めます。 Alt タグは、画像の内容を説明する代替テキストを提供します。

これは、検索エンジンが画像と周囲のコンテンツとの関連性を理解するのに役立ちます。

画像には、説明的でキーワードが豊富なファイル名を使用することもお勧めします。

schema.org の ImageObject のような構造化データ マークアップを使用して、画像に関する追加のコンテキストを提供できます。

サーバーサイドレンダリングまたは動的レンダリング

Angular や React などの JavaScript フレームワークを使用して構築された Web サイトは、デフォルトでクライアント側レンダリングになります。

Web ページのレンダリングはユーザーのブラウザで行われます。

問題は、検索エンジンのクローラーがコンテンツを理解できない可能性があり、空白のページが表示されることです。

別の方法は、サーバー側レンダリング (SSR) を使用して、JavaScript を多用するページの HTML バージョンを生成することです。

これにより、Google は事前にレンダリングされた HTML コンテンツに直接アクセスしてインデックスを作成できるようになります。

ただし、SSR は高価であり、リソースも大量に消費する可能性があります。

回避策は、動的レンダリングを使用することです。

これは、通常のユーザーが JavaScript によって生成された完全に動的なバージョンのページを引き続き体験している間に、事前にレンダリングされたページが検索エンジンのボットに提供される場合です。

JavaScript SEOをマスターする

SEO は、キーワードの最適化やバックリンクの確保だけにとどまりません。 また、テクニカル SEO に移行する際に、Web サイトがどのようにレンダリングされ、検索エンジンのクローラーに表示されるかを検討することも含まれます。

JavaScript レンダリングがクローラーのアクセシビリティを妨げないようにすることで、検索結果での可視性を向上させ、ページへのオーガニック トラフィックを増やすことができます。

私たちは、あなたが素晴らしいリンクを確保し、あなた自身とあなたのクライアントのために影響力のあるコンテンツを作成するためにどれだけの努力を費やしているかを知っています。 不十分な技術的な SEO や JavaScript の問題によってその努力が台無しにならないようにしてください。