服務器端渲染營銷指南

已發表: 2021-07-26

編程語言不是一個容易掌握的概念，尤其是當您的 SEO 工作主要集中在非技術方面時。 但這裡是關於技術 SEO 的事情：對它的了解可以幫助您了解您的網站需要做出哪些更改才能獲得更好的搜索引擎排名。
隨著谷歌在 6 月推出 Core Web Vitals，這是其頁面體驗更新的一部分，每個尚未仔細研究技術 SEO 的營銷人員現在都希望這樣做。
當您的網站基於 JavaScript 框架構建時，需要深入研究的部分是服務器端渲染。

什麼是服務器端渲染？

服務器端渲染是指檢索網頁、獲取代碼、在屏幕上顯示內容的過程——這一切都發生在服務器上。
在 SSR 中：

  • 服務器向瀏覽器發送準備好渲染的響應；
  • 瀏覽器呈現頁面，使其準備好被查​​看，然後瀏覽器下載 JavaScript；
  • 然後瀏覽器在頁面準備好被查​​看時執行 React，並且
  • 然後網頁就可以進行交互了。

這一切發生的方式使它成為其他類型渲染的更好選擇：客戶端渲染（JavaScript 由瀏覽器渲染，也就是客戶端）和動態渲染（用戶獲得客戶端-服務器渲染的內容和搜索引擎）獲取服務器端呈現的內容）。 甚至 Google 也鼓勵 Web 開發人員選擇服務器端渲染。
為什麼？

[案例研究] 管理 Google 的機器人抓取

1001Pneus 擁有超過 26,000 個產品參考，需要一個可靠的工具來監控他們的 SEO 性能，並確保 Google 將其抓取預算用於正確的類別和頁面。 了解如何使用 OnCrawl 成功管理電子商務網站的抓取預算。
閱讀案例研究

SSR的優勢

  • 當用戶的互聯網連接速度較慢時，它有助於加載網頁
  • 它允許快速加載頁面，有助於更好的用戶體驗
  • 它創建了一個完整的 HTML 頁面，避免了耗時的數據獲取過程
  • 它允許加載頁面及其所有元素，即使用戶的設備功率不足，例如老一代智能手機
  • 它有助於 SEO 性能，因為它允許搜索引擎準確地抓取和索引頁面； 機器人可以輕鬆爬取頁面，因為它們了解 JS

總體而言，SSR 可以幫助您更好地為在線客戶提供服務，因為您的網站訪問者不會等待頁面在他們的設備上顯示。 快速的頁面轉換還可以確保您的用戶永遠不會得到一個空白頁面，讓他們可以立即使用您的網站。
由於 Google 正在加強其活動以通過圍繞用戶體驗構建的算法改進來提供更準確的結果，因此與客戶端-服務器渲染相比，SSR 更適合您的 SEO 性能。
但就像數字營銷中的其他一切一樣，單一的方法很少適用於所有人。 在某些情況下，服務器端渲染可能是個問題。 正如穀歌所說，SSR “不是靈丹妙藥”。

SSR的缺點

  • 它涉及大量工作，因為它兩次執行相同的應用程序：一次在客戶端上，然後在服務器上。
  • 它可能會延遲到第一個字節的時間
  • 它可能會影響內部鏈接或頁面質量，因為它無法呈現第三方 JS（例如，用戶生成的內容、產品評論等）或任何不在您的靜態 HTML 中的內容； 機器人將無法看到它們
  • 未更新的 URL 可能意味著機器人將無法看到新文章，這可能會導致錯過流量

SSR 的另一個關鍵方面是它意味著業務成本，因為渲染髮生在您的服務器上。 但這是您可能想要投資的成本，因為這種類型的渲染可能有助於 Core Web Vitals 優化。

為什麼 SSR 與 CWV 相關？

Web 開發人員和 SEO 已經為 CWV 的推出工作了幾個月。 大約 60% 的受訪 SEO 機構一直在忙於提高客戶的 CWV 分數。 如果您使用的是 SSR，您可能不需要做大量工作來滿足期望。
由於 SSR 有助於提高速度，因此您的網站已經可以在其中一項指標上表現出色：最大內容繪製 (LCP)。
LCP 專注於感知加載體驗。 它測量網頁最大的圖像或文本在視口中可見時的頁面加載時間。 您想要獲得高分的目標是在 <2.5 秒內實現 75% 的頁面加載。
獲得好的 LCP 的主要挑戰是渲染阻塞 JS 和 CSS； 緩慢的資源加載時間、緩慢的服務器響應和客戶端渲染。
轉向 SSR 只是提高 LCP 分數的一種解決方案，因為您的問題可能不僅限於 CSR。 您需要與您的 Web 開發人員合作，首先確定導致 LCP 滯後的原因。
如果頁面源代碼顯示沒有意義（您的開發人員會告訴您），那麼問題可能出在 CSR 上。 如果您的開發人員發現 TTFB 很差，那麼您可能正在處理緩慢的服務器響應時間。
其他 CWV 指標是：

  • 第一輸入延遲，側重於響應能力，以及
  • Cumulative Layout Shift，專注於視覺穩定性。

兩者都與 SSR 無關，因此這些是您可能需要投入更多精力的指標，因為 SSR 部分負責 LCP。

如何知道 SSR 是否正確呈現網頁

判斷 SSR 是否正確呈現頁面的最佳方法是使用工具。 其中之一是移動友好測試。 它是一種工具，可讓您了解您的網頁在 Googlebots 中的顯示方式，並在呈現過程中向您顯示錯誤（如果有）。
Google Search Console 還有一個 URL 檢查工具，可讓您查看搜索引擎是否呈現您的頁面。 使用它來檢查丟失的內容或與被阻止的 JavaScript 或 CSS 相關的任何錯誤。
你也可以去查看渲染源，這是一個免費的 Chrome 擴展。 它將告訴您瀏覽器如何將頁面從其原始 HTML 呈現為有效的 DOM。 該擴展將說明原始版本和渲染版本之間的區別，並重點說明 JS 在渲染時如何修改頁面。
另一個可以嘗試的 Chrome 擴展是 SiteCrawler。 支持 JS 的爬蟲抓取站點地圖、鏈接和圖像，並比較僅 HTML 和支持 JS 的頁面。

總結

大部分 SEO 工作都涉及對已經“交付”給客戶端或瀏覽器的頁面進行優化。 但是，當您檢查這些頁面如何“到達”客戶以及如何改進這種情況時，用戶會在您的網站上度過更好的時光。
機器人正確地抓取您的頁面。 您的頁面被編入索引。 您的網站具有更好的搜索引擎排名。
搜索引擎更新以及消費者行為的變化也需要對您的網站進行更改。 隨著 CWV 即將推出，現在是研究 SSR 的好時機，這是一個會影響您的 SEO 工作的技術方面。