JavaScript SEO：確保您的網站可索引

什麼是 JavaScript SEO？

JavaScript SEO 是優化網站上 JavaScript 的做法，以最大限度地提高網站在 Google 等搜索引擎中排名的能力。 由於我們正在優化頁面元素，並且它直接影響技術 SEO 指標，因此 JavaScript SEO 通常屬於技術 SEO 類別。

JavaScript 對 SEO 不利嗎？

有很多 JavaScript 網站。 雖然 JavaScript 提供了很多好處，但它也會對 SEO 產生負面影響。 JavaScript 本身對於 SEO 來說並不是壞事，但如果實施不當，它可能會使 Googlebot 更難抓取和索引頁面。 另外，過度使用 JavaScript 會增加加載時間，直接損害排名能力和用戶瀏覽體驗。

並非所有網站都以相同的方式使用 JavaScript。 雖然有些網站在其代碼中到處使用 JavaScript，但其他網站則使用 JavaScript 來支持核心框架和功能。

例如，Angular 和 React 等 JavaScript 框架可以幫助開發人員更高效地構建 Web 應用程序。 這些框架還需要比一般網站更廣泛和更複雜的 JavaScript 代碼。

使用此應用程序 shell 模型構建的網站（其中 UI 和數據模塊分開）需要執行 JavaScript 代碼來顯示對訪問者和搜索爬蟲都至關重要的內容。 因此，某些網站比其他網站更容易出現與 JavaScript 相關的 SEO 問題。 如果內容可以為訪問者正確加載，但不能為搜索爬蟲正確加載，則依賴 JavaScript 加載頁面內容的網站可能會遇到 SEO 問題。

Google 如何處理 JavaScript？

在深入討論優化之前，讓我們仔細看看 Google 實際上是如何處理 JavaScript 的。

Google 分三個階段處理 JavaScript：抓取、渲染和索引。 Googlebot 首先抓取其隊列中的網址。 它使用移動用戶代理向服務器發送請求，並從站點提取 HTML。 谷歌只有有限數量的計算資源，並且它只能分配這麼多資源來抓取任何一個網站（其抓取預算）。 Google 首先處理 HTML 資源以節省抓取資源，並通過將頁面的 JavaScript 資源放入渲染隊列來推遲其稍後抓取。

渲染允許 Googlebot 執行 JavaScript 代碼並查看用戶在瀏覽網站時會看到什麼，從而使 Googlebot 能夠正確索引它。 在處理大量使用 JavaScript 的網站時，尤其是使用應用程序 shell 模型以 JavaScript 形式顯示關鍵信息的網站時，Googlebot 必須首先執行並呈現 JavaScript 代碼，以了解有關頁面內容的更多信息。

當 JavaScript 代碼被踢到 Web 渲染服務隊列中等待處理時，此渲染過程會產生延遲。 雖然這個過程過去需要很長的時間，但谷歌最近表示，渲染延遲實際上平均只有 5 秒，90% 的網站在幾分鐘內處理完畢。 不幸的是，這並不是 SEO 所擁有的經驗。 一項研究表明，Google 抓取 JavaScript 的時間是 HTML 的九倍。 此外，錯誤、超時或 robots.txt 設置仍然會阻止 Googlebot 渲染頁面並為其編制索引。

由於需要渲染 JavaScript，Googlebot 分兩次對頁面進行索引。 使用無頭 Chromium 渲染 JavaScript 後，Googlebot 再次抓取渲染的 HTML，並將任何新發現的 URL 添加到列表中以供進一步抓取。 然後，它使用呈現的 HTML 為站點建立索引。

渲染 JavaScript

不僅僅是 Googlebot 需要渲染您的頁面。 渲染獲取您網站上的代碼並以可視方式生成它，以便訪問者可以在瀏覽器上查看它。 許多與 JavaScript 相關的索引問題是由於網站用於顯示其內容的呈現類型而發生的。 在呈現 JavaScript 頁面時，有多種不同的選項，其中一些選項比其他選項更適合搜索機器人。

服務器端渲染

顧名思義，當渲染過程直接發生在服務器上時，就會發生服務器端渲染 (SSR)。 渲染後，最終的 HTML 網頁將被傳送到瀏覽器，訪問者可以查看它，機器人可以抓取它。

服務器端渲染被認為是 SEO 的一個不錯的選擇，因為它可以減少內容加載時間並防止佈局變化。 服務器端方法還有助於確保所有元素實際呈現，並且客戶端技術不會忽略它們。

但是，服務器端呈現也會增加頁面接受用戶輸入所需的時間。 這就是為什麼一些嚴重依賴 JavaScript 的網站更喜歡在對 SEO 真正重要的網頁上使用 SSR，而不是在對可靠功能至關重要的頁面上使用 SSR。

