Vue.jsとSEO：検索エンジンとボットのためにリアクティブなウェブサイトを最適化する方法

公開: 2022-03-10
簡単な要約↬リアクティブフレームワークで作成されたWebサイトは、Googleや他の検索エンジンによってインデックスに登録されますか？ SEOコンサルタントが提案するように、事前レンダリングを設定することは必須ですか？ それとも彼らは間違っていますか？

最近、リアクティブJavaScriptフレームワーク（React、Vue.js、Angularなど）が大流行しており、柔軟性、モジュール性、自動テストのしやすさから、ますます多くのWebサイトやアプリケーションで使用されているのも不思議ではありません。

これらのフレームワークを使用すると、ウェブサイトやアプリでこれまで考えられなかった新しいことを実現できますが、SEOの観点からはどのように機能しますか？ これらのフレームワークで作成されたページは、Googleによってインデックスに登録されますか？ これらのフレームワークでは、ページレンダリングのすべて（またはほとんど）がJavaScriptで行われるため（ボットによってダウンロードされるHTMLはほとんど空です）、Webサイトのインデックスを作成する場合は、これらのフレームワークは使用できないようです。検索エンジン、または一般的にボットによって解析されることさえあります。

この記事では、Vue.jsについて主に説明します。これは、私が最も使用したフレームワークであり、主要なプロジェクトの検索エンジンによるインデックス作成に関して直接経験したものですが、ほとんどの場合、ここで取り上げる内容は、他のフレームワークにも当てはまります。

jQueryをVue.jsに置き換える

jQueryを組み込むのと同じ方法で、ビルド手順を必要とせずに、Vueをプロジェクトに組み込むことができることをご存知ですか？ 関連記事を読む→

ジャンプした後もっと！ 以下を読み続けてください↓

問題の背景

インデックス作成のしくみ

ウェブサイトをGoogleでインデックスに登録するには、各ページ内のリンクをたどってGooglebot（ウェブサイトにアクセスし、ページのコンテンツをインデックスに保存する自動インデックス作成ソフトウェア）によってクロールされる必要があります。 また、Googlebotは、ウェブサイトで特別なサイトマップXMLファイルを検索して、公開サイトから正しくリンクされていない可能性のあるページを見つけ、ウェブサイトのページが変更される頻度と最後に変更された日時に関する追加情報を受け取ります。

少しの歴史

数年前（2009年以前）まで、Googleは、JavaScriptによって作成されたすべてのコンテンツを除いて、WebサイトのHTMLのコンテンツにインデックスを付けていました。 重要なリンクやコンテンツは、Googleによってインデックスに登録されないため、JavaScriptで記述してはならないことは、SEOの一般的な知識でした。また、Googleは、ウェブサイトの所有者が試みているかのように「偽のコンテンツ」と見なす可能性があるため、ウェブサイトにペナルティを課す可能性があります。検索エンジンに表示されたものとは異なる何かをユーザーに表示し、検索エンジンをだまそうとします。

たとえば、詐欺師は、SEOに適したコンテンツをHTMLに多く入れ、JavaScriptで非表示にするのが非常に一般的でした。 Googleは常にこの慣行に対して警告してきました：

「通常のユーザーに表示されるものとは異なるコンテンツをGooglebotに提供することはクローキングと見なされ、ウェブマスターガイドラインに違反します。」

これで罰せられる可能性があります。 場合によっては、サーバー側のさまざまなユーザーエージェントにさまざまなコンテンツを提供したり、ページの読み込み後にJavaScriptを介してコンテンツを切り替えたりするとペナルティが科せられることがあります。 これは、Googleが長い間JavaScriptを実行しているWebサイトのインデックスを作成していることを示していると思います。少なくとも、Webサイトの最終的なHTML（JavaScriptの実行後）と、インデックス用に解析していた生のHTMLを比較するためです。 しかし、Googlebotは常にJavaScriptを実行しているわけではなく、GoogleはJavaScriptで生成されたコンテンツをインデックス作成の目的で使用していませんでした。

