本文是Vercel和MERJ通過實際測試揭開 Google 渲染的真實情況；翻譯自 Vercel 的 Blog 文章《How Google handles JavaScript throughout the indexing process》。注：Vercel 是 Next.js 的前端云平臺；MERJ 是數(shù)據(jù)驅動的營銷公司。

了解搜索引擎如何抓取、渲染和索引網(wǎng)頁是網(wǎng)站 SEO 的重要基礎。然而，隨著 Google 等搜索引擎的技術不斷變化，尤其是涉及客戶端 JavaScript，掌握有效的優(yōu)化方法變得更加困難。

也有許多過時的觀點仍然存在，導致大家對應用 SEO 的最佳實踐感到困惑：

• “Google 無法渲染客戶端 JavaScript”
• “Google 對待 JavaScript 頁面有不同的處理方式”
• “渲染隊列和時間對 SEO 的影響顯著”
• “以 JavaScript 為主的網(wǎng)站頁面抓取速度較慢”

為了驗證這些觀點，Vercel 與數(shù)據(jù)工程咨詢公司 MERJ 合作，進行了關于 Google 抓取行為的實驗，分析了超過 100,000 次 Googlebot 抓取，涵蓋了各種類型的網(wǎng)站，以測試并驗證 Googlebot 處理 JavaScript 的能力。

我們先回顧 Google 渲染技術的發(fā)展歷程，然后探討我們的研究發(fā)現(xiàn)及其對現(xiàn)代 Web 應用程序的實際影響。

Google 渲染功能的演變

多年來，Google 在抓取和索引網(wǎng)頁內容的能力上發(fā)生了顯著變化，了解這一演變對于掌握現(xiàn)代 Web 應用的 SEO 現(xiàn)狀至關重要。

2009 年之前：JavaScript 支持有限

在搜索引擎早期，Google 主要索引靜態(tài) HTML 內容。由 JavaScript 生成的內容在很大程度上對搜索引擎不可見，因此靜態(tài) HTML 被廣泛應用于 SEO 。

2009-2015：AJAX 動態(tài)渲染方案

Google 推出了?AJAX 動態(tài)渲染，允許網(wǎng)站提供動態(tài)生成內容的 HTML 快照。這是一種權宜之計，需要開發(fā)者為頁面創(chuàng)建單獨的可抓取版本（針對爬蟲使用服務器端渲染 SSR，針對用戶采用客戶端渲染 CSR）。

（我之前也寫過一篇?JavaScript SEO?的內容，當時主要推薦這種方法，現(xiàn)在已經(jīng)又升級了）

2015-2018：早期 JavaScript 渲染

Google 開始使用沒有頭部的 Chrome 渲染頁面，這是一次重要進步，然而這一早期瀏覽器版本在處理現(xiàn)在的 JavaScript 功能上仍存在局限性。

2018年至今：現(xiàn)代渲染能力

如今，Google 使用最新版本的 Chrome 進行渲染，與最新的 Web 技術保持同步。關鍵功能有：

• 通用渲染：Google 現(xiàn)在嘗試渲染所有 HTML 頁面，而不僅僅是某些子集。
• 最新的瀏覽器：Googlebot 使用最新穩(wěn)定版的 Chrome/Chromium，支持現(xiàn)代 JavaScript 功能。
• 無狀態(tài)的渲染：每次頁面渲染都在一個全新的瀏覽器會話中進行，不會保留 cookies 或之前渲染的狀態(tài)（Google 不會點擊頁面上的內容，如選項卡或 cookie 橫幅）
• 避免內容偽裝：Google 禁止為用戶和搜索引擎提供不同內容以操縱排名，避免基于 User-Agent 修改內容的代碼。所以優(yōu)化 Web 應用的無狀態(tài)渲染，并通過有狀態(tài)方法實現(xiàn)個性化。
• 資源緩存：Google 通過緩存資源加速網(wǎng)頁渲染，這對共享資源的頁面和重復渲染的頁面非常有用。Google 的網(wǎng)頁渲染服務（Web Rendering Service）使用內部算法決定緩存資源是否仍然有效，而不是依賴 HTTP Cache-Control 頭部。

今天，Google 的索引過程看起來是這樣的：

研究方法

先簡單說下研究方法，我們分析了 2024 年 4 月期間從多個網(wǎng)站收集的數(shù)據(jù)，研究了 Googlebot 如何渲染網(wǎng)站。

通過特殊工具跟蹤爬蟲行為，我們確認了哪些頁面被成功渲染、渲染所需時間，以及不同內容的處理方法。本次研究涉及 37,000 多個頁面，為驗證相關說法提供了可靠的數(shù)據(jù)支持。

誤解 1：“Google 無法渲染客戶端 JavaScript”

這一誤解讓許多開發(fā)者避免使用 JavaScript 框架，或者采用復雜的解決方案來適配 SEO。

測試情況

為驗證 Google 渲染 JavaScript 內容的能力，我們重點測試了以下方面：

