これらのソリューションでJavaScriptWebサイトをSEOフレンドリーにする

公開: 2022-01-19

最近のほとんどのWebサイトにはJavaScriptが含まれているため、動的でインタラクティブになっています。 検索エンジンボットは非常にインテリジェントですが、それでも多くのJavaScriptコンテンツをレンダリングせず、ページランクに影響を与える可能性があります。

JavaScriptの内容は、Webサイトがコードをレンダリングする方法に大きく依存します。

たとえば、サーバー側のレンダリングでは、サーバーにWebサイトのコンテンツが含まれます。 リクエストに応じて、ブラウザは完全にレンダリングされたHTMLを受け取ります。

ただし、クライアント側のレンダリングでは、JavaScriptはDOMを使用してブラウザによってレンダリングされます。

レンダリングの3番目のオプションは動的レンダリングです。この場合、クライアント側でレンダリングされたコンテンツはブラウザに送られ、サーバー側でレンダリングされたコンテンツは検索エンジンに送られます。

レンダリング手法は、JSのレンダリング方法、つまりページのランク付けに影響します。

すべてのWebサイトのJSコードが確実にレンダリングされるようにするには、適切なJavaScriptSEOの慣例に従う必要があります。 しかし、最初に、JavaScriptSEOとは何かを理解しましょう。

JavaScript SEOとは何ですか？

JavaScript SEOを使用すると、検索エンジンはWebサイト（またはWebページ）のJavaScriptコード（動的コンテンツ）を簡単にクロールしてインデックスを作成できます。 Googleまたはその他の検索エンジンは、JavaScriptをクロール、レンダリング、インデックス作成の3つの段階で処理します。 Googleがこれらすべてを行うには、JavaScriptコンテンツがSEOに対応している必要があります。つまり、表示されて利用可能である必要があります。

Googleがページ上のJavaScriptコンテンツを処理する方法

JavaScriptを処理するためにGooglebotが実行する手順は次のとおりです。

  • HTTPリクエストを介してクロールキューからURLを取得します
  • robots.txtファイルで、サイトでクロールが許可されていないURLを確認します
  • 「許可されていない」URLをスキップし、他のURLの応答を解析して、それらをクロールキューに追加します
  • インデックス付けされていないようにマークされているページを除いて、レンダリングのためにページをキューに入れます
  • Chromiumはページをレンダリングし、JavaScriptを実行し、ページにインデックスを付けます
  • リンク用にレンダリングされたHTMLを再度解析します
  • クロール用のURLをキューに入れます

GoogleがJavaScriptコンテンツのインデックスを作成しないのはいつですか？

グーグルとジャバスクリプト

Googleは、正しく実装されていればJavaScriptのインデックスを作成できます。 たとえば、JSファイルとCSSファイルの一部が非表示になっている場合、Googleはウェブサイトを正しくクロールできない可能性があります。 同様に、レンダリングされたHTMLに存在しない未加工のHTMLにリンクがある場合、Googleはそれらのリンクのクロールまたはインデックス作成をスキップする場合があります。

また、JavaScriptがHTMLに直接埋め込まれていない場合、Googleは実行のためにファイルをダウンロードする必要があります。 さらに、検索エンジンにはキャッシュされたバージョンのWebページがあり（パフォーマンスを向上させるため）、ページ上のJavaScriptが同期していない可能性があります。

JavaScriptコードのすべてのビットを読み取る必要があるため、JavaScriptを使いすぎると、ページ速度が低下したり、タイムアウトエラーが発生したりする可能性があります。

JavaScript SEOが重要なのはなぜですか？

JavaScript SEOは、Google（または検索エンジン）がSEOをスキャンする多くのページ上の要素とランキング要素に影響を与えるため、重要です。