次に、ウェブサイトで動的コンテンツを配信するためのAJAXの使用が増加していることを考慮して、GoogleはユーザーがAJAXベースのウェブサイトのインデックスを作成するのに役立つ「AJAXクロールスキーム」を提案しました。 それは非常に複雑でした。 基本的に、AJAXコンテンツが含まれているページのレンダリングを作成するためにWebサイトが必要でした。 Googleから要求されると、サーバーは、HTMLページに含まれるJavaScriptによって動的に生成されたコンテンツのすべて（またはほとんど）を含むバージョンのページを提供します—コンテンツのHTMLスナップショットとして事前にレンダリングされます。 サーバーサイドソリューションに（他のすべての目的のために）クライアントサイドで生成されることを意図したコンテンツを配信させるこのプロセスは、Googleでインデックス化されたJavaScriptに大きく依存するサイトを持ちたい人は多くのことを経験しなければならなかったことを意味します技術的な面倒。

たとえば、AJAXによって読み取られたコンテンツが外部のWebサービスからのものである場合、サーバー側で同じWebサービス呼び出しを複製し、サーバー側で、クライアント側で生成されたのと同じHTMLを生成する必要がありました。 JavaScript —または少なくとも非常によく似たもの。 Node.jsが登場する前は、フロントエンド用のJavaScriptとPHP、Java、Python、Rubyなどの2つの異なるプログラミング言語で同じレンダリングロジックを少なくとも部分的に複製する必要があったため、これは非常に複雑でした。バックエンド。 これは「サーバーサイドレンダリング」と呼ばれ、メンテナンスの地獄につながる可能性があります。フロントエンドでのコンテンツのレンダリング方法に重要な変更を加えた場合、それらの変更をバックエンドで複製する必要がありました。

ロジックの重複を回避する唯一の方法は、JavaScriptを実行するブラウザで自分のサイトを解析し、最終結果をサーバーに保存してGooglebotに提供することでした。 これは、現在「事前レンダリング」と呼ばれているものに似ています。

Google（AJAXクロールスキームを使用）は、この場合、Googlebotとユーザーに異なるコンテンツを提供しているという事実によるペナルティを回避することも保証しました。 ただし、2015年以降、Googleは、ウェブサイトの管理者に次のように伝える公式のブログ投稿でその慣行を廃止しました。

「今日、GooglebotがJavaScriptまたはCSSファイルをクロールするのをブロックしていない限り、通常、最新のブラウザのようにWebページをレンダリングして理解することができます。」

これが私たちに伝えたのは、GooglebotがWebページのインデックス作成時にJavaScriptを実行する機能を突然取得したということではありませんでした。これは、JavaScriptが非常に長い間（少なくとも偽のコンテンツや詐欺をチェックするために）実行していたことがわかっているためです。 代わりに、JavaScriptの実行結果にインデックスが付けられ、SERPで使用されることがわかりました。

これは、サーバー側でレンダリングされたHTMLをGoogleに提供することを心配する必要がなくなったことを意味しているようです。 ただし、JavaScriptフレームワークで利用できるようになった、サーバー側のレンダリングと事前レンダリングのためのあらゆる種類のツールがありますが、そうではないようです。 また、大規模なプロジェクトでSEOエージェンシーと取引する場合、事前レンダリングは必須と見なされるようです。 どうして？

Googleは実際にフロントエンドフレームワークで作成されたページをどのようにインデックス付けしますか？

実験

フロントエンドフレームワークで作成されたウェブサイトでGoogleが実際にインデックスを作成するものを確認するために、少し実験を行いました。 すべてのユースケースを網羅しているわけではありませんが、少なくともGoogleの動作について詳しく知るための手段です。 私はVue.jsで小さなウェブサイトを構築し、テキストのさまざまな部分をさまざまにレンダリングしました。

ウェブサイトのコンテンツは、Infinite JestWikiのDavidFosterWallaceによる本InfiniteJestの説明から取られています（みんなありがとう！ ）。 本全体の紹介テキストがいくつかあり、キャラクターのリストと個々の伝記があります。

  • Vue.jsメインコンテナの外部にある静的HTMLの一部のテキスト。
  • 一部のテキストは、アプリケーションのコードにすでに存在する変数に含まれているため、Vue.jsによってすぐにレンダリングされます。これらはコンポーネントのdataオブジェクトで定義されています。
  • ＃一部のテキストはdataオブジェクトからVue.jsによってレンダリングされますが、300ミリ秒の遅延があります。
  • キャラクターのBIOSは、Sandboxを使用して意図的に構築した一連のRESTAPIから取得されます。 Googleがウェブサイトのコードを実行し、しばらくすると停止してページの現在の状態のスナップショットを撮ると想定していたので、各ウェブサービスを増分遅延で応答するように設定しました。最初は0ミリ秒、2番目は300ミリ秒です。 3番目は600msで、以下同様に2700msまでです。

