JavaScript SEO：サーバーサイドレンダリングの落とし穴を回避する
公開: 2019-11-06JavaScript SEOは、現在SEO業界で注目されているトピックの1つです。これは、最新のWebが進化し、JavaScriptベースのWebアプリケーション（主にReactまたはAngularJS）で再起動または構築されるWebサイトが増えるにつれてです。 これにより、GoogleがJavaScriptを効果的にレンダリングできるようにする必要があるため、SEOがさらに複雑になり、ページのインデックスを作成して正しくランク付けできるようになります。 これは、サーバー側のレンダリングを使用して実現できます。 ただし、これはリスクがないわけではありません。 この記事では、サーバー側の5つのレンダリングミスを調べ、それらを回避する方法を説明します。
あなたのウェブサイトの技術的最適化のサポートを探しているなら、私たちのデジタル戦略グループのコンサルタントとの拘束力のない約束を設定して、彼らがあなたを助けることができる場所を見つけてみませんか？
予約をリクエストしてください！
サーバー側のレンダリングにはどのような種類がありますか？
サーバー上でGoogleのWebサイトを事前にレンダリングする（サーバー側のレンダリング、SSR）ことは、JavaScriptWebサイトがGooglbotに対応していることを確認するための1つのオプションです。 このようにして、ユーザーが通常の（まだレンダリングされていない）ブラウザバージョンを取得しながら、事前にレンダリングされたHTMLバージョンのWebサイトをGoogleに配信できます。
ただし、サーバー側のレンダリングに関しては、次のグラフからわかるように、さまざまなレンダリング方法もあります。これは、Jan-Willem Bobbinkによるいくつかの便利な追加機能とともに、Googleによって提供されています。
サーバー側レンダリングを設定および実行するには、主に3つの方法があります。
1.ダイナミックHTMLを使用したサーバー側レンダリング
サーバーサイドレンダリングは、各URLのレンダリングされたHTMLバージョンをオンデマンドで作成します。
2.静的HTMLを使用した静的レンダリング
基本的に、これにより、事前にレンダリングされた（静的な）HTMLバージョンのURLが事前に作成され、キャッシュに保存されます。
3.ダイナミックHTMLおよびJS/DOMを使用した（再）ハイドレーションを使用したサーバー側レンダリング
サーバーは、静的HTMLバージョンのURLと、構造化されたドキュメントオブジェクトモデル（DOM）マークアップが既に含まれているクライアント（ブラウザーなど）を提供します。 クライアントはこれを受け取り、クライアント側の変更に対応してよりインタラクティブにすることができる動的DOMに変換します。
Googleは、すべての長所と短所を含むWebレンダリングの優れた概要に加えて、興味がある場合はより詳細な説明を公開しました。 ただし、まず、JavaScript SEOまたはサーバーサイドレンダリングのトピックに関するヘルプをお探しの場合は、Searchmetrics DigitalStrategiesGroupまでお問い合わせください。
連絡する！
サーバー経由でJavaScriptWebサイトをレンダリングする際の落とし穴
最近、クライアントの1つでSSRの問題が発生しました。 彼らはAngularJSでウェブサイトを運営し、ヘッドレスChromeを介してRendertronでレンダリングします。
静的なSSRレンダリングアプローチを使用します。つまり、ページをレンダリングし、レンダリングされたHTMLをサーバーにキャッシュします（事前に）。 キャッシュされたHTMLは自動的に置き換えられませんが、レンダリングロジックに基づいています。 以下は、このWebサイトでの作業で発生した5つの問題です。 私はここでそれらをあなたと共有しているので、あなたが同様の課題を抱えているなら、あなたはそれらにどう対処するかについての考えを持っているでしょう。 ただし、これは未完成/拡張可能なリストと見なすことができます。
1.何もしないとき
グーグルがあなたのページをどのようにレンダリングするかを気にせず、注意を払わないときは、グーグルがあなたのページをどのようにレンダリングするか（実際に見るか）をお見せしましょう。 これは、サーバー側のレンダリングを行わずに、JavaScriptフレームワークを使用してシングルページアプリケーション（SPA）上に構築されたWebサイトに基づいています。
これは特に有望に見えませんね？ SSRを使用することが重要なのは、まさにそのためです。SSRは次のようになります。
2。 ページ付け
レンダリングに関して、ページ付けされたページをどのように処理しますか？ ええと、特に出版において、ページ付けされたページは、グーグルがそれらをクロールしている間、あなたの（最新の）記事をグーグルに提供するのにまだ良いことかもしれません。 ログファイルを見ると、Googleがページネーションにどのようにアクセスしているかがわかるので、事前にレンダリングされたバージョンを提供することが理にかなっている場所がわかります（スポイラー：レンダリングされたバージョンで399のURLを提供する必要はありません） ）。
クライアントは静的SSRアプローチでレンダリングするため、最初のページをレンダリングし、キャッシュされたバージョンのページ1をページ10までミラーリングしました。ページ11以降のレンダリングバージョンはありません。 これは、問題を非常によく示す2つのスクリーンショットであり、1ページとまったく同じコンテンツが2〜10ページにも提供されています。
これは、同じコンテンツと記事でGoogle10ページを提供することを意味します。 理想的には、Googleがすべてのページを正しくページ付けされた記事で一意としてレンダリングするようにします。
3。 新しい記事/製品が公開された後、カテゴリページのレンダリングされたバージョンを更新します
クライアントは、AMPカルーセル、Googleニュースボックス、モバイルニュースボックスなど、ほぼすべてのGoogleニュースプロパティでランキングを大幅に上げていますが、パブリッシャーカルーセルは例外です。 これを調査し始めたところ、新しい記事が公開されたときに、クライアントがキャッシュされたバージョンを更新しなかったことが判明しました。 彼らが1週間後にメインカテゴリのキャッシュバージョンを更新したことがわかりました。
そして1か月後でもサブカテゴリで。
これにより、事前にレンダリングされたバージョンでBrexitのトピックに関する古い記事がまだ残っていたが、そのトピックに関するすべての新しい記事が公開されていなかったという事実につながりました。 ここでの仮定は、この問題のために、Googleがカルーセルに入力するのに十分な新鮮な記事がなく、これがパフォーマンスに大きな悪影響を及ぼしたということです。 変更の影響については、現在調査中です。
4。 レンダリングにより、コンテンツが重複し、正規化が誤って発生する可能性があります
事前にレンダリングされたバージョンのURLを提供すると、システムベースの問題が発生する可能性があります。 クライアントが事前にレンダリングされたページを配信し、それぞれがレンダリングエンジンによって作成された独自のURLを持っているため、これらのURLにはパラメータ「p=1;」がありました。 render = 1”であり、完全にインデックス化可能でした：
そのURLに対してSSRエンジンによって設定された新しい標準もありました。 かなり不気味ですね
理想的には、これらのパラメータをGoogleクロールから除外する必要があります。
5。 レンダリング時にページタイトルが変更される
また、現在のページタイトルがJavaScriptを介してレンダリングされていることもわかりました。 これは、JavaScriptが無効になっている場合、HTMLメタタイトルに常にブランド名が表示されることを意味する方法で行われました。 また、ユーザーエージェントがGooglebotでない場合は、HTMLページのタイトルのみがレンダリングされます。 以下の2つの例を参照してください。 1つ目は、JavaScriptが無効になっているURLを示しています。 2番目は同じURLですが、JavaScriptが有効になっています。
メタデータが常に正しくレンダリングされるようにするには、レンダリングされていない（JavaScript）バージョンのURLにメタデータを含める必要があります。
結論
サーバー側のレンダリングは、単一ページのアプリケーションをレンダリングするためのCookieカッターアプローチとして使用することはできません。 スナップショットを提供するだけの静的なアプローチには、特別な注意が必要です。 クライアントの例からわかるように、SSRエンジンが常に最新バージョンのURLを提供していることを確認する必要があります。そうしないと、Googleが最新の記事を表示およびキャプチャできず、次のようになります。貴重なトラフィックを逃しています。
HTMLベースのWebサイトからJavaScriptベースのフレームワークに再起動する前に、サーバー側のレンダリングが含まれていること、およびそれが常に動的に提供されていることを確認してください。
JavaScriptの問題が発生している場合、またはWebサイトの技術的最適化のサポートを探している場合は、Digital Strategies Groupのコンサルタントとの拘束力のない約束を設定し、彼らがどこで役立つかを調べてみませんか？
予約をリクエストしてください！