ページ上の要素潜在的なSEOの問題可能なSEOソリューション
レンダリングされたコンテンツサイトのrobots.txtファイルでリソースがブロックされている場合、検索エンジン（Googleなど）はページをレンダリングできません。 また、Googleは、ブロックまたは非表示になっているJSファイルとCSSファイルのインデックス作成やレンダリングを行うことはできません。 ページのコアコンテンツでJavaScriptを削減するサーバー側レンダリング、動的レンダリング、ハイブリッドレンダリング（クライアント側とサーバー側の組み合わせ）など、クライアント側レンダリングの代替アプローチに従います。
リンク一部のリンクが内部にある場合、またはユーザーがURLをクリックしたときにJavaScriptがURLへのリンクを生成する場合、Googleはそのようなリンクを検出できません。 href属性、リンクの説明的なアンカーテキストを含むアンカーリンクを使用します。 <div>や<span>タグなどの疑似リンクはクロールされません
メタデータサイトがvue-metaなどのNode.jsパッケージを使用していない限り、検索エンジンは同じか、さらに悪いことに、各ビューまたはページのメタデータをクロールしていない可能性があります。 react-helmet、vue-meta、react-meta-tagsなどのNode.jsパッケージを使用します
遅延読み込み画像検索エンジンのクローラーは、遅延読み込みのマークが付けられたコンテンツを選択しません。 検索エンジンはコンテンツをスクロールできないため、一部のコンテンツはレンダリングされない場合があります。 IntersectionObserver APIを使用します。これは、DOM要素が利用可能になるとその可視性と位置を理解します。 ブラウザ（Chrome）のネイティブの遅延読み込み機能を使用することもできます。
ページの読み込み時間JavaScriptコンテンツが多いページは読み込みが遅く、検索ランキングに影響を与える可能性があります。 重要なJSコードをインラインで追加し、重要でないJSコードをメインコンテンツがレンダリングされるまで延期して、JSコード全体を削減します。

JavaScriptSEOのベストプラクティス

いくつかのベストプラクティスに従うことで、検索エンジンにページをクロールしてレンダリングさせることができます。

定義されたWeb標準に従ってリンクと画像を追加します

onclick 、 #pageurl 、またはwindow.location.href='/page-urlではなく、 ahrefタグを使用してすべてのリンクを追加します。 Googleはリンクを簡単にクロールしてフォローできます。

 <a href=”http://geekflare.com”>Welcome to Geek world</a>

同様に、 img data-srcタグではなくimg srcタグを使用して画像を追加します。

 <img src=”myimg.png” />

サーバー側のレンダリングを優先する

Webサイトのコンテンツが、ユーザーのブラウザとは別にサーバーで利用できることを確認してください。

レンダリングされたHTMLに、表示したいすべての重要なコンテンツが含まれていることを確認します

レンダリングされるHTMLには、正しいタイトル、メタロボット、メタ説明、画像、構造化データ、および正規タグが含まれている必要があります。

JavaScriptWebサイトをSEOフレンドリーにする

javascriptコード

WebページでのJavaScriptSEOの実装をテストするには、次の手順に従います。

  • Webサイトで使用されているJavaScriptの量を確認します。このために、ブラウザーでJavaScriptを無効にすることができます。 コンテンツがあまり表示されない場合は、WebサイトがJavaScriptに大きく依存していることを意味します。
  • Googlebotがすべての重要なコンテンツとタグを取得しているかどうかを確認します。Googleモバイルフレンドリーテストツールまたはリッチリザルトテストツールを使用して、Googlebotが生のHTMLを使用してコンテンツをレンダリングする方法を確認できます。
  • また、View Rendered SourceなどのChrome拡張機能を使用して、JavaScriptがページを変更し、ソースHTMLとレンダリングされたHTMLを比較する方法を理解することもできます。
  • SEO Pro Chrome拡張機能を使用して、レンダリングされたHTMLの重要なタグ（タイトル、メタ説明など）を確認できます。

結論

この記事では、JavaScriptがSEO処理を少し複雑にする方法と、コードに大量のJavaScriptを追加することによって引き起こされる潜在的な問題を解決するためのアプローチについて学びました。

また、JavaScriptWebサイトをSEOに適したものにするためのいくつかのベストプラクティスとツールも確認しました。 Googleが動的コンテンツを認識してクロールするのに役立つその他の優れたツールは、Prerender、AngularJS、およびHuckabuyです。

また、ウェブサイトの読み込み時間を短縮するための最良の方法のいくつかを確認することもできます。