如今，許多網(wǎng)站都是用 JavaScript 構建的。雖然 JavaScript 在客觀(guān)上沒(méi)有任何問(wèn)題，但我們實(shí)現它的方式會(huì )對我們的用戶(hù)體驗和我們在搜索結果中的排名產(chǎn)生相當大的影響。開(kāi)發(fā)人員不得不考慮他們的 JavaScript 如何影響 SEO，而 SEO 和其他數字營(yíng)銷(xiāo)人員現在必須更多地了解他們的內容和網(wǎng)站體驗所依賴(lài)的技術(shù)。如果您在任何一條船上，那么您來(lái)對地方了。繼續閱讀以了解客戶(hù)端渲染和服務(wù)器端渲染之間的區別，或跳轉到特定部分。

什么是客戶(hù)端渲染？

客戶(hù)端呈現意味著(zhù)網(wǎng)站的 JavaScript 在您的瀏覽器中呈現，而不是在網(wǎng)站的服務(wù)器上。根據 Google 的 Martin Splitt 的說(shuō)法，“如果您使用 JavaScript 框架，則默認為客戶(hù)端渲染。這意味著(zhù)您先發(fā)送基本的 HTML，然后再發(fā)送一段 JavaScript，然后 JavaScript 會(huì )在瀏覽器中獲取和組合內容?！?/p>

將客戶(hù)端渲染想象成從宜家訂購家具。宜家不會(huì )把已經(jīng)組裝好的家具送到你家。相反，他們會(huì )在到達您家后將您必須組裝的零件發(fā)送給您。

客戶(hù)端渲染有什么好處？

因為呈現內容的所有負擔都在客戶(hù)端（即試圖查看您的頁(yè)面的人或機器人），客戶(hù)端呈現是網(wǎng)站所有者更便宜的選擇，因為它減少了他們自己的服務(wù)器上的負載。這也是 JavaScript 網(wǎng)站的默認狀態(tài)，使網(wǎng)站所有者的客戶(hù)端呈現比服務(wù)器端呈現更容易。

客戶(hù)端渲染的風(fēng)險是什么？

客戶(hù)端渲染有兩個(gè)主要缺點(diǎn)。一方面，客戶(hù)端渲染會(huì )增加用戶(hù)體驗不佳的可能性。JavaScript 可以為頁(yè)面增加幾秒鐘的加載時(shí)間，如果這種負擔完全由客戶(hù)端（網(wǎng)站訪(fǎng)問(wèn)者）承擔，那么他們可能會(huì )感到沮喪并離開(kāi)您的網(wǎng)站。

客戶(hù)端渲染的第二大缺點(diǎn)是它對搜索引擎機器人的影響。例如，Googlebot 有一種稱(chēng)為第二波索引的東西。在這個(gè)過(guò)程中，他們首先對頁(yè)面的 HTML 進(jìn)行爬網(wǎng)和索引，然后在資源可用時(shí)返回呈現 JavaScript。這種兩階段的方法意味著(zhù)有時(shí)，JavaScript 內容可能會(huì )被遺漏，并且不會(huì )包含在 Google 的索引中。

其他搜索引擎在渲染 JavaScript 方面比谷歌差。JavaScript 還可以在搜索引擎機器人抓取網(wǎng)站時(shí)減慢它們的速度，這在大型網(wǎng)站上可能會(huì )引入抓取預算問(wèn)題。

什么是服務(wù)器端渲染？

服務(wù)器端渲染是指網(wǎng)站的 JavaScript 在網(wǎng)站的服務(wù)器上渲染。再次使用家具示例，這就像訂購完全組裝好的到達您家的家具。

服務(wù)器端渲染有什么好處？

因為 JavaScript 在網(wǎng)站的服務(wù)器上呈現，所以搜索引擎機器人和人類(lèi)都能獲得更快的頁(yè)面體驗。這不僅意味著(zhù)更好的用戶(hù)體驗（這也是谷歌排名算法的一部分），而且還消除了與速度相關(guān)的抓取預算問(wèn)題。

將完全呈現的頁(yè)面發(fā)送到搜索引擎機器人也意味著(zhù)您不會(huì )冒客戶(hù)端呈現內容可能發(fā)生的“部分索引”的風(fēng)險。當 Google 和其他搜索引擎機器人嘗試訪(fǎng)問(wèn)您的頁(yè)面時(shí)，他們無(wú)需等待渲染資源可用才能看到您的完整頁(yè)面，而是從一開(kāi)始就獲得完全渲染的頁(yè)面。

服務(wù)器端渲染有哪些風(fēng)險？

服務(wù)器端渲染可能是昂貴且資源密集型的。它可能很昂貴，因為為機器人和人類(lèi)網(wǎng)站訪(fǎng)問(wèn)者呈現內容的全部負擔都在您的服務(wù)器上。實(shí)施它可能會(huì )占用大量資源，因為它不是 JavaScript 網(wǎng)站的默認設置，并且需要您的工程團隊的工作才能執行。

服務(wù)器端渲染也往往不適用于第三方 JavaScript。因此，如果您使用 Bazaarvoice 之類(lèi)的服務(wù)在您的網(wǎng)站上提取評論，它們將不會(huì )通過(guò)服務(wù)器端呈現來(lái)呈現。

