修正會影響搜尋體驗的 JavaScript 問題

本指南可協助辨識特定 JavaScript 問題並進行修正，避免您的網頁 (或使用 JavaScrpit 語言的特定網頁內容) 因為這類問題而無法顯示在 Google 搜尋中。雖然 Google 能夠執行 JavaScript，但您在設計網頁和應用程式時還須考量一些不同的情況和限制，讓檢索器能順利存取並轉譯您的內容。您也可以參考我們的 JavaScript 搜尋引擎最佳化 (SEO) 基礎知識指南，進一步瞭解如何讓 JavaScript 網站在 Google 搜尋中獲得最佳成效。

Googlebot 有如一位良善的網路公民，主要任務是檢索網站，同時確保檢索作業不會破壞網站的使用體驗。Googlebot 與其網路轉譯服務 (WRS) 元件會持續分析並辨別哪些資源對基本網頁內容沒有幫助，從而避免擷取這類資源。舉例來說，對基本網頁內容沒有幫助的報表和錯誤要求，以及對於擷取基本網頁內容沒有利用價值的類似要求類型，都算是上述所說的資源。用戶端分析結果可能無法完整或準確地呈現出 Googlebot 和 WRS 在您網站上的活動，您可以使用 Search Console 來監控 Googlebot 和 WRS 在網站上的活動和意見回饋。

如果您懷疑網頁 (或使用 JavaScript 語言的特定網頁內容) 可能因為 JavaScript 問題而遭到封鎖，導致無法顯示在 Google 搜尋中，請按照下列步驟操作： 如果不確定 JavaScript 問題是否為主因，請按照我們的通用偵錯指南來判斷問題為何。

1. 如要測試 Google 檢索及轉譯網址的情況，請使用 Search Console 中的複合式搜尋結果測試或網址檢查工具。您可以查看載入的資源、JavaScript 控制台輸出結果和例外狀況、已轉譯的 DOM 以及其他資訊。

   此外，我們也建議收集使用者 (包括 Googlebot) 在您的網站上遇到的 JavaScript 錯誤並進行稽核，以便找出可能影響內容轉譯的潛在問題。

   以下範例展現了如何記錄通用 onerror 處理常式中記錄的 JavaScript 錯誤。注意：這種方法不能記錄某些類型的 JavaScript 錯誤，例如剖析錯誤。

   window.addEventListener('error', function(e) {
       var errorText = [
           e.message,
           'URL: ' + e.filename,
           'Line: ' + e.lineno + ', Column: ' + e.colno,
           'Stack: ' + (e.error && e.error.stack || '(no stack trace)')
       ].join('\n');
   
       // Example: log errors as visual output into the host page.
       // Note: you probably don't want to show such errors to users, or
       //       have the errors get indexed by Googlebot; however, it may
       //       be a useful feature while actively debugging the page.
       var DOM_ID = 'rendering-debug-pre';
       if (!document.getElementById(DOM_ID)) {
           var log = document.createElement('pre');
           log.id = DOM_ID;
           log.style.whiteSpace = 'pre-wrap';
           log.textContent = errorText;
           if (!document.body) document.body = document.createElement('body');
           document.body.insertBefore(log, document.body.firstChild);
       } else {
           document.getElementById(DOM_ID).textContent += '\n\n' + errorText;
       }
   
       // Example: log the error to remote service.
       // Note: you can log errors to a remote service, to understand
       //       and monitor the types of errors encountered by regular users,
       //       Googlebot, and other crawlers.
       var client = new XMLHttpRequest();
       client.open('POST', 'https://example.com/logError');
       client.setRequestHeader('Content-Type', 'text/plain;charset=UTF-8');
       client.send(errorText);
   
   });