• 測試 Googlebot 在抓取時，靜態(tài)預渲染、服務器端渲染（SSR）、客戶端渲染（CSR）的表現(xiàn)
• 動態(tài)內容索引：檢查通過 API 異步加載內容的頁面，確認 Googlebot 是否能處理并索引這些不在初始 HTML 中的內容
• 測試 Googlebot 如何處理逐步傳輸?shù)巾撁娴膬热?/span>。
• 渲染成功率：對比服務器日志中 Googlebot 的抓取請求數(shù)量與成功渲染的頁面信號，評估渲染完成的比例。

測試結論

我們發(fā)現(xiàn)，在分析超過 10 萬次 Googlebot 抓取后（排除錯誤和不可索引頁面），所有 HTML 頁面均被成功完整渲染，包括具有復雜 JavaScript 交互的頁面。

• 動態(tài)加載的內容（通過 API 異步獲取）也被成功索引，證明 Googlebot 能處理動態(tài)內容。
• 基于 React 的 Next.js 框架完全兼容 Googlebot
• 逐步加載的內容同樣成功渲染，說明這種技術對 SEO 沒有負面影響。
• Google 會嘗試渲染幾乎所有抓取的 HTML 頁面，而不僅限于少量復雜的 JavaScript 頁面。

誤解 2: “Google 對待 JavaScript 頁面有不同的處理方式”

測試情況

我們通過以下方法測試了 Google 是否會對 JavaScript 密集型頁面進行不同處理：

• CSS @import 測試：創(chuàng)建一個不使用 JavaScript 的測試頁面，通過 CSS 文件的嵌套導入檢查 Google 是否會在渲染時正確處理 CSS，并與啟用 JavaScript 的頁面行為進行對比。
• 狀態(tài)碼與 meta 標簽處理：用 Next.js 構建一個測試應用，測試不同 HTTP 狀態(tài)碼（如 200、304、3xx、4xx、5xx）和 noindex 元標簽的處理情況，以了解是否對 JavaScript 密集型頁面有不同對待。
• JavaScript 復雜度分析：對比渲染不同 JavaScript 復雜度頁面（簡單 JS、中等交互、高度動態(tài)渲染頁面）的行為，并測量初次抓取到完成渲染的時間差，評估復雜 JavaScript 是否會延長渲染時間。

測試結論

• Google 能成功渲染有或沒有 JavaScript 的頁面。
• 對于狀態(tài)碼為 200 的 HTML 頁面，無論是否包含 JS，都會被渲染；304 狀態(tài)頁面使用原始 200 狀態(tài)內容渲染，而 3xx、4xx、5xx 錯誤頁面不會被渲染。
• 初始 HTML 中包含 noindex 標簽的頁面不會被渲染，即使通過 JavaScript 移除該標簽也無法影響 SEO。
• JS 復雜度對渲染成功率沒有顯著影響，且在 nextjs.org 的規(guī)模下，JS 復雜度與渲染延遲無明顯關聯(lián)。但在更大規(guī)模的網(wǎng)站上，更復雜的 JS 可能會影響抓取效率。

誤解 3 ：“渲染隊列和時間對 SEO 的影響顯著”

一些人認為 JavaScript 密集型頁面由于渲染隊列的存在會導致索引延遲。為驗證這一點，我們研究了 Google 渲染頁面的時間延遲和模式。

測試情況

• 渲染延遲：分析 Google 抓取頁面到完成渲染的時間差（基于 37,000 多條數(shù)據(jù)）。
• URL 類型：比較帶查詢參數(shù)和不同頁面類型的渲染時間。
• 頻率模式：研究 Google 多次渲染同一頁面的頻率和規(guī)律。

測試結論

• 25% 的頁面在初始抓取后的 4 秒內就渲染完畢；渲染時間中位數(shù)為 10 秒；75% 頁面在 26 秒內完成。所以并不存在渲染隊列而造成嚴重的索引延遲
• 雖然有少數(shù)頁面渲染延遲較長（99% 的頁面最多延遲約 18 小時），但這只是少數(shù)情況，并不普遍。

另外發(fā)現(xiàn) URL 參數(shù)和更新頻率也會影響渲染速度：

• 帶有參數(shù)的 URL 會有更長的渲染延遲
• 經(jīng)常更新的頁面，渲染時間更短；更新較少的頁面，會被 Google減慢渲染頻率

誤解 4: “以 JavaScript 為主的網(wǎng)站頁面抓取速度較慢”

有人認為 JavaScript 為主的網(wǎng)站會讓 Google 更慢發(fā)現(xiàn)頁面，我們的研究對此提出了新見解。

測試情況

• 對比不同頁面類型（服務器渲染 SSR 、靜態(tài)生成、客戶端渲染 CSR）的鏈接發(fā)現(xiàn)速度。
• 測試 Google 是否能從未直接顯示的 JavaScript 數(shù)據(jù)中發(fā)現(xiàn)鏈接。
• 分析鏈接被 Google 發(fā)現(xiàn)和抓取的時間差異。

