修正會影響搜尋體驗的 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 要求從您的伺服器擷取內容,並不支援 WebSocketsWebRTC 等其他類型的連線。為了避免發生這類連線的支援問題,請務必提供備用 HTTP 以供擷取內容,同時使用完善的錯誤處理程序且執行功能偵測
  9. 確保您的網頁元件能正常轉譯。 運用複合式搜尋結果測試網址檢查工具,檢查轉譯後的 HTML 是否包含預期中的所有內容。
    WRS 會壓縮 light DOM 和 shadow DOM。如果您使用的網頁元件並未採用 light DOM 內容的 <slot> 機制,請參閱網頁元件的說明文件以進一步瞭解更多資訊,或改用其他網頁元件。如需詳細資訊,請參閱「網頁元件最佳做法」。
  10. 當您修正這份檢查清單中的問題後,請再次使用 Search Console 中的複合式搜尋結果測試網址檢查工具對網頁進行測試。

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