各文字の略歴は短縮され、サブページへのリンクが含まれています。このサブページは、Vue.js（URLは履歴APIを使用してVue.jsによって生成されます）からのみ利用できますが、サーバー側（URLを呼び出す場合）では利用できません。ページを直接表示すると、サーバーからの応答がありません）、それらもインデックスに登録されているかどうかを確認します。 これらはサーバー側をレンダリングする適切なリンクではなく、Googleがユーザーをこれらのリンクに直接誘導する方法がないため、これらはインデックスに登録されないと想定しました。 しかし、私はただチェックしたかっただけです。

この小さなテストサイトをGithubPagesに公開し、インデックス作成をリクエストしました。ご覧ください。

結果

実験結果（ホームページについて）は以下のとおりです。

  • すでに静的HTMLコンテンツに含まれているコンテンツは、Googleによってインデックスが作成されます（これはかなり明白です）。
  • Vueによってリアルタイムで生成されるコンテンツは、常にGoogleによってインデックスに登録されます。
  • Vueによって生成されたが、300ms後にレンダリングされたコンテンツもインデックスに登録されます。
  • Webサービスからのコンテンツは、多少の遅延があり、インデックスに登録される可能性がありますが、常にそうとは限りません。 Googleによるページのインデックス作成をさまざまな時点で確認しましたが、最後に挿入されたコンテンツ（数秒後）がインデックスに登録されることもあれば、インデックスに登録されないこともありました。 非常に迅速にレンダリングされるコンテンツは、外部Webサービスへの非同期呼び出しからのものであっても、ほとんどの場合インデックスに登録されます。 これは、Googleが各ページとサイトのレンダリング予算を持っているかどうかに依存します。これは、内部アルゴリズムに依存します。また、サイトのランキングとGooglebotのレンダリングキューの現在の状態によって大きく異なる場合があります。 したがって、外部のWebサービスからのコンテンツに依存してインデックスを作成することはできません。
  • サブページ（直接リンクとしてアクセスできないため）は、期待どおりにインデックスに登録されません。

この実験は私たちに何を教えていますか？ 基本的に、Googleは動的に生成されたコンテンツをインデックスに登録しますが、外部のWebサービスからのものであっても、「到着が遅すぎる」場合にコンテンツがインデックスに登録される保証はありません。 この実験以外にも、他の実際の本番Webサイトで同様の経験をしました。

競争力のあるSEO

さて、コンテンツはインデックスに登録されますが、この実験ではわかりません。コンテンツは競争力のあるランク付けになりますか？ Googleは、動的に生成されたWebサイトよりも、静的なコンテンツを含むWebサイトを好みますか？ これは答えるのが簡単な質問ではありません。

私の経験から、動的に生成されたコンテンツはSERPSのトップの位置にランク付けできることがわかります。 私は大手自動車会社の新しいモデルのウェブサイトに取り組み、新しい第3レベルドメインで新しいウェブサイトを立ち上げました。 このサイトはVue.jsで完全に生成されており、静的HTMLには<title>タグとmetaディスクリプション以外のコンテンツはほとんどありません。

サイトは公開後の最初の数日でマイナー検索のランキングを開始し、SERPのテキストスニペットは動的コンテンツから直接来た単語を報告しました。

3か月以内に、その車のモデルに関連するほとんどの検索で1位になりました。これは、自動車のメーカーが所有する公式ドメインでホストされており、そのドメインは評判の良いWebサイトから強くリンクされていたため比較的簡単でした。

しかし、プロジェクトを担当したSEO会社からの強い反対に直面しなければならなかったことを考えると、それでも結果は目覚ましいものだったと思います。

プロジェクトの締め切りが厳しく、時間が足りなかったため、事前にレンダリングせずにサイトを公開する予定でした。

アニメーションテキスト

Googleがインデックスに登録しないのは、高度にアニメーション化されたテキストです。 私が協力している会社の1つであるRabbitHole Consultingのサイトには、ユーザーがスクロールしている間に実行される多くのテキストアニメーションが含まれており、テキストをさまざまなタグ間でいくつかのチャンクに分割する必要があります。