測試結論

• Google 能成功發(fā)現(xiàn)和抓取所有渲染后的頁面中的鏈接，不管渲染方式如何。
• Google 可以從 JavaScript 數(shù)據(jù)（如 JSON 數(shù)據(jù)）中找到鏈接，但需要明確的 URL 格式。
• 鏈接來源（HTML 標簽或 JavaScript 數(shù)據(jù)）不會影響 Google 的抓取優(yōu)先級。
• 客戶端渲染頁面需要先被完全渲染后才會被 Google 發(fā)現(xiàn)，因此服務器渲染頁面有一定時間優(yōu)勢。
• 提供更新的?sitemap.xml?能大大縮短不同渲染方式之間的頁面發(fā)現(xiàn)時間差異。

總體影響和建議

本次研究揭示了 Google 對大量使用 JavaScript 網(wǎng)站的處理方式，打破了一些常見誤解，并提供了以下關鍵結論和建議：

主要結論

• 兼容性：Google 能有效渲染和索引 JavaScript 內容，包括復雜的單頁應用和動態(tài)加載的內容。
• 渲染一致性：Google 對待 JavaScript 頁面和靜態(tài) HTML 頁面沒有本質區(qū)別，都會完整渲染。
• 渲染延遲：大多數(shù)頁面在幾分鐘內完成渲染，而非數(shù)天或數(shù)周。
• 頁面發(fā)現(xiàn)：JavaScript 網(wǎng)站不會因其技術架構在頁面發(fā)現(xiàn)上受到不利影響。
• 內容時機：頁面中的某些元素（如 noindex 標簽）的加載時間點很重要，Google可能忽略客戶端的動態(tài)更改。
• 鏈接評估：Google 在完整渲染頁面后再評估鏈接的價值，而不僅僅是發(fā)現(xiàn)它們。
• 渲染優(yōu)先級：Google 優(yōu)先渲染內容新鮮或更新頻繁的頁面，而不是嚴格按照提交順序。
• 渲染和抓取效率：渲染 JavaScript 頁面需要更多資源，對于大型網(wǎng)站，優(yōu)化性能和減少不必要的 JavaScript 能提升抓取效率，讓更多頁面被索引。

建議

1. 放心使用 JavaScript：可以使用 JS 框架來提升用戶體驗，但要注重性能，并按照 Google 的最佳實踐來處理懶加載內容。
2. 錯誤處理：在 React 應用中添加錯誤處理機制，防止某個組件出錯導致整個頁面渲染失敗。
3. 關鍵 SEO 內容：重要的 SEO 標簽和內容應通過服務器渲染或靜態(tài)生成，在初始 HTML 中直接提供。
4. 資源管理：確保關鍵資源（如 API、JS 和 CSS 文件）未被 robots.txt 阻止。
5. 內容更新：需要快速更新的內容應反映在服務器渲染的 HTML 中，而不是僅依賴客戶端 JavaScript。
6. 內部鏈接和結構：設計清晰的內部鏈接結構，重要的導航鏈接用標準 HTML 標簽（如?<a href="...">），而非 JS 導航。
7. 站點地圖：定期更新 sitemap.xml，對于更新頻繁的站點使用?<lastmod>?標簽提示 Google 最新內容。
8. 監(jiān)控：使用 Google Search Console 檢查頁面抓取和渲染情況，確保沒有因渲染策略引發(fā)的問題。

不同渲染策略的優(yōu)缺點

• 保持 sitemap.xml 更新可以大大縮短或消除不同渲染方式之間的頁面發(fā)現(xiàn)時間差異。

• Google 的渲染通常不會失敗。如果發(fā)生失敗，往往是因為資源被 robots.txt 阻止或特定的特殊情況導致的。

盡管渲染方式可能存在細微差異，但無論使用哪種策略，Google 都會快速發(fā)現(xiàn)和索引你的網(wǎng)站。與其過度擔心 Google 的渲染過程，不如專注于提升網(wǎng)頁性能，為用戶提供更好的體驗。

頁面速度仍是一個排名因素，Google 會通過核心網(wǎng)頁指標 (Core Web Vitals) 評估網(wǎng)站性能。同時，加載速度更快也能提升用戶體驗，每節(jié)省 100 毫秒的加載時間，網(wǎng)站轉化率可能提升 8%。更少的用戶跳出頁面，也會讓 Google 認為頁面更相關。性能影響疊加，毫秒決定成敗。

參考鏈接

* 原文鏈接《How Google handles JavaScript throughout the indexing process》https://vercel.com/blog/how-google-handles-javascript-throughout-the-indexing-process

* 《將動態(tài)渲染作為臨時解決方法》https://developers.google.com/search/docs/crawling-indexing/javascript/dynamic-rendering?hl=zh-cn

* 《JavaScript SEO 完全指南 2021版》