サーバーサイドレンダリングのマーケターガイド
公開: 2021-07-26プログラミング言語は、特にSEO作業が主に非技術的な側面に焦点を合わせている場合、理解するのは簡単な概念ではありません。 しかし、ここに技術的なSEOについてのことがあります：それの知識はあなたがより良い検索エンジンランキングのためにあなたのウェブサイトがする必要がある変化を理解するのを助けます。
Googleが6月にCoreWebVitalsを公開しましたが、これはPage Experienceの更新の一部であるため、技術的なSEOを詳しく調べていないすべてのマーケティング担当者は、今すぐそれを実行したいと思うでしょう。
また、WebサイトがJavaScriptフレームワークに基づいて構築されている場合、掘り下げる部分の1つはサーバー側のレンダリングです。
サーバーサイドレンダリングとは何ですか？
サーバー側のレンダリングとは、Webページを取得し、コードを取得し、コンテンツを画面に表示するプロセスです。これらはすべてサーバー上で行われます。
SSRの場合：
- サーバーは、レンダリング可能な応答をブラウザーに送信します。
- ブラウザはページをレンダリングして表示できるようにし、ブラウザはJavaScriptをダウンロードします。
- 次に、ページを表示する準備ができると、ブラウザはReactを実行します。
- これで、Webページは双方向性の準備が整います。
それがすべて起こる方法は、他のタイプのレンダリングへのより良いオプションになりました：クライアント側レンダリング（JavaScriptがブラウザによってレンダリングされる場合、別名クライアント）および動的レンダリング（ユーザーがクライアントサーバーレンダリングされたコンテンツと検索エンジンを取得する場合）サーバー側でレンダリングされたコンテンツを取得します）。 Googleでさえ、Web開発者がサーバー側のレンダリングを選択することを推奨しています。
なんで？
[ケーススタディ]Googleのボットクロールの管理
ケーススタディを読むSSRの利点
- ユーザーのインターネット接続が遅いときにWebページをロードするのに役立ちます
- ページのスピーディーな読み込みが可能になり、ユーザーエクスペリエンスの向上に貢献します
- 完全なHTMLページを作成し、時間のかかるデータフェッチプロセスを防ぎます
- これにより、ユーザーが旧世代のスマートフォンのように電力が不足しているデバイスを使用している場合でも、すべての要素を含むページを読み込むことができます。
- 検索エンジンがページを正確にクロールしてインデックスを作成できるため、SEOのパフォーマンスに貢献します。 ボットはJSを理解しているため、ページを簡単にクロールできます
全体として、SSRは、サイトの訪問者がデバイスにページが表示されるのを待つ必要がないため、オンライン顧客により良いサービスを提供するのに役立ちます。 また、ページをすばやく移行することで、ユーザーが空白のページを取得することがなくなり、サイトをすぐに使用できるようになります。
Googleは、ユーザーエクスペリエンスに基づいて構築されたアルゴリズムの改善により、より正確な結果を提供するためにキャンペーンを強化しているため、SSRは、クライアントサーバーレンダリングと比較してSEOパフォーマンスに優れています。
しかし、デジタルマーケティングの他のすべてのように、単一のアプローチがすべての人に役立つことはめったにありません。 場合によっては、サーバー側のレンダリングが問題になる可能性があります。 Googleが言うように、SSRは「特効薬ではありません」。
SSRの欠点
- 同じアプリケーションを2回実行するため、多くの作業が必要になります。1回はクライアントで、次にサーバーで実行します。
- 最初のバイトまでの時間が遅れる可能性があります
- サードパーティのJS（ユーザー生成コンテンツ、製品レビューなど）や静的HTMLにないコンテンツをレンダリングできないため、内部リンクやページ品質に影響を与える可能性があります。 ボットはそれらを見ることができなくなります
- 更新されていないURLは、ボットが新しい記事を見ることができないことを意味する可能性があり、トラフィックの欠落につながる可能性があります
SSRのもう1つの重要な側面は、サーバー上でレンダリングが行われるため、ビジネスのコストを意味することです。 ただし、このタイプのレンダリングはCore Web Vitalsの最適化に寄与する可能性があるため、投資する必要があるかもしれません。
SSRがCWVに関連するのはなぜですか？
Web開発者とSEOは、CWVの展開を見越して何ヶ月も働いてきました。 ポーリングされたSEOエージェンシーの約60％は、クライアントのCWVスコアの改善に忙しくしています。 SSRを使用している場合は、期待に応えるために実質的な作業を行う必要がない場合があります。
SSRは速度を向上させるため、Webサイトはすでにメトリックの1つであるLargest Contentful Paint（LCP）でうまく機能している可能性があります。
LCPは、知覚されるローディングエクスペリエンスに焦点を当てています。 Webページの最大の画像またはテキストがビューポートに表示されているときのページの読み込み時間を測定します。 良いスコアを取得するために目指したいのは、2.5秒未満で75％のページ読み込みです。
優れたLCPを取得するための主な課題は、レンダリングをブロックするJSとCSSです。 リソースの読み込み時間が遅くなり、サーバーの応答が遅くなり、クライアント側のレンダリングが遅くなります。
問題はCSRに限定されない可能性があるため、SSRへの移行はLCPスコアを改善するための1つの解決策にすぎません。 Web開発者と協力して、LCPが遅れる原因を最初に特定する必要があります。
ページソースが意味をなさないコードを明らかにしている場合（そして開発者が教えてくれる場合）、問題はCSRである可能性があります。 開発者がTTFBが不十分であることに気付いた場合は、サーバーの応答時間が遅い可能性があります。
その他のCWVメトリックは次のとおりです。
- 応答性に焦点を当てた最初の入力遅延、および
- 視覚的な安定性に焦点を当てた累積レイアウトシフト。
どちらもSSRとは関係がないため、SSRがLCPを部分的に処理するため、これらはより多くの努力を払う必要があるメトリックです。
SSRがWebページを正しくレンダリングしているかどうかを知る方法
SSRがページを正しくレンダリングしているかどうかを判断する最良の方法は、ツールを使用することです。 その1つがモバイルフレンドリーテストです。 これは、ウェブページがGooglebotにどのように表示されるかを示すスナップショットを提供し、レンダリング中にエラーが発生した場合はそれを表示するツールです。
Google検索コンソールには、検索エンジンがページをレンダリングしているかどうかを確認できるURL検査ツールもあります。 これを使用して、欠落しているコンテンツや、ブロックされたJavaScriptまたはCSSに関連するエラーをチェックします。
無料のChrome拡張機能である[レンダリングソースの表示]に移動することもできます。 ブラウザがページを元のHTMLから動作中のDOMにレンダリングする方法を説明します。 拡張機能は、レンダリング時にJSがページをどのように変更したかを強調して、未加工バージョンとレンダリングバージョンの違いを示します。
試してみるもう1つのChrome拡張機能はSiteCrawlerです。 JS対応のクローラーは、サイトマップ、リンク、画像をクロールし、HTMLのみのページとJS対応のページを比較します。
まとめ
SEO作業の多くは、クライアントまたはブラウザにすでに「配信」されているページの最適化を伴います。 しかし、それらのページがどのようにクライアントに「到達」し、それがどのように発生するかを改善する方法を検討すると、ユーザーはWebサイトでより良い時間を過ごすことができます。
ボットはページを正しくクロールします。 ページがインデックスに登録されます。 あなたのサイトはより良い検索エンジンランキングを持っています。
消費者行動の変化に伴う検索エンジンの更新には、Webサイトの変更も必要です。 CWVの今後の展開に伴い、SEOの取り組みに影響を与える技術的側面であるSSRを検討する良い機会になります。