ウェブサイトのホームページのメインテキストは、SEOに最適化されていないため、検索エンジンのインデックス作成を目的としていません。 それらは技術用語で作られておらず、キーワードを使用していません。それらは、会社についての概念的な旅でユーザーに同行することだけを目的としています。 ユーザーがホームページのさまざまなセクションに入ると、テキストが動的に挿入されます。

うさぎ穴相談
（画像出典：Rabbit Hole Consulting）（大プレビュー）

ウェブサイトのこれらのセクションのテキストはいずれもGoogleによってインデックスに登録されません。 GoogleにSERPで意味のあるものを表示させるために、お問い合わせフォームの下のフッターに静的テキストを追加しました。このコンテンツは、SERPのページのコンテンツの一部として表示されます。

フッターのテキストはインデックスに登録され、SERPに表示されます。ただし、ユーザーがページの一番下までスクロールして[質問]ボタンをクリックしてお問い合わせフォームを開かない限り、ユーザーにはすぐには表示されません。 これは、コンテンツがオンデマンドまたは長い遅延の後にレンダリングされるのではなく、HTMLにすぐにレンダリングされる限り、コンテンツがユーザーにすぐに表示されなくてもインデックスに登録されるという私の意見を裏付けています。

プレレンダリングはどうですか？

では、なぜ事前レンダリングについて大騒ぎするのでしょうか。サーバー側で行われるのか、プロジェクトのコンパイル時に行われるのでしょうか。 本当に必要ですか？ Nuxtのようないくつかのフレームワークは、実行をはるかに簡単にしますが、それでもピクニックではないため、セットアップするかどうかの選択は簡単ではありません。

必須ではないと思います。 Googleによってインデックスに登録されるコンテンツの多くが外部のウェブサービスからのものであり、レンダリング時にすぐに利用できない場合は確かに要件であり、場合によっては、たとえば、次の理由でまったく利用できない可能性があります。 、Webサービスのダウンタイム。 Googlebotの訪問中にコンテンツの到着が遅すぎる場合は、インデックスに登録されていない可能性があります。 ウェブサービスのメンテナンスを行っている瞬間にGooglebotがページのインデックスを作成すると、動的コンテンツがまったくインデックスに登録されない可能性があります。

さらに、静的コンテンツと動的に生成されたコンテンツのランキングの違いを証明するものはありません。 それには別の実験が必要かもしれません。 コンテンツが外部のWebサービスからのものであり、すぐに読み込まれない場合、ランキングの非常に重要な要素であるサイトのパフォーマンスに対するGoogleの認識に影響を与える可能性が非常に高いと思います。

おすすめの読み物：モバイルWebデザインがローカル検索に与える影響（およびその対処方法）

その他の考慮事項

互換性

最近まで、Googlebotはかなり古いバージョンのChromium（Google Chromeのベースとなっているオープンソースプロジェクト）、つまりバージョン41を使用していました。これは、最近のJavaScriptまたはCSS機能の一部がGoogleによって正しくレンダリングされなかったことを意味します（例：IntersectionObserver、 ES6構文など）。

Googleは最近、Googlebotで最新バージョンのChromium（執筆時点では74）を実行しており、バージョンは定期的に更新されることを発表しました。 GoogleがChromium41を実行していたという事実は、IE11や他の古いブラウザとの互換性を無視することを決定したサイトに大きな影響を及ぼした可能性があります。

Chromium41とChromium74の機能のサポートの比較はここで確認できますが、サイトが古いブラウザーとの互換性を維持するために不足している機能をすでにポリフィルしている場合は、問題はないはずです。

どのブラウザが一般的だと思う機能のサポートを見逃しているかわからないため、常にポリフィルを使用してください。 たとえば、Safariは、2019年3月にリリースされたバージョン12.1まで、IntersectionObserverのような主要で非常に便利な新機能をサポートしていませんでした。

JavaScriptエラー

重要なコンテンツをレンダリングするためにJavaScriptを実行するGooglebotに依存している場合は、コンテンツのレンダリングを妨げる可能性のある主要なJavaScriptエラーを絶対に回避する必要があります。 ボットは完全に有効ではないHTMLを解析してインデックスを作成する場合がありますが（ただし、どのサイトでも有効なHTMLを使用することが常に望ましいです）、一部のコンテンツの読み込みを妨げるJavaScriptエラーがある場合、Googleがインデックスを作成する方法はありません。そのコンテンツ。