客戶端渲染

客戶端渲染 (CSR) 將渲染工作負載從服務器轉移到客戶端（瀏覽器）。 用戶不是直接從服務器接收完全渲染的 HTML，而是接收一些準系統 HTML 以及 JavaScript 文件以供自己的瀏覽器渲染。

由於瀏覽器本身需要處理渲染負載，因此客戶端渲染通常比服務器端渲染慢。 這可能會導致明顯的 SEO 問題，因為頁面速度是 Google 用於對頁面進行排名的眾多技術 SEO 信號之一。 此外，較慢的加載速度也會增加跳出率，雖然跳出率本身可能不是一個信號，但較高的跳出率可能表明瀏覽體驗不佳且網站訪問者感到沮喪。 如果您希望提高網站速度，放棄客戶端渲染可能不是一個壞主意。

動態渲染

動態渲染在不同時間使用客戶端和服務器端渲染。 來自瀏覽器的請求將收到頁面的客戶端版本，而來自可能存在 JavaScript 問題的機器人的請求將獲得服務器端版本。 這可以保護最重要頁面上的功能，同時使搜索爬蟲更容易訪問需要索引的頁面。

具有大量需要頻繁更新和重新索引的動態內容的網站可能會受益於這種更靈活的呈現樣式。 然而，雖然動態渲染聽起來像是解決渲染問題的可靠解決方案，但它實際上並不是 Google 所建議的。 事實上，Google 的 JavaScript 搜索中心頁面特別警告說，由於額外的複雜性和資源需求，動態渲染是一種“解決方法”而不是“長期解決方案”。 也就是說，在需要時它仍然可以作為短期解決方案。

靜態渲染

靜態渲染也稱為預渲染，涉及在構建或部署過程中而不是在運行時生成頁面的 HTML 內容。 然後，根據請求將預渲染的 HTML 文件直接提供給瀏覽器或客戶端。

在靜態呈現中，服務器生成包含頁面所需的所有內容和數據（包括動態元素）的 HTML 文件。 這意味著瀏覽器或客戶端會收到完全呈現的 HTML 頁面，而不需要額外的處理或 JavaScript 執行。

搜索引擎機器人可以輕鬆抓取預渲染的 HTML 文件，從而更好地對網站內容建立索引。 此外，靜態渲染可以顯著縮短頁面加載時間，因為內容已經存在於 HTML 文件中，並且不需要在客戶端進行額外渲染。

哪種類型的渲染最適合 SEO？

Google 建議使用服務器端渲染、靜態渲染或通過補水結合客戶端和服務器端渲染（類似於動態渲染）。 谷歌並不禁止客戶端渲染，但由於它可能會出現更多問題，因此並不是首選。 隨著應用程序或頁面上 JavaScript 數量的增加，在客戶端渲染時，可能會對頁面與下一次繪製（INP，將於 2024 年 3 月成為 Core Web Vitals 的一部分）的交互產生負面影響。 當談到客戶端 JavaScript 時，Google 建議採取“在需要時僅提供所需服務”的方法。

減少 JavaScript SEO 問題的技巧

讓您的網站的 JavaScript 適合 SEO 並不一定非常複雜，但是您應該遵循一些最佳實踐才能獲得良好的結果。 以下是一些 SEO JavaScript 技巧，可幫助您和您的開發團隊制定不會損害排名的 JavaScript 策略。

1. 確保 Google 正在為 JavaScript 內容建立索引

不要相信 Google 會自動呈現並索引您的 JavaScript 內容。 花一些時間自行檢查，方法是對頁面上用引號括起來的特定文本字符串進行站點搜索（站點：yourdomain.com“特定文本”）。 如果該頁面出現，您可以放心它已被索引。

您還可以使用多種不同的 Google 工具（URL 檢查工具、移動設備友好測試）和第三方工具（Screaming Frog、JetOctopus）來更深入地挖掘並測試您的 JavaScript 實現。 查看本指南底部的“測試和故障排除”部分，了解有關使用這些工具檢查 JavaScript 相關索引錯誤的更多信息。

最後，不要忘記 robots.txt 可以阻止搜索爬蟲訪問特定頁面。 如果 Google 不為某個頁面建立索引，請確保 robots.txt 文件沒有禁止該頁面。 Google 不建議使用 robots.txt 來阻止 JavaScript 文件，因為這可能會影響 Googlebot 正確呈現頁面內容和索引頁面的能力。

2.遵循頁面搜索引擎優化最佳實踐

