瞭解 JavaScript 搜尋引擎最佳化 (SEO) 基礎知識

JavaScript 是構成網路平台的關鍵要素,因為這類指令碼語言提供了多種功能,可將網路轉變成功能強大的應用程式平台。只要讓他人能夠透過 Google 搜尋找到您的 JavaScript 網路應用程式,您就可以在人們搜尋該應用程式提供的內容時發掘新的使用者,並再次吸引現有使用者。雖然 Google 搜尋是透過持續更新的 Chromium 版本執行 JavaScript,您仍可藉由最佳化作業修正部分問題

本指南將說明 Google 搜尋如何處理 JavaScript,以及針對 Google 搜尋改善 JavaScript 網路應用程式的最佳做法。

Googlebot 如何處理 JavaScript

Googlebot 的 JavaScript 網路應用程式處理作業分成三個主要階段:

  1. 檢索
  2. 轉譯
  3. 建立索引

Googlebot 會檢索及轉譯網頁,並建立網頁索引。

Googlebot 會從檢索佇列中擷取網址並加以檢索,然後將網址傳送至處理階段。處理階段會擷取重新回到檢索佇列的連結,並將網頁排入轉譯佇列。網頁會從轉譯佇列傳送至轉譯器,轉譯器會將經過轉譯的 HTML 傳回處理階段,而處理階段則會建立內容索引並擷取要排入檢索佇列的連結。

在發出 HTTP 要求來擷取檢索佇列中的網址前,Googlebot 會先確認您是否允許檢索,做法是讀取 robots.txt 檔案。如果該檔案將網址標為不允許檢索,Googlebot 就不會對這個網址發出 HTTP 要求,也不會檢索此網址。

接著,Googlebot 會剖析 HTML 連結 href 屬性中其他網址的回應,並將網址新增至檢索佇列。如要防止 Googlebot 找到特定連結,請採用 nofollow 機制

在傳統網站或伺服器端轉譯的網頁上,HTTP 回應中的 HTML 會包含所有內容,因此這類網站或網頁相當適合 Googlebot 檢索網址及剖析 HTML 回應。不過,部分 JavaScript 網站可能會採用應用程式命令介面模型,其中的初始 HTML 並未包含實際內容,這時 Googlebot 就必須執行 JavaScript 才能查看這類指令碼語言產生的確切網頁內容。

除非漫遊器中繼標記或標頭告知不要建立網頁索引,否則 Googlebot 會將所有網頁排入轉譯佇列。網頁可能會在這個佇列中停留數秒,但也可能需要更長的時間。在 Googlebot 資源允許的情況下,無頭 Chromium 會轉譯網頁並執行 JavaScript。Googlebot 會再次剖析連結中經過轉譯的 HTML,然後將藉此找到的網址排入檢索佇列。此外,Googlebot 也會利用經過轉譯的 HTML 來建立網頁索引。

請注意,我們依然建議您採取伺服器端轉譯或預先轉譯的做法,方便使用者和檢索器更快速地瀏覽網站,況且也不是所有漫遊器都能執行 JavaScript。

透過獨特的標題和摘要描述網頁

只要提供獨特的描述性標題和實用的中繼說明,即可協助使用者迅速找出最符合個人需求的搜尋結果。請參閱這篇指南,瞭解良好的標題和說明應具備哪些條件。

您可以透過 JavaScript 設定或變更中繼說明和標題。

編寫相容的程式碼

由於瀏覽器提供的 API 種類繁多,而 JavaScript 又是發展相當快速的語言,因此 Googlebot 對於 API 和 JavaScript 功能的支援會有些限制。為了確保您的程式碼能與 Googlebot 相容,請遵循 JavaScript 問題的疑難排解指南

使用有意義的 HTTP 狀態碼

Googlebot 會透過 HTTP 狀態碼確認網頁檢索過程中是否發生錯誤。

您應該利用有意義的狀態碼告知 Googlebot 是否要檢索網頁或建立網頁索引,例如透過 404 說明找不到網頁,或藉由 401 提醒 Googlebot 必須登入才能存取網頁。此外,您也可以使用 HTTP 狀態碼告知 Googlebot 網頁是否已移至新網址,以便視情況更新索引。

以下清單列出 HTTP 狀態碼和相關使用時機:

HTTP 狀態 使用時機
301/302 網頁已移至新網址。
401/403 因權限問題而無法存取網頁。
404/410 現已無法存取網頁。
5xx 服務器端發生錯誤。

謹慎使用中繼漫遊器標記

透過中繼漫遊器標記,您可以禁止 Googlebot 建立網頁索引或追蹤連結。舉例來說,如果您在網頁頂端新增下列中繼標記,即可禁止 Googlebot 建立網頁索引:

<!-- Googlebot won't index this page or follow links on this page -->
<meta name="robots" content="noindex, nofollow">

您可以使用 JavaScript 在網頁上新增中繼漫遊器標記,或變更標記內容。請參考下列範例程式碼,瞭解如何透過 JavaScript 變更中繼漫遊器標記,進而在 API 呼叫無法傳回內容的情況下,禁止系統為目前的網頁建立索引。

fetch('/api/products/' + productId)
  .then(function (response) { return response.json(); })
  .then(function (apiResponse) {
    if (apiResponse.isError) {
      // get the robots meta tag
      var metaRobots = document.querySelector('meta[name="robots"]');
      // if there was no robots meta tag, add one
      if (!metaRobots) {
        metaRobots = document.createElement('meta');
        metaRobots.setAttribute('name', 'robots');
        document.head.appendChild(metaRobots);
      }
      // tell Googlebot to exclude this page from the index
      metaRobots.setAttribute('content', 'noindex');
      // display an error message to the user
      errorMsg.textContent = 'This product is no longer available';
      return;
    }
    // display product information
    // ...
  });
    

在 Googlebot 執行 JavaScript 之前,如果在漫遊器中繼標記內發現「noindex」,就不會轉譯網頁或建立網頁索引。

修正圖片和延遲載入的內容

視頻寬和執行效能而定,圖片可能會導致使用者支付高昂的數據費用。建議您採用延遲載入作業,讓圖片僅在即將對使用者顯示時載入。為了確保您能以適合搜尋服務的方式執行延遲載入,請遵循延遲載入指南