JavaScript SEO の究極のガイド
公開: 2020-03-26最近、SEO 全体がさまざまなフロントエンド言語の使用に移行していることは周知の事実です。 Google タグ マネージャー (GTM) を使用するには、HTML と (場合によっては) Vanilla JavaScript の基本的な知識が必要です。
JavaScript といえば、Google クローラーが JavaScript を読み取る理由と方法について、最近議論がありました。 いくつかの関連する質問が浮上しています:
- Google は JavaScript を読み取りますか?
- サイトで JavaScript を頻繁に使用している場合、具体的に何を変更すればよいですか?
- サーバーサイドレンダリングとは?
- サイトのすべての JavaScript フレームワークで使用する必要がありますか?
以下でこれらの質問を分析し、それぞれに詳細に答えようとしました。
SEO に適用される最新の JavaScript の簡単な紹介
フロントエンド開発に精通していない場合、JavaScript はレンダリング プログラミング言語であり、(現在) DOM メソッドと呼ばれるものを介してアニメーションの目的で使用されています。 より洗練された形式では、React や Vue などのフレームワークを使用してネイティブ Web アプリケーションを構築するために使用されます。 React と Vue は非常に人気があり、多くのサイトがこれらのフレームワークを使用し始めていますが、SEO の専門家は、Vanilla や jQuery で動作する WordPress などのレガシー アーキテクチャに遭遇する可能性が高くなります。 正確に言うと、このような CMS での JavaScript の適用は、主にスライドショー、アコーディオン、およびその他の形式のテキスト アニメーションに関連しています。
JavaScript が SEO の問題である理由
Google は、Googlebot があらゆる形式の JavaScript に含まれるすべてのコンテンツをクロール、インデックス登録、およびランク付けできると述べています。 しかし、実際には、このトピックははるかに複雑です。 Googlebot は確かに静的言語 (つまり、HTML と CSS) をクロールできますが、オブジェクト対応プログラミング言語に関しては、動作が異なります。 2017 年、テクニカル SEO は、現在レンダリング キューとして知られているものを指摘し始めました。 これは、クライアント側の JavaScript に含まれるあらゆる形式のテキストをインデックスに登録するために Googlebot が使用する仮想の時間枠です (すぐに説明します)。
これを念頭に置くと、なぜ JavaScript が SEO にとってデリケートなテーマになったのかを理解するのは非常に簡単です。 重要なコンテンツがレンダリング キューにあるためにブロックされると、ランキングが即座に低下する可能性があります。 この問題は、JavaScript に大きく依存する WordPress などの CMS アーキテクチャ内で顕著です。
それは私の最優先事項ですか？
いいえ、しかし同時にそうです: よくある誤解は、JavaScript に含まれているものは Google によって自動的に削除されるというものですが、これは正しくありません。 コンテンツの一部が JavaScript に含まれているからといって、ランク付けされないわけではなく、時間がかかるだけです。 現在、最初のクロール後の単純なテキストのレンダリング キューは、72 時間前後で変動しています。 ただし、コンテンツが jQuery ベースのアコーディオンにとらわれていたため、コンテンツが Google によってインデックスに登録されるまでに 5 ～ 6 週間かかる場合がありました。 そうです、JavaScript からキーワード主導のコンテンツを削除してください。ただし、レンダリング キューが長すぎることが 100% 確実な場合に限ります。
フレームワークとレンダリング速度
JavaScript は最近、大きく進化しました。 2014/15 年の ECMA スクリプトの導入により、より高速で効率的なフレームワークが導入されました。 React は (今でも) 最も人気のある UI フレームワーク用の JavaScript ライブラリです。 Google の観点から、レンダリング速度の点でどのライブラリのパフォーマンスが優れているかを追跡するのは困難です。 考慮すべき変数は多数あります。 使用する CMS の種類、複数の機能の連結、および SEO と実際に関連付けるべきではないその他の非常に技術的な側面。
最近のデータを考えると、React フレームワークはそのシンプルさから、レンダリングに関して最も高速であると言えます。 繰り返しになりますが、コンテンツ アニメーションなどはほとんどが jQuery/Vanilla ベースです。 UI やネイティブ アプリ内でより一般的な React アーキテクチャとは対照的に、テクニカル SEO スペシャリストはこれらのフレームワークに遭遇する方が簡単です。
Red Cow では、Web アプリケーションを構築する際には React コンポーネントの使用を常に推奨しています。
Render/Fetch As Google: 正確ですか?
残念ながら違います。 ページの JavaScript とそのレンダリング キューをテストするには、サイトのアクセス ログ ファイルを分析するのが最善の方法です。 このようにして、クローラーがページに到達するヒット数を正確に評価できるため、どのページのレンダリング キューが優れているかがわかります。 Search Console の古い「fetch as Google」機能は、ページの HTML 階層をチェックするのにまだ役立つかもしれませんが、JavaScript を理解するという点では正確ではありません。 さらに、Search Console は、個々のフレームワークが外部 CDN にホストされていることを常に認識しているわけではありません。 または、JavaScript が原因でコンテンツの一部がレンダリングされないことを伝えることで、そのようなスクリプトが外部でホストされているという事実を見逃しています。これは、PWA やその他の形式のデータ駆動型プラグインの一般的な慣行です。
JavaScript リソースを使用してコンテンツを構造化する最良の方法
JavaScript からコンテンツを分離することは完全に実行可能であり、さまざまな方法で完了します。 たとえば、すべての DOM メソッドのアニメーションと機能を HTML 以外のタグに移動して、あらゆる形式のコンテンツを JavaScript から解放するように開発者に依頼できます。 アーキテクチャとエンジン (Node、一部の React、Vue) に JavaScript を使用する場合、クライアント側レンダリング (CSR) とは反対に、サーバー側レンダリング ライブラリ (SSR) の使用を検討することをお勧めします。 このプロセスは、選択したブラウザーではなく、サーバー内で JavaScript と動的リソースを実行します。 これにより、レンダリング キューが大幅に改善されるだけでなく、ページの読み込み時間が大幅に短縮されます。
まとめ
JavaScript は、フロントエンドの観点から見ると複雑な問題であり、SEO に関するアプリケーションに関してははるかに複雑です。 残念ながら、今日ではインターネットの 90% 以上が JavaScript で実行されているか、コード内で少なくとも 5 つのスクリプトを使用しています。 SEO のような絶え間なく進化する分野では、サイトの JavaScript を分析および評価できることの重要性を認識することが必須です。