JavaScript SEO：避免服務器端渲染的陷阱

JavaScript SEO 目前是 SEO 行業的熱門話題之一，隨著現代網絡的發展以及越來越多的網站重新啟動或構建在基於 JavaScript 的網絡應用程序上，主要是在 React 或 AngularJS 上。 這樣一來，SEO 變得更加複雜，因為我們需要確保 Google 能夠有效地呈現 JavaScript，以便頁面可以被正確索引和排名。 這可以使用服務器端渲染來實現。 然而，這並非沒有風險。 在本文中，我將介紹五個服務器端渲染錯誤並解釋如何避免它們。

如果您正在尋求網站技術優化方面的支持，那麼為什麼不與我們的 Digital Strategies Group 顧問進行不具約束力的預約，並找出他們可以幫助您的地方呢？

要求預約！

存在哪些不同類型的服務器端渲染？

在您的服務器上為 Google 預渲染您的網站（服務器端渲染，SSR）是確保您的 JavaScript 網站對 Googlbot 友好的一種選擇。 通過這種方式，您可以將網站的預渲染 HTML 版本交付給 Google，而用戶則獲得正常（尚未渲染）的瀏覽器版本。

但是，當涉及到服務器端渲染時，也有不同的渲染方式，正如您從下一張圖表中看到的那樣，該圖表由 Google 提供，並由 Jan-Willem Bobbink 提供了一些有用的補充。

設置和執行服務器端渲染的三種主要方法：

1. 使用動態 HTML 的服務器端渲染

服務器端呈現按需創建每個 URL 的呈現 HTML 版本。

2.用靜態HTML進行靜態渲染

基本上，這會提前創建 URL 的預渲染（靜態）HTML 版本並將其存儲在緩存中。

3. 使用動態 HTML 和 JS/DOM 進行（重新）水化的服務器端渲染

服務器提供 URL 的靜態 HTML 版本和已經包含結構化文檔對像模型 (DOM) 標記的客戶端（瀏覽器等）。 客戶端將其轉換為動態 DOM，可以對客戶端的更改做出反應並使其更具交互性。

谷歌發布了一個關於渲染網絡的偉大概述，包括所有的優缺點，如果你有興趣，還可以加上更深入的解釋。 但首先，如果您正在尋求有關 JavaScript SEO 或服務器端渲染主題的幫助，請務必在 Searchmetrics Digital Strategies Group 與我們聯繫。

保持聯繫！

通過服務器渲染 JavaScript 網站時的陷阱

我們最近與我們的一位客戶遇到了一些 SSR 問題。 他們在 Angular JS 上運行他們的網站，並通過無頭 Chrome 使用 Rendertron 渲染它。

他們使用靜態 SSR 渲染方法，這意味著他們渲染頁面並將渲染的 HTML 緩存在服務器上（提前）。 緩存的 HTML 不會被自動替換，而是基於呈現邏輯。 以下是我們在本網站上遇到的五個問題。 我在這裡與你分享它們，這樣如果你有類似的挑戰，你就會知道如何應對它們。 但是，這可以被視為未完成/可擴展的列表。

1. 當你什麼都不做時

如果您不關心或不注意 Google 如何呈現您的頁面，那麼讓我向您展示 Google 如何呈現（實際看到）您的頁面。 這是基於使用 JavaScript 框架在單頁應用程序 (SPA) 上構建的網站，沒有服務器端呈現。

這看起來不是特別有希望，不是嗎？ 這正是使用 SSR 很重要的原因，因為它看起來像這樣：

2. 分頁

在渲染時如何處理分頁頁面？ 好吧，特別是在發佈時，分頁頁面仍然可以在 Google 抓取您的（最新）文章時為 Google 提供服務。 如果您查看您的日誌文件，您會看到 Google 如何訪問您的分頁，以便您知道提供預呈現版本的意義（劇透：您不需要為 399 個 URL 提供呈現版本)

當我們的客戶端使用靜態 SSR 方法進行渲染時，他們只渲染了第一頁並鏡像了第 1 頁的緩存版本，直到第 10 頁。從第 11 頁開始，沒有任何渲染版本。 這裡有兩張截圖很好地顯示了這個問題，第 1 頁的內容與第 2-10 頁的內容完全相同。

這意味著您為 Google 提供了 10 個具有相同內容和文章的頁面。 理想情況下，您希望 Google 使用正確分頁的文章將所有頁面呈現為獨一無二的。

3. 新文章/產品發布後更新類別頁面的渲染版本

我們的客戶在幾乎所有 Google 新聞屬性中的排名都顯著提高，例如 AMP Carousels、Google News Boxes 和 Mobile News Boxes，但 Publisher Carousels 除外。 我們開始對此進行調查，結果發現我們的客戶在發布新文章時沒有更新他們的緩存版本。 我們發現他們在一周後更新了主要類別的緩存版本：

甚至一個月後的子類別。

這導致他們在預渲染版本中仍然有一篇關於英國退歐主題的舊文章，但他們並沒有發布關於該主題的所有新文章。 我們在這裡的假設是，由於這個問題，谷歌沒有足夠的新文章來填充輪播，這對其性能產生了很大的負面影響。 我們仍在調查更改的影響。

4. 渲染可能導致重複的內容和錯誤的規範化

提供 URL 的預呈現版本可能會導致基於系統的問題。 當我們的客戶端交付預渲染頁面時，每個頁面都有自己的由渲染引擎創建的 URL，這些 URL 具有參數“p=1; render=1” 並且是完全可索引的：

SSR 引擎甚至為該 URL 設置了一個新的規範。 很詭異吧？

理想情況下，您希望從 Google 抓取中排除這些參數。

5. 渲染時頁面標題更改

我們還發現當前頁面標題是通過 JavaScript 呈現的。 這樣做的方式意味著 HTML 元標題在禁用 JavaScript 時始終顯示品牌名稱。 而當用戶代理不是 Googlebot 時，它只呈現 HTML 頁面標題。 請參閱下面的兩個示例。 第一個顯示禁用 JavaScript 的 URL。 第二個是相同的 URL，但啟用了 JavaScript。

為確保元數據始終正確呈現，您應該將其包含在 URL 的非呈現 (JavaScript) 版本中。

結論

服務器端呈現不能用作呈現單頁應用程序的千篇一律的方法。 對於只提供快照的靜態方法，需要特別注意。 從我們客戶的示例中可以看出，您需要確保 SSR 引擎始終提供最新版本的 URL，否則 Google 將無法查看和捕獲您最近的文章，您將錯過寶貴的流量。

在從基於 HTML 的網站重新啟動到基於 JavaScript 的框架之前，請確保包含服務器端呈現並且始終動態提供服務！

如果您遇到 JavaScript 問題，或者您正在尋求網站技術優化方面的支持，那麼為什麼不與我們的 Digital Strategies Group 顧問進行不具約束力的預約並找出他們可以幫助您的地方呢？

要求預約！