哪個(gè)更適合 SEO、客戶(hù)端或服務(wù)器端渲染？

在這兩個(gè)選項之間，服務(wù)器端渲染比客戶(hù)端渲染更適合 SEO。這是因為服務(wù)器端渲染可以加快頁(yè)面加載時(shí)間，這不僅可以改善用戶(hù)體驗，還可以幫助您的網(wǎng)站在 Google 搜索結果中獲得更好的排名。

服務(wù)器端渲染也更適合 SEO，因為它消除了從搜索引擎機器人渲染 JavaScript 的負擔，解決了與速度相關(guān)的抓取預算問(wèn)題和部分索引。但是，如果您負擔不起實(shí)現服務(wù)器端渲染的費用怎么辦？或者您沒(méi)有執行它的技術(shù)資源？值得慶幸的是，還有第三種選擇。

混合渲染選項：動(dòng)態(tài)渲染

動(dòng)態(tài)渲染是客戶(hù)端和服務(wù)器端渲染的混合體。它是這樣工作的。當搜索引擎機器人嘗試訪(fǎng)問(wèn)頁(yè)面時(shí)，網(wǎng)站會(huì )發(fā)送一個(gè)完全渲染的頁(yè)面。但是當一個(gè)人試圖訪(fǎng)問(wèn)一個(gè)頁(yè)面時(shí)，他們的瀏覽器必須呈現該頁(yè)面。

許多人喜歡這種Google 認可的渲染選項，因為它：

• 比服務(wù)器端渲染更便宜、更容易實(shí)現
• 解決與速度相關(guān)的抓取預算問(wèn)題
• 解決部分索引問(wèn)題
• 讓人類(lèi)訪(fǎng)問(wèn)者享受 JavaScript 提供的交互性

哪些類(lèi)型的網(wǎng)站需要擔心這個(gè)問(wèn)題？

客戶(hù)端渲染、服務(wù)器端渲染或動(dòng)態(tài)渲染之間的爭論只與使用 JavaScript 的網(wǎng)站相關(guān)。如果您的網(wǎng)站是純 HTML，則人類(lèi)用戶(hù)或搜索引擎機器人不需要呈現任何內容?；?React 和 Angular 等庫構建的完整 JavaScript 網(wǎng)站在渲染之前可能完全空白，具體取決于它們的編碼方式。

網(wǎng)站也可以是部分 JavaScript 和部分 HTML。例如，網(wǎng)站可能只依賴(lài) JavaScript 來(lái)獲取評論（例如 Bazaarvoice）或“相關(guān)產(chǎn)品”小部件。這意味著(zhù)在渲染之前只有頁(yè)面的一部分是可見(jiàn)的。

如果您的網(wǎng)站部分或完全依賴(lài) JavaScript，特別是如果您的網(wǎng)站很大（即數千或數百萬(wàn)頁(yè)）并且經(jīng)常更改（例如新聞出版商或產(chǎn)品周轉率高的電子商務(wù)網(wǎng)站），那么您肯定會(huì )想要仔細考慮您的渲染選項。

如何審核我的 JavaScript 網(wǎng)站是否存在 SEO 問(wèn)題？

在選擇解決方案之前，最好先診斷一下您的 JavaScript 網(wǎng)站上存在哪些 SEO 問(wèn)題（如果有的話(huà)）。

有幾種方法可以做到這一點(diǎn)：

• 使用“禁用 JavaScript”擴展— 您可以使用各種瀏覽器擴展來(lái)關(guān)閉您正在查看的網(wǎng)頁(yè)上的 JavaScript。這是查看頁(yè)面上 JavaScript 元素位置的簡(jiǎn)單方法。如果關(guān)閉 JavaScript 后內容或鏈接消失，則可能是 JavaScript SEO 問(wèn)題。
• 對加載了 JS 的內容進(jìn)行 Google 搜索— 一旦您確定了加載了 JavaScript 的內容，請嘗試復制其中的一些文本并將其粘貼到 Google 搜索中。如果您的網(wǎng)站沒(méi)有返回任何結果，則您可能遇到了 JavaScript SEO 問(wèn)題。
• Google Search Console 的 URL 檢查工具- 通過(guò)此工具運行一個(gè)頁(yè)面，然后單擊“查看抓取的頁(yè)面”以查看 Google 呈現的內容。如果缺少某些頁(yè)面內容，則可能是 JavaScript SEO 問(wèn)題。您可以使用 Google 的Rich Results Test或Mobile-Friendly Test做同樣的事情。
• 將僅 HTML 的爬網(wǎng)與啟用 JS 的爬網(wǎng)進(jìn)行比較——如果您有一個(gè)支持 JavaScript 的爬蟲(chóng)，如SiteCrawler，您可以在不啟用 JavaScript 的情況下爬取您的網(wǎng)站，然后在啟用 JavaScript 的情況下再次爬取。雖然其他工具允許您一次測試一個(gè)頁(yè)面，但這是獲得整個(gè)站點(diǎn)中 JavaScript 問(wèn)題的高級視圖的好方法。