2. 請務必避免 soft 404 錯誤。 這是單頁應用程式 (SPA) 特別難以避免的問題。 您可以採用下列一或兩種做法，防止系統為錯誤網頁建立索引：
   • 重新導向至伺服器傳回 404 狀態碼的網址。

     fetch(`https://api.kitten.club/cats/${id}`)
      .then(res => res.json())
      .then((cat) => {
        if (!cat.exists) {
          // redirect to page that gives a 404
          window.location.href = '/not-found';
        }
      });

   • 新增 robots meta 標記，或將其變更為 noindex。

     fetch(`https://api.kitten.club/cats/${id}`)
      .then(res => res.json())
      .then((cat) => {
        if (!cat.exists) {
          const metaRobots = document.createElement('meta');
          metaRobots.name = 'robots';
          metaRobots.content = 'noindex';
          document.head.appendChild(metaRobots);
        }
      });

   當 SPA 以用戶端 JavaScript 處理錯誤時，通常回報的 HTTP 狀態碼是 200，而非其他適當的狀態碼。這可能導致系統為錯誤網頁建立索引，並可能使該網頁出現在搜尋結果中。

3. Googlebot 可能會拒絕使用者授權要求。
   需要使用者授權的功能不適用於 Googlebot 或所有使用者。舉例來說，假設您要求使用 Camera API，但 Googlebot 並沒有相機可供您使用。相反地，請在不強制使用者授予相機存取權的情況下，讓使用者能存取內容。
4. 請勿使用片段網址載入不同的內容。
   SPA 可能會使用片段網址 (例如 https://example.com/#/products) 載入不同的檢視畫面。 我們已於 2015 年停止支援 AJAX 檢索配置，因此您無法仰賴片段網址供 Googlebot 進行檢索。我們建議使用 History API，以便根據 SPA 中的網址載入不同內容。
5. 請勿依賴資料持續性來提供內容。
   WRS 會載入個別網址 (請參閱Google 搜尋的運作方式，瞭解 Google 探索內容的大致方式)，並執行伺服器和用戶端重新導向，運作方式與一般瀏覽器相同。不過，WRS 在各網頁載入時並不會保留狀態：
   • 本機儲存空間和工作階段儲存空間資料在各網頁載入時會遭到清除。
   • HTTP Cookie 在各網頁載入時會遭到清除。
6. 使用內容指紋以避免 Googlebot 的快取問題。
   為了減少網路要求與資源使用，Googlebot 會主動進行快取。在此情況下，WRS 可能會因為忽略快取標頭而使用過時的 JavaScript 或 CSS 資源。如要避免這個問題，您可以建立內容指紋，使其成為檔案名稱的一部分 (例如 main.2bb85551.js)。 由於指紋會反映檔案內容，因此只要檔案內容有所更新，系統就會產生一個新檔名。如要進一步瞭解相關資訊，請參閱 web.dev 長效快取策略指南。
7. 務必讓您的應用程式對所需的任何重要 API 使用功能偵測，並視情況提供備援行為或 Polyfill。
   有些使用者代理程式可能尚未採用所有網路功能，也可能刻意停用特定功能。舉例來說，如果您使用 WebGL 在瀏覽器中算繪相片特效，功能偵測會顯示 Googlebot 不支援 WebGL。如要修正這個問題，您可以去掉相片特效，或是選擇使用伺服器端算繪功能來預先算繪相片特效，這樣就能讓所有人 (包括 Googlebot) 都能存取您的內容。
8. 確認您的內容支援 HTTP 連線。
   Googlebot 會使用 HTTP 要求從您的伺服器擷取內容，並不支援 WebSockets 或 WebRTC 等其他類型的連線。為了避免發生這類連線的支援問題，請務必提供備用 HTTP 以供擷取內容，同時使用完善的錯誤處理程序且執行功能偵測。
9. 確保您的網頁元件能正常轉譯。 運用複合式搜尋結果測試或網址檢查工具，檢查轉譯後的 HTML 是否包含預期中的所有內容。
   WRS 會壓縮 light DOM 和 shadow DOM。如果您使用的網頁元件並未採用 light DOM 內容的 <slot> 機制，請參閱網頁元件的說明文件以進一步瞭解更多資訊，或改用其他網頁元件。如需詳細資訊，請參閱「網頁元件最佳做法」。
10. 當您修正這份檢查清單中的問題後，請再次使用 Search Console 中的複合式搜尋結果測試或網址檢查工具對網頁進行測試。

    如果已修正問題，就只會看到綠色勾號。如果仍有錯誤項目，請前往 JavaScript Sites in Search Working Group 張貼問題。