僅僅因為您使用的是 JavaScript 而不是 HTML，並不意味著頁面上的 SEO 過程將會改變。 所有常見的技術和頁面優化（標籤、標題、屬性等）仍然是必不可少的。 Google 實際上已經建議開發人員避免使用 JavaScript 來創建或管理規範標籤。

3.使用有效的內部鏈接

如果沒有內部鏈接，搜索機器人將無法找到網站架構中的所有頁面，並且無法對它們進行爬網或排名。 出於 JavaScript SEO 的目的，最好在 HTML 中而不是 JavaScript 中包含鏈接，這樣就可以立即抓取它們，而不是在渲染後抓取。

如果您確實使用 JavaScript 將鏈接動態輸入到代碼中，請確保仍然使用正確的 HTML 標記來設置它們。 我還建議使用 Google 的 URL 檢查工具來檢查錨文本是否存在於最終呈現的 HTML 中。 此外，Google 建議避免與 JavaScript 事件處理程序或 HTML 元素（如 <div> 或 <span>）鏈接，因為這些可能會給 Googlebot 帶來問題，並可能阻止其抓取鏈接。

4. 遠離 URL 中的哈希值

SPA（單頁應用程序）可以使用分段 URL 來加載不同的視圖。 但是，Google 希望網絡管理員避免在分段 URL 中使用哈希值，這表明您不應指望他們與 Googlebot 一起工作。 相反，他們建議使用 History API 根據 URL 加載不同的內容。

5. 使用延遲加載圖像

延遲加載是延遲加載不太重要或不可見的頁面資源的做法。 它對於優化性能和用戶體驗很常見。 但如果您不注意延遲的內容以及延遲的方式，最終可能會遇到索引問題。

Googlebot 在查看內容時不會滾動； 它只是調整其視口的大小。 這意味著腳本化的滾動事件可能不會觸發，並且內容可能不會被渲染。 Google 建議了幾種不同的方法來確保延遲加載時加載頁面上的所有內容。

最好為您的圖像保留延遲加載。 延遲加載內容是有風險的，因為它可能會超時並最終無法被索引。

6.修復重複內容

谷歌表示，重複內容不能成為手動操作的理由，除非其本質上是惡意或欺騙性的。 但它仍然會消耗您的抓取預算，延遲索引，並導致您的頁面相互競爭排名。 JavaScript 傾向於為相同內容創建多個 URL，因此請決定要對哪個版本建立索引，並對其餘版本應用規範和 noindex 標籤。

7. 定期進行現場審核

隨著頁面 JavaScript 代碼的數量和復雜性不斷增加，檢查其是否正確呈現和索引非常重要。 定期安排的網站審核可以幫助您發現在第一輪實施測試中可能遺漏的任何內容，因此不要忘記將 JavaScript SEO 納入您的常規 SEO 檢查表中。

測試和故障排除

您可以使用多種不同的工具來測試 Google 是否正在努力為您網站上的 JavaScript 建立索引，或者您最近的 Google JavaScript SEO 修復是否有效。

您的第一站應該是 Google 的網絡工具，特別是 URL 檢查工具和移動設備友好測試工具。 這些工具並不完美，因為它們根據可用資源實時生成頁面的版本，而不是渲染器使用的緩存版本。 但它們仍然可以為您提供 Google 如何處理您的 JavaScript 的相當準確的快照。

移動設備友好測試工具允許您在頁面上的代碼和 Google 看到的屏幕截圖之間進行切換，以便您可以比較兩者是否存在可能無法正確執行的 JavaScript。 測試完成後，您可以通過單擊“查看測試頁面”來訪問此功能。 單擊“更多信息”選項卡還會顯示來自 JavaScript 控制台的任何潛在錯誤消息，以及有關哪些頁面資源加載失敗及其原因的更多信息。

同樣，Google 的 URL 檢查工具為您提供了 Googlebot 如何查看您的頁面的屏幕截圖，以便您可以直觀地檢查其元素。 它還顯示頁面的索引狀態，以便您可以快速發現其中一個包含大量腳本的頁面是否尚未建立索引並且可能需要注意。

除了這些 Web 工具之外，您還可以使用多種第三方工具進行測試和故障排除。 Screaming Frog 和 JetOctopus 等爬蟲工具都可以呈現頁面的 JavaScript 屏幕截圖。 但是，請記住，這些渲染不一定與 Googlebot 生成的渲染相同，因為其他抓取工具正在生成它們。

獲得技術 SEO 專家的幫助

JavaScript SEO 有很多變化的部分。 有了專門的合作夥伴，您就不必單獨解決這些技術 SEO 問題。 Victorious 可以幫助您和您的開發團隊確保您的網站得到適當優化，並且您的 SEO 努力有助於實現您的業務目標。 聯繫我們免費諮詢以了解更多信息。