いずれにせよ、エンドユーザーに重要なコンテンツをレンダリングするためにJavaScriptに依存している場合は、あらゆる種類のブロッキングエラーをチェックするための広範な単体テストがすでに行われている可能性があります。 ただし、Javascriptエラーは、たとえばAPI応答でのエラーの不適切な処理の場合など、予測できないシナリオから発生する可能性があることに注意してください。

ユニットテストまたは手動テスト中に選択できない可能性のあるエッジケースエラーを警告するリアルタイムエラーチェックソフトウェア（SentryやLogRocketなど）を用意することをお勧めします。 これにより、SEOコンテンツをJavaScriptに依存することが複雑になります。

その他の検索エンジン

他の検索エンジンは、動的コンテンツを使用するGoogleほど機能しません。 Bingは、動的コンテンツのインデックスを作成していないようです。また、DuckDuckGoやBaiduもインデックスを作成していないようです。 おそらく、これらの検索エンジンには、Googleがスペードで持っているリソースとコンピューティング能力が不足しています。

ヘッドレスブラウザでページを解析し、JavaScriptを数秒間実行してレンダリングされたコンテンツを解析することは、単純なHTMLを読み取るよりも確かにリソースを大量に消費します。 あるいは、これらの検索エンジンは、他の理由で動的コンテンツをスキャンしないことを選択したのかもしれません。 この原因が何であれ、プロジェクトがこれらの検索エンジンのいずれかをサポートする必要がある場合は、事前レンダリングを設定する必要があります。

注：他の検索エンジンのレンダリング機能の詳細については、BartoszGoralewiczによるこの記事を確認してください。 少し古いですが、私の経験によれば、それはまだ有効です。

その他のボット

あなたのサイトには他のボットもアクセスすることを忘れないでください。 最も重要な例は、Twitter、Facebook、およびユーザーによってリンクされたときにページのプレビューを表示するためにページに関するメタ情報を取得する必要があるその他のソーシャルメディアボットです。 これらのボットは動的コンテンツのインデックスを作成せず、静的HTMLで見つかったメタ情報のみを表示します。 これは、次の検討事項につながります。

サブページ

サイトがいわゆる「ワンページウェブサイト」であり、関連するすべてのコンテンツが1つのメインHTMLにある場合、そのコンテンツをGoogleでインデックスに登録しても問題はありません。 ただし、Googleがウェブサイトのセカンダリページをインデックスに登録して表示する必要がある場合は、JavaScriptフレームワークを使用して現在のURLを確認し、関連するコンテンツを提供する場合でも、それぞれに静的HTMLを作成する必要があります。そのページで。 この場合の私のアドバイスは、少なくとも正しいtitleタグとメタ説明/情報を提供するサーバー側（または静的）ページを作成することです。

結論

この記事の調査中に私が得た結論は次のとおりです。

  1. Googleのみをターゲットにしている場合は、事前レンダリングを使用してサイトを完全にインデックスに登録する必要はありません。
  2. インデックスを作成する必要のあるコンテンツについては、特に迅速に応答しない場合は、サードパーティのWebサービスに依存しないでください。
  3. Vue.jsレンダリングを介してHTMLにすぐに挿入するコンテンツはインデックスに登録されますが、アニメーションテキストや、スクロールなどのユーザーアクションの後にDOMに挿入されるテキストは使用しないでください。
  4. ページ/セクション全体がインデックスに登録されなかったり、サイトがまったくインデックスに登録されなかったりする可能性があるため、JavaScriptエラーをテストしてください。
  5. サイトに複数のページがある場合でも、ホームページと同じフロントエンドレンダリングシステムに依存しながら、Googleが個別のURLとしてインデックスに登録できるページを作成するためのロジックが必要です。
  6. 異なるページ間でソーシャルメディアの異なる説明とプレビュー画像が必要な場合は、サーバー側で、またはURLごとに静的ページをコンパイルすることによってこれにも対処する必要があります。
  7. あなたがグーグル以外の検索エンジンで実行するためにあなたのサイトを必要とするならば、あなたは確かにある種の事前レンダリングを必要とするでしょう。